1
Ich versuche, den Ort zu ändern, an dem die Kamera mit einem Vector3 aussieht, aber die Kamera schaut weiterhin auf den Ursprung der Szene. Ich bin mir nicht sicher, warum das nicht funktioniert. Alle Beispiele, die ich gesehen habe, scheinen ziemlich geradlinig zu sein. Irgendwelche Ideen?Three.js Kamera funktioniert nicht
<!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>
Unten ist die Welt „Klasse“, wo die Szene gebaut wird
// =======================================================
// The World.
// =======================================================
var World = function(showStats){
this.currentTime = (+new Date())/1000.0;
this.stats = showStats ? this.initStats() : false;
// Create scene object, 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;
};