移動したり回転したりするオブジェクトがあり、カメラをその背後に一定の距離を保ちたいと考えています。明確にするために、私は飛行機を描いており、カメラが常に後方を見ていることを望んでいます。(ユーザーがマウスをドラッグしない限り、たとえば、飛行中の飛行機の上部を見ることができます)。
飛行機の位置と回転を設定したとします (THREE.Object3D のインスタンス):
airplane.position = {x: 1, y:2, z: 3};
airplane.rotation = {x: Math.PI/4, y:1.2, z: 0};
そして、回転と位置が (0,0,0) のとき、カメラは (5, 0, 0) (つまり、飛行機の中心から 5 単位後方) にあるとします。位置ベクトルを見つける最も簡単な方法は何でしょうか?カメラを設定しますか？
ありがとう
無秩序なコードで申し訳ありません。ハッキングして死にます。私はそれのためにjsfiddleを作成しますが、three.jsをホストするサーバーがありません...
$(function(){
var camera1, camera2, scene, renderer, viewPort;
var objectManager;
var views = [];
var vpWidth, vpHeight;
init();
animate();
updateSize();
function updateSize(){
vpWidth = viewPort.innerWidth();
vpHeight = viewPort.innerHeight();
}
function init() {
viewPort = $('#viewPort');
objectManager = new ObjectManager();
views[0] = new View(viewPort, objectManager);
var view = views[0];
view.fov = 20;
view.proportions.height = 0.5;
view.proportions.bottom = 0.5;
view.init();
views[1] = new View(viewPort, objectManager);
var view = views[1];
view.fov = 10;
view.proportions.height = 0.5;
view.init();
view.updateCamera = function(){
//-----------------------------------------------------
// when the user drags the mouse, (not yet implemented)
// the following camera position numbers would change
// so that he could view for example the top of the
// airplane as it flies
//-----------------------------------------------------
this.camera.position.set( 5,5,5 );
//-----------------------------------------------------
// This line does not work as expected: the airplane
// does not stay in the center of the view but follows
// some sort of curved path with respect to the camera
//-----------------------------------------------------
this.camera.lookAt(objectManager.airplane.position);
this.camera.updateProjectionMatrix();
};
scene = new THREE.Scene();
objectManager.addTo(scene);
objectManager.airplane.add(views[1].camera);
//-----------------------------------------------
// The following two lines *do* work correctly //
//-----------------------------------------------
views[1].camera.position.set( 0,0,5 );
views[1].camera.lookAt(objectManager.airplane.position);
var ambientLight = new THREE.AmbientLight(0x808080);
scene.add(ambientLight);
var pointLight = new THREE.PointLight(0x808080);
pointLight.position = {x: 100, y: 100, z: 100};
scene.add(pointLight);
renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex(0x000000, 1);
renderer.setSize( viewPort.innerWidth(), viewPort.innerHeight() );
viewPort.get(0).appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
objectManager.tick();
var view;
for (var i in views){
view = views[i];
view.updateCamera();
pixels = view.pixels;
renderer.setViewport(pixels.left, pixels.bottom, pixels.width, pixels.height);
renderer.setScissor(pixels.left, pixels.bottom, pixels.width, pixels.height);
renderer.enableScissorTest(true);
renderer.render( scene, view.camera );
}
}
});
function View(vp, om){
this.objectManager = om;
this.viewPort = vp;
this.fov = 30;
this.proportions = { left: 0, bottom: 0, height: 1, width: 1 };
this.pixels = { left: 0, bottom: 0, height: 0, width: 0, aspect: 0 };
this.aspect;
this.init = function(){
this.camera = new THREE.PerspectiveCamera(
this.fov,
this.viewPort.innerWidth() / this.viewPort.innerHeight(),
0.1, 10000
);
this.pixels.left = Math.floor(this.proportions.left * this.viewPort.innerWidth());
this.pixels.width = Math.floor(this.proportions.width * this.viewPort.innerWidth());
this.pixels.bottom = Math.floor(this.proportions.bottom * this.viewPort.innerHeight());
this.pixels.height = Math.floor(this.proportions.height * this.viewPort.innerHeight());
this.pixels.aspect = this.pixels.width / this.pixels.height;
this.camera.position.y = 0;
this.camera.position.z = 10;
this.camera.aspect = this.pixels.aspect;
this.camera.updateProjectionMatrix();
};
this.updateCamera = function(){};
}
function newCube(dims, pos, cols, colAss){
var mesh;
var geometry;
var materials = [];
geometry = new THREE.CubeGeometry( dims.x, dims.y, dims.z );
for (var i in cols){
materials[i] = new THREE.MeshLambertMaterial( { color: cols[i], ambient: cols[i], overdraw: true } );
}
geometry.materials = materials;
for (var i in colAss){
geometry.faces[i].materialIndex = colAss[i];
}
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
mesh.position = pos;
return mesh;
}
function ObjectManager(){
this.airplane;
var fuselage;
var tail;
var grid;
this.addTo = function(scene){
this.airplane = new THREE.Object3D();
fuselage = newCube(
{x: 1, y: 0.1, z: 0.1},
{x: 0, y: 0, z: 0},
[0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080],
[0, 1, 2, 3, 4, 5]
);
this.airplane.add(fuselage);
tail = newCube(
{x: 0.15, y: 0.2, z: 0.05},
{x: 0.5, y: 0.199, z: 0},
[0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080],
[0, 1, 2, 3, 4, 5]
);
this.airplane.add(tail);
scene.add( this.airplane );
grid = new THREE.Object3D();
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3( - 200, 0, 0 ) );
geometry.vertices.push(new THREE.Vector3( 200, 0, 0 ) );
linesMaterial = new THREE.LineBasicMaterial( { color: 0x00ff00, opacity: 1, linewidth: .1 } );
for ( var i = 0; i <= 200; i ++ ) {
var line = new THREE.Line( geometry, linesMaterial );
line.position.z = ( i * 2 ) - 200;
grid.add( line );
var line = new THREE.Line( geometry, linesMaterial );
line.position.x = ( i * 2 ) - 200;
line.rotation.y = 90 * Math.PI / 180;
grid.add( line );
}
scene.add( grid );
};
this.tick = function(){
this.airplane.rotation.x += 0.005;
this.airplane.rotation.y += 0.01;
this.airplane.position.x += 0.01;
};
};