透过 three.js 在 Forge Viewer 里头创建 3D 文字（使用部份 r81 的功能）

对于 Forge Viewer 比较熟悉的朋友可能知道 Forge Viewer 使用了一个自定的 three.js 第 r71 版，但最新版的 three.js 版号已经来到 r81，所以在这两版号间已经有不少新功能被加到了 r81 版，是先前版本没有的。但很不幸的，新功能要加入 Forge Viewer里头这件事对于 Viewer 开发团队而言绝非一件易事，是需要一些时间来完成的；这篇文章将带领大家用最少的工作量将 r81 上的新功能拿来 Forge Viewer 上使用。

这篇文章是从How can you add text to the Forge Viewer with three.js? 得到的灵感，这个开发者想要在 Forge Viewer 的 Scene 里头通过Three.js的 TextGeometry加入 3D 文字，但 Forge Viewer 所使用的 three.js 里头有少一些相依的代码或资源，这里我们使用 Webpack 这个代码打包工具和 threejs-full-es6 这个套包来解决这个问题，通过这两个工具将 r81 或新版号的 three.js 功能引入你的 Forge 应用里，当然这边不是把整个 r81 的代码搬过来，而是只引入我们需要的部份。在这个案例里头，我们可以只将 TextGeometry 、Font和其他相依文档引入（例如Facetype.json）。

为了验证这个概念，下面是一个简单的 ES6 样例，用来创建我们的 TextGeometry ：

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

export default class TextExtension
  extends Autodesk.Viewing.Extension {

  /////////////////////////////////////////////////////////
  // Adds a color material to the viewer
  //
  /////////////////////////////////////////////////////////
  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.Text', TextExtension)

他的使用方法是：

import './Viewing.Extension.Test'

// ...

// 载入扩展
viewer.loadExtension('Viewing.Extension.Test').then((extension) => {

    // 创建 3D 文字
    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
    })
})

如果想要创建自个的 Facetype.json，可以透过这个网站来帮忙：http://gero3.github.io/facety...