I am brand new to working with three.js and JavaScript, so I'm not sure if my issue lies within three.js or JavaScript itself. I've been trying to inherit from the THREE.Mesh class in order to display a mesh on the screen, but I can't seem to get it right. It seems that I am unable to call the constructor `new THREE.Mesh( geometry, material );` inside the constructor of my class. Could someone please provide some guidance?
I came across this post: Extending Three.js classes
and managed to make it work following the proposed method, but I would prefer using a proper class instead of the unconventional approach suggested there.
class Icon extends THREE.Mesh{
constructor(iconName, worldPosition, cameraPosition){
super();
this.iconName = iconName;
this.worldPosition = worldPosition;
this.cameraPosition = cameraPosition;
var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var mesh = new THREE.Mesh( geometry, material );
console.log(this.mesh); // Error: undefined
}
};
...
scene.add(obj.mesh);
// Error: THREE.Object3D.add: object not an instance of THREE.Object3D.