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

Question

因此，我正在嘗試使用Three.js將TextGeometry添加到查看器中。 我想知道是否有可能這樣做，以及您將如何去做。

我看過這些文檔，但是自從Forge查看器使用R71以來，他們的解決方案似乎都無法正常工作，而現在使用three.js遠遠超出了它們。 我也嘗試過從Github下載R71示例，但是我收到一個錯誤消息，即使我在html中將它們包括在腳本標簽中，字體中的一種也不存在。

因此，您能夠將TextGeometry添加到查看器嗎？ 如果是這樣，有人可以給我舉一個例子。

我還考慮過在查看器上分層放置2D畫布，但是由於場景比查看器畫布大，所以從技術上我不確定如何解決這個問題，這導致了一個怪異的設置。

這樣做的目的是能夠通過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
    })
})

甜！ ;）