I'm still new in Threejs ... I want to put some of my threejs code in another JS file and then use it in my main.js file This is a simple similar code:
main.js
import * as THREE from 'three'
import Box from './classes/Parts.js'
const box = new Box()
scene.add(box)Parts.js
class Box {
constructor() {
this.geom = new THREE.BoxGeometry(2, 2, 2);
this.mat = new THREE.MeshBasicMaterial({
color: 0xff0000
});
this.mesh = new THREE.Mesh(this.geom, this.mat);
}
}
export default Box;But I get this error: THREE.Object3D.add: object not an instance of THREE.Object3D.
What did I do wrong?
You can only add custom objects to the scene graph which are derived from THREE.Object3D. That is not the case for your Box class. Rewrite your code like so:
class Box extends THREE.Mesh {
constructor() {
const geom = new THREE.BoxGeometry(2, 2, 2);
const mat = new THREE.MeshBasicMaterial({
color: 0xff0000
});
super(geom,mat);
}
}
export default Box;