透过 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 TextExtensionextends 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...