Question

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

未捕获的TypeError：THREE.CSS3DObject不是构造函数

我使用此示例进行测试：

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

它的源代码：

https://github.com/mrdoob/three.js/blob/master/examples/css3d_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。加载aframe.js之后，将不再可以访问原始的three.js（一个TrackballControls和CSSRenderer加载到其中）。

您可以看到是否执行以下操作：

<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中显示。

对Three.js使用A框架会影响Three.js吗？

1 个答案: