如何使用three.js向Forge Viewer添加文本? [英] How can you add text to the Forge Viewer with three.js?

问题描述

因此，我正在尝试使用Three.js将TextGeometry添加到查看器中.我想知道是否有可能这样做，以及您将如何去做.

So, I am trying to add TextGeometry to the viewer with Three.js. I am wondering if it is possible to do this, and how you would go about doing it.

我看过文档，但是自从Forge查看器使用R71以来，他们的解决方案似乎都无法正常工作，而现在使用three.js远远超出了它们.我也尝试过从Github下载R71示例，但是我收到一个错误消息，即使在html中将它们包括在脚本标签中时，其中一种字体也不存在.

I have looked on the docs, but none of their solutions seem to be working since the Forge viewer uses R71, and they are far past that now with three.js. I have also tried downloading the R71 examples from Github, but I get an error saying that one of the fonts is not existent even when I have included them with script tags in the html.

那么，您可以将TextGeometry添加到查看器吗?如果是这样，有人可以给我举个例子.

So, are you able to add TextGeometry to the viewer? And if so, could someone give me an example of how to do this.

我也考虑过在查看器上分层放置2D画布，但是由于场景比查看器画布大，因此从技术上我不确定如何解决这个奇怪的设置.

I have also considered layering a 2D canvas over the viewer, but because the scene is bigger than the viewer canvas, it makes for a weird setup that I am not technically sure of how to fix.

此操作的目标是能够通过javascript向查看器添加文本，这意味着用户将无法控制文本框，脚本将生成该文本框.

The goal of this is to be able to add text to the viewer via javascript, meaning the user will have no control over the textbox, the script will spawn it.

推荐答案

即使查看器版本落后，从更高版本的Three.js导入功能也相当简单.我使用了 threejs-full-es6 程序包，该程序包仅导入需要的内容从Three.js版本开始，这样您就不会使用两个版本的lib来夸大您的应用程序，并且还可以防止名称空间冲突.目前正在使用r89，这是另一个好消息！

It is rather straightforward to import features from later versions of Three.js even if the Viewer version is behind. I used the threejs-full-es6 package which allows to import only what's needed from the version of Three.js, just so you don't bloat your app with two versions of the lib and also prevents namespace collision. It is using r89 at the moment, another good news!

这是我创建的一个简单的ES6扩展，其中包含了TextGeometry的创建:

Here is a simple ES6 extension I created that wraps the TextGeometry creation:

import { Font, TextGeometry } from 'threejs-full-es6'
import FontJson from './helvetiker_bold.typeface.json'

export default class TestExtension
  extends Autodesk.Viewing.Extension {

  constructor (viewer, options) {

    super()

    this.viewer = viewer
  }

  load () {

    return true
  }

  unload () {

    return true
  }

  /////////////////////////////////////////////////////////
  // Adds a color material to the viewer
  //
  /////////////////////////////////////////////////////////
  createColorMaterial (color) {

    const material = new THREE.MeshPhongMaterial({
      specular: new THREE.Color(color),
      side: THREE.DoubleSide,
      reflectivity: 0.0,
      color
    })

    const materials = this.viewer.impl.getMaterials()

    materials.addMaterial(
      color.toString(),
      material,
      true)

    return material
  }

  /////////////////////////////////////////////////////////
  // Wraps TextGeometry object and adds a new mesh to  
  // the scene
  /////////////////////////////////////////////////////////
  createText (params) {

    const geometry = new TextGeometry(params.text,
      Object.assign({}, {
        font: new Font(FontJson),
        params
      }))

    const material = this.createColorMaterial(
      params.color)

    const text = new THREE.Mesh(
      geometry , material)

    text.position.set(
      params.position.x,
      params.position.y,
      params.position.z)

    this.viewer.impl.scene.add(text)

    this.viewer.impl.sceneUpdated(true)
  }
}

Autodesk.Viewing.theExtensionManager.registerExtension(
  'Viewing.Extension.Test', TestExtension)

要使用它，只需加载扩展并调用createText方法:

To use it, simply load the extension and invoke createText method:

import './Viewing.Extension.Test'

// ...

viewer.loadExtension('Viewing.Extension.Test').then((extension) => {

    extension.createText({
      position: {x: -150, y: 50, z: 0},
      bevelEnabled: true,
      curveSegments: 24,
      bevelThickness: 1,
      color: 0xFFA500,
      text: 'Forge!',
      bevelSize: 1,
      height: 1,
      size: 1
    })
})

甜！ ;)

这篇关于如何使用three.js向Forge Viewer添加文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！