Создание координатных единиц просмотра и их отображение в сцене Three JS - PullRequest
Новая
       8

Создание координатных единиц просмотра и их отображение в сцене Three JS

0 голосов
/ 13 февраля 2020

Я пытаюсь показать HTML контент в 3D наряду с режимом Forge, используя Three JS CSS3dRenderer (https://threejs.org/docs/#examples / en / renderers / CSS3DRenderer ).

Пример функциональности: http://learningthreejs.com/data/2013-04-30-closing-the-gap-between-html-and-webgl/index.html

В чисто нормальном контексте Three JS необходимо выполнить следующие шаги:

  1. Создать Three JS сцена № 1 для содержимого DOM.
  2. Создание еще одной сцены № 2 для содержимого 3D.
  3. Добавление объектов CSS3DObjects с содержимым HTML в сцену № 1
  4. Добавьте соответствующий 3D элемент в сцену # 2 с включенным смешиванием. Это позволяет контенту HTML закрывать объекты в сцене № 2.
  5. Добавлять другие 3D-объекты в сцену № 2.
  6. Визуализировать # 1 с помощью CSS3DRenderer и # 2 с обычным WebGLRenderer .

В контекстной программе просмотра Forge # 2 заменяется наложенной сценой.

Я применил описанные здесь приемы https://forge.autodesk.com/blog/transparent-background-viewer-long-last, чтобы сделать CSS сцена, видимая через сцену зрителя, и это работает нормально, за исключением странного эффекта, когда при включении альфа-рендерера элементы в сцене наложения воспроизводятся только при окклюзии модели Forge.

Проблема I ' m имеет точку 4. В случае двух обычных сцен Three JS положение, вращение и масштаб объекта CSS3DObject в сцене # 1 могут быть просто скопированы в объект в сцене # 2, и они идеально совпадают. Между сценой Three JS и оверлейной сценой зрителя это не так, поскольку единицы не совпадают. (Или я так рассуждал.)

Есть ли какой-нибудь способ, которым я могу преобразовать эти единицы?

1 Ответ

0 голосов
/ 19 февраля 2020

В соответствии с нашим техническим заданием - Клив снимает шляпу, чтобы собрать демонстрацию:

Камера, которую вы используете NOP_VIEWER.impl.camera, не является ТРИ камерой. Это UnifiedCamera, определенная LMV для хранения как перспективной, так и ортографической камеры c. Вам нужно получить подходящую камеру от UnifiedCamera и использовать ее для рендеринга. Просто понял, что CSS3DRenderer был взят из более свежей версии THREE. js, и он предполагает то, что не верно в отношении THREE. js r71, которое использует LMV. Я заметил, что он использует camera.isPerspectiveCamera, чтобы решить, когда камера является перспективной. Это не определено в r71, который использует экземпляр THREE.PerspectiveCamera. 

 camera = new THREE.PerspectiveCamera(
        45, window.innerWidth / window.innerHeight, 0.1, 4000
    );

CSS3DRenderer отображает в плоскую плоскость который составлен с трехмерной сценой LMV. Я нашел пример, который фальсифицировал помещение сцены CSS3D в сцену WebGL, закрыв прозрачные дыры в сцене WebGL, где объекты CSS3D находились перед сценой WebGL. Вот пример: https://codepen.io/Fyrestar/pen/QOXJaJ

...