Сообщество программистов Autodesk в СНГ :: Пользовательские модели в Forge Viewer.

Сообщество программистов Autodesk в СНГ
Forge: Viewer
Пользовательские модели в Forge Viewer.

29/04/2020

Пользовательские модели в Forge Viewer.

В нашей практике часто встречается вопрос внедрения произвольной пользовательской геометрии three.js в Forge Viewer. Мы обычно рекомендуем использовать scene overlays, а если Вы готовы к приключениям, то вы можете исследовать не нанесенные на карту территории viewer.impl.scene или viewer.impl.sceneAfter. Эти технологии работают — во Viewer прекрасно отображаются созданные Вами объекты с созданными Вами материалами. Но это, пожалуй и всё. В остальном, они не взаимодействуют с остальным функционалом Viewer-а. Вы не можете выбрать эти объекты, переместить камеру к ним, используя Viewer API и так далее. Но теперь команда Forge Viewer создала новое расширение Autodesk.Viewing.SceneBuilder, позволяющее преобразовать пользовательскую геометрию в «настоящие» модели viewer-а. Давайте посмотрим, как с ним работать!

Возможности нового расширения

Расширение Autodesk.Viewing.SceneBuilder позволяет на-лету создавать модели, аналогичные тем, которые Вы загружаете из сервиса Model Derivative. Это расширение не является заменой scene overlays, которые были упомянуты выше. Они по-прежнему больше подходят для некоторых сценариев, но объекты, создаваемые Autodesk.Viewing.SceneBuilder ведут себя аналогично стандартным моделям Forge – вы можете взаимодействовать с ними как программно, так и с помощью пользовательского интерфейса.

Тем не менее, расширение в настоящий момент не поддерживает:

создание 2D моделей
создание свойств
создание дерева модели

Создание новой модели

После загрузки расширения, вызовите асинхронный метод addNewModel для того, чтобы создать новую Model и инициализировать ModelBuilder для неё:

Код - JavaScript: [Выделить]
async function addModel(viewer) {

const sceneBuilder = await viewer.loadExtension('Autodesk.Viewing.SceneBuilder');

const modelBuilder = await sceneBuilder.addNewModel({

modelNameOverride: 'My Custom Model',

conserveMemory: false

});

// ...

}

Примечание: значение conserveMemory (false по умолчанию) изменяет способ хранения геометрии создаваемого объекта. Если указать true, геометрия будет упакована в единый mesh.

Когда ModelBuilder создан, вы можете начать добавлять в созданную модель геометрию three.js

Добавление объектов

Есть несколько способов добавления геометрии в модель.

Первый способ — передать THREE.BufferGeometry, THREE.Material, и THREE.Transform в метод addFragment ModelBuilder-а, например:

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

const sphereGeometry = new THREE.BufferGeometry().fromGeometry(new THREE.SphereGeometry(5, 8, 8));
const sphereMaterial = new THREE.MeshPhongMaterial({ color: new THREE.Color(0, 1, 0) });
const sphereTransform = new THREE.Matrix4().compose(
  new THREE.Vector3(0, 0, 0),
  new THREE.Quaternion(0, 0, 0, 1),
  new THREE.Vector3(1, 1, 1)
);
const sphereFragId = modelBuilder.addFragment(sphereGeometry, sphereMaterial, sphereTransform);
modelBuilder.changeFragmentsDbId(sphereFragId, 12345); // Используйте этот dbId в API Viewer-а как обычно

Второй способ — создать геометрию методом ModelBuilder.addGeometry и передать созданный ID геометрии, THREE.Material, и THREE.Transform в метод ModelBuilderaddFragment:

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

const cylinderGeometry = new THREE.BufferGeometry().fromGeometry(new THREE.CylinderGeometry(5, 5, 10));
const cylinderMaterial = new THREE.MeshPhongMaterial({ color: new THREE.Color(0, 0, 1) });
const cylinderTransform = new THREE.Matrix4().compose(
  new THREE.Vector3(+10, +10, 0),
  new THREE.Quaternion(0, 0, 0, 1),
  new THREE.Vector3(1, 1, 1)
);
const cylinderGeomId = modelBuilder.addGeometry(cylinderGeometry);
const cylinderFragId = modelBuilder.addFragment(cylinderGeomId, cylinderMaterial, cylinderTransform);
modelBuilder.changeFragmentsDbId(cylinderFragId, 12345); // Используйте этот dbId в API Viewer-а как обычно

Третий способ доступен, если модель была инициализирована со значением conserveMemory: false. В этом случае Вы можете передать THREE.Mesh в методModelBuilder.addMesh:

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

const boxGeometry = new THREE.BufferGeometry().fromGeometry(new THREE.BoxGeometry(10, 10, 10));
const boxMaterial = new THREE.MeshPhongMaterial({ color: new THREE.Color(1, 0, 0) });
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
boxMesh.matrix = new THREE.Matrix4().compose(
  new THREE.Vector3(-10, -10, 0),
  new THREE.Quaternion(0, 0, 0, 1),
  new THREE.Vector3(1, 1, 1)
);
boxMesh.dbId = 12345; // Используйте этот dbId в API Viewer-а как обычно
modelBuilder.addMesh(boxMesh);

Примечание: Вы также можете добавлять точки и линии. Убедитесь, что Вы передаёте экземпляр класса THREE.BufferGeometry со значениями isPoint или isLine установленными в true.

Добавление материалов

В настоящее время Autodesk.Viewing.SceneBuilder-ом поддерживаются следующие типы материалов:

MeshBasicMaterial
MeshPhongMaterial
LineBasicMaterial
внутренний тип, используемый моделями Forge, PrismMaterial

Вместо передачи материалов непосредственно в методы ModelBuilder, перечисленные выше, вы также можете зарегистрировать материал с уникальным именем и затем использовать это имя, например так:

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

const myMaterial = new THREE.MeshPhongMaterial({ color: new THREE.Color(1, 1, 1) });
modelBuilder.addMaterial('MyCustomMaterial', myMaterial);
modelBuilder.addFragment(myGeometry, 'MyCustomMaterial', myTransform);