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

Question

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

我查看了文档，但是自 Forge 查看器使用 R71 以来，他们的 none 解决方案似乎有效，而他们现在使用 three.js 已经远远超过了这个水平。我也曾尝试从 Github 下载 R71 示例，但我收到一条错误消息，指出其中一种字体不存在，即使我将它们与脚本标签一起包含在 html.[=11= 中也是如此]

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

我也考虑过在查看器上叠加 2D canvas，但是因为场景比查看器大 canvas，所以设置很奇怪，我在技术上不确定如何修复。

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

Answer 1

从更高版本的 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
    })
})

太棒了！ ;)

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

How can you add text to the Forge Viewer with three.js?

javascript

three.js

autodesk-forge