Сообщество программистов Autodesk в СНГ :: Способ добавления новых функций Three.js в Forge Viewer

Сообщество программистов Autodesk в СНГ
Forge: Viewer
Способ добавления новых функций Three.js в Forge Viewer

30/01/2018

Способ добавления новых функций Three.js в Forge Viewer

В Forge Viewer используется настраиваемая версия Three.js , релиз r71. Текущая версия этой библиотеки на момент написания этой статьи - r89, поэтому есть множество функций, которые были добавлены сообществом между этими релизами. К сожалению, команде разработчиков Viewer не легко быстро интегрировать эти усовершенствования в нашу базу кода. Потому рассмотрим ваши возможные действия, если вам крайне необходима одна из последних возможностей Three.js в вашем следующем приложении Forge.

Этот пост был вдохновлен ответом, который я предоставил на следующий вопрос Stackoverflow: Как добавить текст в Forge Viewer с помощью функции three.js? Разработчик был готов добавить 3D-текст в сцену Forge Viewer, а Three.js обеспечивает удобный помощник для этого: TextGeometry но этот функционал был добавлен после r71. Таким образом, вы могли бы, очевидно, выкопать весь код для этого объекта в источнике Three.js вместе со всеми необходимыми зависимостями, которые могут или не могут быть частью r71, создать из него свою собственную функцию и использовать ее в вашем приложении. Либо вы также можете импортировать последний скрипт Three.js целиком. Но вы получите в два раза больше кода, чем вам нужно, поскольку уже требуется использование версии Viewer Three.js. Вам также необходимо быть осторожным в отношении столкновения пространства имен. Возможно, существует более легкий подход?

Ну, мы разработчики, поэтому по определению ленивые. Вот как это сделать с минимальными усилиями и максимальной выгодой для размера вашего приложения: используя современные средства разработки, такие как связки - bundlers - (Webpack является наиболее популярным), вы можете использовать модули ES6 и импортировать в свое приложение только строго необходимые зависимости. threejs-full-ES6 пакет позволяет импортировать функции Three.js в ваше приложение независимо, поэтому в этом случае мы можем импортировать TextGeometry и Font. Все остальные необходимые зависимости будут учтены в реализации пакета.

Итак, как доказательство концепции, вот простое расширение ES6, которое я создал, которое оборачивает создание TextGeometry:

Код - JavaScript: [Выделить]

import { Font, TextGeometry } from 'threejs-full-es6'
import FontJson from './helvetiker_bold.typeface.json'
 
export default class TextExtension
  extends Autodesk.Viewing.Extension {
 
  /////////////////////////////////////////////////////////
  // Добавляет цветной материал в программу просмотра
  //
  /////////////////////////////////////////////////////////
  constructor (viewer, options) {
 
    super()
 
    this.viewer = viewer
  }
 
  load () {
 
    return true
  }
 
  unload () {
 
    return true
  }
 
  /////////////////////////////////////////////////////////
  // Добавляет цветной материал в программу просмотра
  //
  /////////////////////////////////////////////////////////
  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
  }
 
  /////////////////////////////////////////////////////////
  // Оборачивает объект TextGeometry и добавляет новую сетку в
  // сцену
  /////////////////////////////////////////////////////////
  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)

Чтобы использовать его, просто загрузите расширение и вызовите метод createText:

Код - JavaScript: [Выделить]

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
    })
})