Question

所以，我试图用Three.js将TextGeometry添加到查看器中。我想知道是否可以这样做，以及你将如何去做。

我查看了文档，但是由于Forge查看器使用R71，他们的解决方案似乎都没有工作，现在他们已经远远超过了现在的三个.js。我也尝试从Github下载R71示例，但是我得到一个错误，即即使我在html中包含脚本标记，也不存在其中一种字体。

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

我还考虑过在查看器上分层2D画布，但是由于场景比查看器画布大，所以它使得我在技术上无法确定如何修复的奇怪设置。

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

Answer 1

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

这是我创建的一个包含TextGeometry创建的简单ES6扩展：

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添加文本？

1 个答案: