Using A-frame with three.js will affect three.js?

Question

I found that my project which uses A-frame and three.js will trigger the following error:

Uncaught TypeError: THREE.CSS3DObject is not a constructor

I use this sample to test:

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

It's source code:

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

When I add the A-frame script to this sample, it triggers the same error.

<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>

Does A-frame affect three.js? Can they be used together? How to make this sample work (stop displaying the error)?

Thanks!

Hi KevinHu, not really an answer but have you tried updating your version of a-frame? you could try the latest 0.8.2 that may help. — Nick
– Nick, Commented Jul 5, 2018 at 7:48

Martin Schuhfuß · Accepted Answer · 2018-07-05 08:55:23Z

This is because aframe bundles three.js so the global variable window.THREE is redefined in aframe.js. The original three.js, the one TrackballControls and CSSRenderer were loaded into, is no longer accessible after loading aframe.js.

You can see that if you do something like this:

<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>

So changing the order (and not loading three.js again) should help you here:

<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>

However, you should be aware that aframe is using a different three.js-version which might cause conflicts with the latest version from the examples-page.

Another related thing to note is that aframe can not work with the css3d-renderer, because DOM-elements can not be shown in WebVR.

Collectives™ on Stack Overflow

Using A-frame with three.js will affect three.js?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related