透过 three.js 在 Forge Viewer 里头创建 3D 文字（使用部份 r81 的功能

xuhong 发布于2019-08-26 11:34 / 2231人阅读

摘要：但很不幸的，新功能要加入里头这件事对于开发团队而言绝非一件易事，是需要一些时间来完成的这篇文章将带领大家用最少的工作量将上的新功能拿来上使用。在这个案例里头，我们可以只将和其他相依文档引入例如。

对于 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...

云服务器 GPU云服务器 Viewer3D three.js three.js极客 three.js教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107145.html

自订义 Forge Viewer ModelStructurePanel 的交互行为

摘要：在官方释出版的同时发布了新版本的，这个面版已被整个重新改写，这次更新也加入一些新的交互行为，下面我们将会稍作解释。这礼拜的小技巧是关于如何以不加入太多的 JavaScript 的方式自订义 ModelStructurePanel 的交互行为，这个小技巧受到这篇问与答的启发：Prevent zoom in Forge viewer when clicking in Model Brow...

xialong 2019-08-22 13:55 评论0 收藏0
在 Forge Viewer 里切换模型视图（Viewables）

摘要：有提供类似的功能，但这并不包含在里头。条列清单或是切换视图是非常容易的，你主要是要建立一个使用者介面让使用者去选取他们想观看的内容。我使用了来确保当前载入模型占用的内存可以都被释出。此篇文章原作是 Autodesk ADN Philippe Leefsma，以下以我简称。这有一个简易的博客用来说明一个我刚加入 https://forge-rcdb.autodesk.io 的一个新功...

BlackHole1 2019-08-21 17:42 评论0 收藏0
在 Forge Viewer 里展示/隐藏构件材质

摘要：对于大多数的模型文档都可以透过服务提取转换在里渲染构件外观时所需的材质及贴图。所以我们可以透过它遍历所有材质，找出我们想隐藏贴图的那些材质，将它的颜色设置为灰色，同时也可以透过它将隐藏贴图的材质回复。这篇文章来自 Autodesk ADN 的梁晓冬，以下以我简称。对于大多数的模型文档都可以透过 Autodesk Forge Model Derivative 服务提取、转换在 Vie...

Dean 2019-08-21 16:55 评论0 收藏0
使用 Forge Viewer 在序列中聚合多模型

摘要：但模型载入程序并不是同步执行的载入文档和几何等动作在里都是异步的，我们没办法知道哪一个模型是第一个被完整载入，和下个一个完全载入的是谁而在一些应用场景里是有可能需要在一个序列聚合多个模型。 showImg(https://segmentfault.com/img/bVVaPI?w=600&h=390); 此篇博客原著为 Autodesk ADN 的梁晓冬，以下以我简称。我的同事创作了...

graf 2019-08-22 11:08 评论0 收藏0
在 Revit 里重现 Forge Viewer相机的状态

摘要：最近，我收到一个客户的需求，希望可以把的相机状态通过还原到里。因为没有直接的方法可以修改相机的值。的相机视角比的相机视角宽。调用以取得焦距。因此，裁剪区域的范围计算为宽度视图的相机焦距。高度常规相机片幅的比例。最近，我收到一个客户的需求，希望可以把Viewer的相机状态通过Revit API还原到Revit里。所以我们来看看要如何实现这个要求。在开始之前，你要先知道一些有关于Revi...

刘福 2019-08-23 18:37 评论0 收藏0