1
カメラがVector3を使用して見える場所を変更しようとしていますが、カメラは引き続きシーンの原点を見ています。なぜこれが動作していないのか分かりません。私が見たすべての例はかなりまっすぐに見える。何か案は？以下はThree.jsカメラのルックが機能しない
<!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>
シーンが解決
// =======================================================
// 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;
};