I've been trying to modify the camera's focus point using a Vector3, but for some reason, the camera keeps looking at the scene's origin. I'm a bit perplexed as to why this is happening, especially since all the examples I've come across seemed pretty straightforward. Any thoughts or suggestions?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="/three.js"></script>
<script type="text/javascript" src="/MTLLoader.js"></script>
<script type="text/javascript" src="/OBJLoader.js"></script>
<script type="text/javascript" src="/stats.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="/World.js"></script>
<script type="text/javascript" src="/Controls.js"></script>
<script type="text/javascript">
// Initialize our new world object which will
// setup our scene, camera, lights, and renderer.
var world = new World(true);
var controls = new Controls();
// Load the map for this given level.
// A reference to every model loaded is saved in world.model[*name_of_file*]
world.modelLoader('meter_grid');
world.modelLoader('skybox1');
world.modelLoader('test_character');
// Render loop. Important things happens in here.
(function render() {
if(world.stats){
world.stats.update();
}
//console.log(JSON.stringify(world.camera.position));
world.updateRotation(controls.left, controls.right);
requestAnimationFrame(render);
world.renderer.render(world.scene, world.camera);
}());
</script>
<script src="/domevents.js"></script>
</body>
</html>
Check out the "class" below to see how the scene is being constructed
// =======================================================
// The World.
// =======================================================
var World = function(showStats){
this.currentTime = (+new Date()) / 1000.0;
this.stats = showStats ? this.initStats() : false;
// Create scene object and add fog to scene: Fog( hex, near, far )
this.scene = new THREE.Scene();
// Create camera object: PerspectiveCamera( fov, aspect, near, far )
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
this.camera.position.x = 0;
this.camera.position.y = 5;
this.camera.position.z = 5;
this.look = new THREE.Vector3(5, 0, -5);
this.camera.lookAt(this.look);
this.scene.add(this.camera);
// Create ambient light
this.light = new THREE.AmbientLight( 0x444444 );
this.light.intensity = 5;
this.scene.add( this.light );
// Create renderer and bind to dom element
this.renderer = new THREE.WebGLRenderer();
this.renderer.setClearColor(0xffffff);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this.renderer.domElement);
this.rotationSpeed = .02;
};
World.prototype.modelLoader = function(filename){
var scope = this;
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl( '/obj_assets/' );
mtlLoader.setPath( '/obj_assets/' );
mtlLoader.load( filename + '.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( '/obj_assets/' );
objLoader.load( filename + '.obj', function ( object ) {
object.name = filename;
scope.scene.add( object );
if(filename === 'test_character'){
scope.moveCharacter(filename, 0, 0);
}
});
});
};
World.prototype.render = function(){
if(this.stats){
this.stats.update();
}
this.controls.update();
requestAnimationFrame(this.render);
this.renderer.render(this.scene, this.camera);
};
World.prototype.initStats = function(){
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
return stats;
};
World.prototype.updateRotation = function(key_left, key_right){
var x = this.camera.position.x,
y = this.camera.position.y,
z = this.camera.position.z;
if (key_right){
this.camera.position.x = x * Math.cos(this.rotationSpeed) + z * Math.sin(this.rotationSpeed);
this.camera.position.z = z * Math.cos(this.rotationSpeed) - x * Math.sin(this.rotationSpeed);
} else if (key_left){
this.camera.position.x = x * Math.cos(this.rotationSpeed) - z * Math.sin(this.rotationSpeed);
this.camera.position.z = z * Math.cos(this.rotationSpeed) + x * Math.sin(this.rotationSpeed);
}
this.camera.lookAt(this.scene.position);
};
// Move the character from a 2D xy grid perspective
World.prototype.moveCharacter = function(name, x, y){
this.scene.getObjectByName(name).position.x = x;
this.scene.getObjectByName(name).position.z = -y;
};