Trying to grasp OOP in JS has been quite challenging for me lately... Here is my attempt so far:
var worldClass = function(shape){
this.shape = shape;
switch (shape){
case "sphere":
var tmpX = new THREE.Vector3(0, 0, 0);
var sphereModel = new THREE.Sphere( tmpX, 6);
var sphereGeom = new THREE.SphereGeometry( 6, 32, 16 );
var boundMaterial = new THREE.MeshBasicMaterial( { color: 0x0000ff, transparent: true, opacity: 0.3 } );
var boundSphere = new THREE.Mesh( sphereGeom, boundMaterial );
boundSphere.position.set(tmpX);
break;
default:
var tmpX = new THREE.Vector3(0, 0, 0);
var sphereModel = new THREE.Sphere( tmpX, 6);
var sphereGeom = new THREE.SphereGeometry( 6, 32, 16 );
var boundMaterial = new THREE.MeshBasicMaterial( { color: 0x0000ff, transparent: true, opacity: 0.3 } );
var boundSphere = new THREE.Mesh( sphereGeom, boundMaterial );
boundSphere.position.set(tmpX);
break;
}
this.home = boundSphere;
this.draw = function(){
scene.add(this.home);
}
this.setPosition = function(newPos){
this.home.position.set(newPos);
}
}
var world1 = new worldClass(new THREE.Vector3(0, 0, 0));
console.log(world1.home.position);
world1.setPosition(new THREE.Vector3(1, 1, 1));
console.log(world1.home.position);
The initial output I receive is : undefined, and when attempting to change the position, I encounter undefined fields instead of
x: undefined, y:undefined, z:undefinedI realize I could use a property to resolve this issue, but I am determined to understand what's wrong with my class.
I've managed to work around this by adding a "constructor" function to the class, which encapsulated the seemingly problematic line:
this.position = new THREE.Vector3();