如何使用 three.js 向 Forge Viewer 添加文本？

Question

所以，我正在尝试使用 Three.js 将 TextGeometry 添加到查看器。我想知道是否有可能做到这一点，以及你将如何去做。

我查看了文档，但自从 Forge 查看器使用 R71 以来，他们的解决方案似乎都没有工作，而现在使用 three.js，他们的解决方案已经远远超过了。我也尝试从 Github 下载 R71 示例，但我收到一个错误消息，说其中一种字体不存在，即使我在 html 中将它们与脚本标签一起包含在内。

那么，您可以将 TextGeometry 添加到查看器吗？如果是这样，谁能给我一个如何做到这一点的例子。

我也考虑过在查看器上放置一个 2D 画布，但由于场景比查看器画布大，它会造成奇怪的设置，我在技术上不确定如何修复。

这样做的目的是能够通过 javascript 向查看器添加文本，这意味着用户将无法控制文本框，脚本将生成它。

Answer 1

即使 Viewer 版本落后，从 Three.js 的更高版本导入功能也相当简单。我使用了threejs-full-es6 包，它只允许从 Three.js 的版本中导入所需的内容，这样你就不会用两个版本的 lib 来膨胀你的应用程序，还可以防止命名空间冲突。目前正在使用 r89，另一个好消息！

这是我创建的一个简单的 ES6 扩展，它包装了 TextGeometry 创建：

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 方法：

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
    })
})

甜！ ;)