在three.js中使用A帧会影响three.js？

Question

我发现使用A框架和three.js的项目将触发以下错误：

Uncaught : THREE.CSS3DObject不是构造函数

我使用这个示例来测试：

periodictable

这是源代码：

periodictable.html

当我将A帧脚本添加到这个示例中时，它会触发相同的错误。

<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帧会影响three.js吗？它们能一起使用吗？如何使此示例工作(停止显示错误)？

谢谢!

Answer 1

这是因为aframe捆绑了three.js，因此在aframe.js中重新定义了全局变量window.THREE。加载到的原始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渲染器，因为DOM元素不能在WebVR中显示。