如何使用 three.js 向 Forge Viewer 添加文本?
How can you add text to the Forge Viewer with three.js?
因此,我正在尝试使用 Three.js 将 TextGeometry 添加到查看器。我想知道是否可以这样做,以及您将如何去做。
我查看了文档,但是自 Forge 查看器使用 R71 以来,他们的 none 解决方案似乎有效,而他们现在使用 three.js 已经远远超过了这个水平。我也曾尝试从 Github 下载 R71 示例,但我收到一条错误消息,指出其中一种字体不存在,即使我将它们与脚本标签一起包含在 html.[=11= 中也是如此]
那么,您可以将 TextGeometry 添加到查看器吗?如果是这样,谁能给我一个如何做到这一点的例子。
我也考虑过在查看器上叠加 2D canvas,但是因为场景比查看器大 canvas,所以设置很奇怪,我在技术上不确定如何修复。
这样做的目的是能够通过 javascript 向查看器添加文本,这意味着用户将无法控制文本框,脚本会生成它。
从更高版本的 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
})
})
太棒了! ;)
因此,我正在尝试使用 Three.js 将 TextGeometry 添加到查看器。我想知道是否可以这样做,以及您将如何去做。
我查看了文档,但是自 Forge 查看器使用 R71 以来,他们的 none 解决方案似乎有效,而他们现在使用 three.js 已经远远超过了这个水平。我也曾尝试从 Github 下载 R71 示例,但我收到一条错误消息,指出其中一种字体不存在,即使我将它们与脚本标签一起包含在 html.[=11= 中也是如此]
那么,您可以将 TextGeometry 添加到查看器吗?如果是这样,谁能给我一个如何做到这一点的例子。
我也考虑过在查看器上叠加 2D canvas,但是因为场景比查看器大 canvas,所以设置很奇怪,我在技术上不确定如何修复。
这样做的目的是能够通过 javascript 向查看器添加文本,这意味着用户将无法控制文本框,脚本会生成它。
从更高版本的 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
})
})
太棒了! ;)