Describing the issue in a single line proved to be difficult, so here's the situation at hand.
I'm embarking on a large Javascript project utilizing Three.js and aiming to grasp its OOP concepts.
1) I've created a 3D world Object
2) A base 3D_object class with child classes
3) In the snippet below, you'll notice option 1 and option 2 which should yield the same outcome, but for some reason they don't.
Any thoughts on why? The complete source code can be found in the snippet below.
(Make sure Three.js is included before the script and there is a 'resources/object.json' file present.)
Here is a GitHub link to the project; perhaps someone might find it helpful this way. (You may need to run it on a local Python server to bypass the cross-origin file loading issue in Chrome)
//create world
var myWorld = new World(500,500);
myWorld.AddWorldToPage();
//load simple model in the world
var cube = new Cube();
myWorld.addToScene(cube);
// load json model in the world
//option 1
// myWorld.addToSceneTemp();
//option 2 OO (not working)
var jsonObject = new Object_3D_JSON();
function afterModelLoaded(){
console.log("after loading is done");
myWorld.addToScene(jsonObject);
}
jsonObject.loadModel(afterModelLoaded);
myWorld.render();
// Inherits convenience method
//=====================================================================================================
function inheritsFrom(child, parent) {
child.prototype = new parent();
child.prototype.constructor = child;
}
// 3D Objects
//=====================================================================================================
// 3D object class
//=====================================================================================================
function Object_3DClass() {
this._geometry = new THREE.BoxGeometry(1, 1, 1);
this._material = new THREE.MeshBasicMaterial({
color: 0xff00ff
});
this._mesh = new THREE.Mesh(this._geometry, this._material);
}
//Get 3D mesh
Object_3DClass.prototype.getMesh = function() {
return this._mesh;
}
//Animate Object
Object_3DClass.prototype.animateFrame = function() {
this._mesh.rotation.x += 0.01;
this._mesh.rotation.y += 0.01;
}
Object_3DClass.prototype.setPosition = function(x, y, z) {
this._mesh.position.set(x, y, z);
}
// END 3D object class
//===================================================================================================
...
</html>