ADN Open CIS
Сообщество программистов Autodesk в СНГ

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: [Выделить]
  1. import { Font, TextGeometry } from 'threejs-full-es6'
  2. import FontJson from './helvetiker_bold.typeface.json'
  3.  
  4. export default class TextExtension
  5.   extends Autodesk.Viewing.Extension {
  6.  
  7.   /////////////////////////////////////////////////////////
  8.   // Добавляет цветной материал в программу просмотра
  9.   //
  10.   /////////////////////////////////////////////////////////
  11.   constructor (viewer, options) {
  12.  
  13.     super()
  14.  
  15.     this.viewer = viewer
  16.   }
  17.  
  18.   load () {
  19.  
  20.     return true
  21.   }
  22.  
  23.   unload () {
  24.  
  25.     return true
  26.   }
  27.  
  28.   /////////////////////////////////////////////////////////
  29.   // Добавляет цветной материал в программу просмотра
  30.   //
  31.   /////////////////////////////////////////////////////////
  32.   createColorMaterial (color) {
  33.  
  34.     const material = new THREE.MeshPhongMaterial({
  35.       specular: new THREE.Color(color),
  36.       side: THREE.DoubleSide,
  37.       reflectivity: 0.0,
  38.       color
  39.     })
  40.  
  41.     const materials = this.viewer.impl.getMaterials()
  42.  
  43.     materials.addMaterial(
  44.       color.toString(),
  45.       material,
  46.       true)
  47.  
  48.     return material
  49.   }
  50.  
  51.   /////////////////////////////////////////////////////////
  52.   // Оборачивает объект TextGeometry и добавляет новую сетку в
  53.   // сцену
  54.   /////////////////////////////////////////////////////////
  55.   createText (params) {
  56.  
  57.     const geometry = new TextGeometry(params.text,
  58.       Object.assign({}, {
  59.         font: new Font(FontJson),
  60.         params
  61.       }))
  62.  
  63.     const material = this.createColorMaterial(
  64.       params.color)
  65.  
  66.     const text = new THREE.Mesh(
  67.       geometry , material)
  68.  
  69.     text.position.set(
  70.       params.position.x,
  71.       params.position.y,
  72.       params.position.z)
  73.  
  74.     this.viewer.impl.scene.add(text)
  75.  
  76.     this.viewer.impl.sceneUpdated(true)
  77.   }
  78. }
  79.  
  80. Autodesk.Viewing.theExtensionManager.registerExtension(
  81.   'Viewing.Extension.Text', TextExtension)

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

Код - JavaScript: [Выделить]
  1. import './Viewing.Extension.Test'
  2.  
  3. // ...
  4.  
  5. viewer.loadExtension('Viewing.Extension.Test').then((extension) => {
  6.  
  7.     extension.createText({
  8.       position: {x: -150, y: 50, z: 0},
  9.       bevelEnabled: true,
  10.       curveSegments: 24,
  11.       bevelThickness: 1,
  12.       color: 0xFFA500,
  13.       text: 'Forge!',
  14.       bevelSize: 1,
  15.       height: 1,
  16.       size: 1
  17.     })
  18. })

Источник: https://forge.autodesk.com/blog/how-add-newest-threejs-features-forge-viewer

Автор перевода: Дмитрий Емельянов

Обсуждение: http://adn-cis.org/forum/index.php?topic=

Опубликовано 30.01.2018