THREE.js custom Object class with imported mesh

Question

i'm new to THREE.js. I'm trying to create a custom class that extends THREE.Mesh to add to my scene. My idea is that the custom class must contains an imported mesh via json loader, but all my attempts to make it have failed.

Here is my code:

THREE.ImportedMesh = function(){
    this.type = 'ImportedMesh';

    this.load = function(url){
        var loader = new THREE.JSONLoader();
        loader.load(url, function(geometry,materials){

            THREE.Mesh.call(self,geometry,new THREE.MeshFaceMaterial(materials));
        });
    };
};
THREE.ImportedMesh.prototype = Object.create( THREE.Mesh.prototype );
THREE.ImportedMesh.prototype.constructor = THREE.ImportedMesh;

and here errors printed in console

Uncaught TypeError: Cannot read property 'remove' of undefined

Uncaught TypeError: this.updateMorphTargets is not a function

Can anyone tell me how I can do that?

Thanks,

Rick

pailhead pailhead · Accepted Answer · 2017-11-06T19:16:55

Try something like this:

THREE.ImportedMesh = function(){
  this.type = 'ImportedMesh';

  THREE.Mesh.call(this);
  var self = this
  this.load = function(url){
    var loader = new THREE.JSONLoader();
    loader.load(url, function(geometry,materials){
       self.material = new THREE.MeshFaceMaterial(materials)
       self.geometry = geometry
    });
  };
};
THREE.ImportedMesh.prototype = Object.create( THREE.Mesh.prototype );
THREE.ImportedMesh.prototype.constructor = THREE.ImportedMesh;

THREE.js custom Object class with imported mesh

1 Answers