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

Question

I've got an error "object that was not an instance of THREE.Object3D" when I use draco lib to display glf model (compressed in blender) in aframe in AFRAME.registerComponent

The reason why I am overriding gltf-model is because I am developing my project in sveltekit avoiding server side rendering, thanks in advance

<a-scene>
        <a-entity id="el_model" comp-gltf-model="url(https://t9omiq.csb.app/tree_compressed.glb)" scale="0.028 0.028 0.028" position="-2 -1 -5"></a-entity>
</a-scene>

JS FILE

AFRAME.registerComponent("comp-gltf-model", {
  schema: { type: 'model' },
  init: function() { 

     const  loader = new GLTFLoader().setCrossOrigin('anonymous')
              .setDRACOLoader(new DRACOLoader().setDecoderPath('https://www.gstatic.com/draco/v1/decoders/'))
             //  .setKTX2Loader(new KTX2Loader().detectSupport(renderer));
     
     let src = this.data;
     let self = this;
     let el = this.el;
     
   // Loading glf 
   loader.load(src, function gltfLoaded (gltfModel) {
     self.model = gltfModel.scene || gltfModel.scenes[0];

     console.log("self.model", self.model)
     
     var modelObj = self.model.modelObj;
     el.setObject3D('mesh', modelObj);
   // el.emit('model-loaded', {format: 'gltf', model: self.model});
   }, undefined /* onProgress */, function gltfFailed (error) {
     var message = (error && error.message) ? error.message : 'Failed to load glTF model';
     // warn(message);
     // el.emit('model-error', {format: 'gltf', src: src});
   });
   
  },
  update: function() { 
    
  }
})

console.log("self.model", self.model)

Object { uuid: "D93E28D5-311A-4D92-978C-2132D9ECDB86", name: "tree", type: "Group", parent: null, children: (2) […], up: {…}, position: {…}, rotation: {…}, quaternion: {…}, scale: {…}, … }


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

Answer 1

Problem solved. First I added the model to new THREE.Object3D() However, I've got another error "Uncaught TypeError: material.onBeforeRender is not a function " which was due different three.js versions . . . now all good