透過 three.js 在 Forge Viewer 里頭創建 3D 文字（使用部份 r81 的功能

xuhong 發布于2019-08-26 11:34 / 2023人閱讀

摘要：但很不幸的，新功能要加入里頭這件事對于開發團隊而言絕非一件易事，是需要一些時間來完成的這篇文章將帶領大家用最少的工作量將上的新功能拿來上使用。在這個案例里頭，我們可以只將和其他相依文檔引入例如。

對于 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教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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