aframe error: Entity.setObject3D was called with an object that was not an instance of THREE.Object3D Code Answer

hello i’ve tried to add a mesh to my aframe component, but i receive a strange error also with a very simple code like this

AFRAME.registerComponent('mysquare', {
      init: function(){
        var el = this.el; 

        var box = new THREE.BoxGeometry(40, 5, 40);
        var boxMesh = new THREE.Mesh(box);
        boxMesh.position.set(25, 0, 25);
        el.setObject3D("mesh", boxMesh);

      }
    });

home.html

<ion-content>
      <div></div>
      <a-scene embedded>
         <a-entity mysquare></a-entity>
       </a-scene> 
</ion-content>

error message

Error: Entity.setObject3D was called with an object that was not an instance of THREE.Object3D.

i tried also the add function but i receive the same message. how is possible?

i develop my app with ionic 2 + aframe v.0.7.1. i’ve tried also with the 0.5.0 version but i have the same problem

Answer

finally i’ve solved the problem without include directly the threejs library.

my import section was this

import * as THREE from 'three';
declare var AFRAME;

i’ve deleted the first import and now all it’s okay. now i can create a 3d object in this mode

el.setObject3D("mesh", new AFRAME.THREE.Object3D());