Importing features from newer versions of Three.js into an older Viewer version is a breeze. I utilized the threejs-full-es6 package, which lets you import only the necessary elements from the desired Three.js version. This helps prevent your app from getting bloated with multiple versions of the library and also avoids namespace conflicts. Currently, it is based on r89, which is great news!
Here is an easy ES6 extension I developed for wrapping TextGeometry creation:
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)
To use this extension, simply load it and call the createText method:
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
})
})
https://i.sstatic.net/CZwhA.png
Exciting times ahead! ;)