如何使用 three.js 向 Forge Viewer 添加文本？

Posted 2023-03-16

【中文标题】如何使用 three.js 向 Forge Viewer 添加文本？

【英文标题】：How can you add text to the Forge Viewer with three.js?

【发布时间】：2018-06-29 06:16:38

【问题描述】：

所以，我正在尝试使用 Three.js 将 TextGeometry 添加到查看器。我想知道是否有可能做到这一点，以及你将如何去做。

我查看了文档，但自从 Forge 查看器使用 R71 以来，他们的解决方案似乎都没有工作，而现在使用 three.js，他们的解决方案已经远远超过了。我也尝试从 Github 下载 R71 示例，但我收到一个错误消息，说其中一种字体不存在，即使我在 html 中将它们与脚本标签一起包含在内。

那么，您可以将 TextGeometry 添加到查看器吗？如果是这样，谁能给我一个如何做到这一点的例子。

我也考虑过在查看器上放置一个 2D 画布，但由于场景比查看器画布大，它会造成奇怪的设置，我在技术上不确定如何修复。

这样做的目的是能够通过 javascript 向查看器添加文本，这意味着用户将无法控制文本框，脚本将生成它。

【参考方案1】：

即使 Viewer 版本落后，从 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
    )
)

甜！ ;)

【讨论】：

这太棒了！我考虑过引入一个更新的版本，但我不确定它是否会起作用。你用什么来转译这段代码？只是好奇，我正在考虑使用 webpack，因为 chrome 似乎不喜欢 ES6 导入。

Webpack + babel-loader，据我所知最灵活/最强大的配置。如果你喜欢 React，我创建了一个 Forge React 锅炉：github.com/Autodesk-Forge/forge-react-boiler.nodejs。这包含了快速开始使用 ES6、Webpack、Babel 和 Forge Viewer 所需的所有设置（你也可以在没有 React 的情况下使用它）

这很好用！我唯一的问题是，当我更改对象中的 size 属性时，它根本不会更改大小。你试过这个吗？

是的，我不确定 TextGeometry 有什么问题，我没有测试普通 r89 three.js 应用程序中的行为是否不同。应该起作用的一件事是设置添加到场景中的网格对象的比例。

更改网格仍然对我不起作用。你会建议回到 R88 的版本吗？