透過 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...