Использование A-frame с three.js повлияет на three.js? - PullRequest
Новая
       7

Использование A-frame с three.js повлияет на three.js?

0 голосов
/ 05 июля 2018

Я обнаружил, что мой проект, который использует A-frame и three.js, вызовет следующую ошибку:

Uncaught TypeError: THREE.CSS3DObject не является конструктором

Я использую этот образец для проверки:

https://threejs.org/examples/#css3d_periodictable

Это исходный код:

https://github.com/mrdoob/three.js/blob/master/examples/css3d_periodictable.html

Когда я добавляю скрипт A-frame в этот образец, он вызывает ту же ошибку. 

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js"></script>

Влияет ли A-frame на Three.js? Могут ли они использоваться вместе? Как заставить этот пример работать (перестать отображать ошибку)?

Спасибо!

1 Ответ

0 голосов
/ 05 июля 2018

Это связано с тем, что aframe связывает three.js, поэтому глобальная переменная window.THREE переопределена в aframe.js. Исходный файл three.js, в который были загружены TrackballControls и CSSRenderer, после загрузки aframe.js более недоступен.

Вы можете видеть, что если вы делаете что-то вроде этого: 

<script src="https://threejs.org/build/three.js">
</script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
<script>
  window._THREE = THREE;
  delete window.THREE;
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js"></script>

<script>
  console.log(_THREE.REVISION, THREE.REVISION);
</script>

Таким образом, изменение порядка (и не загружая three.js снова) должно вам помочь: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js"></script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>

Однако вы должны знать, что aframe использует другую версию three.js, которая может вызвать конфликты с последней версией со страницы примеров.

Еще одна связанная с этим вещь, которую стоит отметить, заключается в том, что aframe не может работать с css3d-renderer, поскольку DOM-элементы не могут быть показаны в WebVR.

...