カメラの位置を更新してオブジェクトの回転をシミュレートします

Question

私は、そのシーンの中央を常に見るためのカメラ設定の3Dシーンを持っています。

どのように私はカメラの回転やカメラのX、Y、Zを更新することにより、その中心の周りにズームインする座標変更できますか？背後

回転は、少なくとも私はWebGLの/ THREEを使用していますが、私は、これは任意の言語/エンジンに適用可能であるべきであると考えているロール/ヨー/ズーム

をカバーしなければならない

Answer 1

数学は少し複雑です。

あなたが同様に最大と最小の角度とセットアップオートローテーションを定義することができhttp://threejs.org/examples/misc_controls_orbit.html

を使用するのがベスト。

Answer 2

私が正しくあなたを理解していれば、あなただけのカメラの位置を「回転させる」とのシーンの起源を見て、それを設定する必要があります。ここでは

camera.position.x = R * Math.cos(bearing) * Math.cos(pitch); 
camera.position.y = R * Math.sin(bearing) * Math.cos(pitch); 
camera.position.z = R * Math.sin(pitch); 
camera.lookAt(new THREE.Vector3(0, 0, 0)); 

Rは、カメラからの原点までの距離でありますbearingは水平面内での回転で、pitch - 垂直面内での回転です。

Answer 3

私は最も簡単な方法は、マトリックス階層を使用することだと主張したいと思います。

ノードを起点にします。カメラを望む場所に子ノードを作成します。ノードを原点で回転させます。それがどこにあるのかを子供に尋ね、そこにカメラを置きます。これはかなり常に円を計算するよりも簡単であるカメラ

に配向させるためにlookAtを使用してください。シーン内にノードを創造的に配置し、それらを動かし、カメラを使用して位置とターゲットの両方を設定することで、あらゆる種類のエフェクトを実現できます。実際にそれをズームに関しては

var canvas = document.querySelector("#c"); 
 

 
var camera = new THREE.PerspectiveCamera(70, 1, 1, 1000); 
 
var scene = new THREE.Scene(); 
 

 
// make some cubes 
 
var geometry = new THREE.BoxBufferGeometry(20, 20, 20); 
 
var material = new THREE.MeshLambertMaterial({ color: 0xFFEECC }); 
 

 
for (var z = -1; z <= 1; ++z) { 
 
    for (var x = -1; x <= 1; ++x) { 
 
    var mesh = new THREE.Mesh(geometry, material); 
 
    mesh.position.x = x * 30; 
 
    mesh.position.z = z * 30; 
 
    scene.add(mesh);  
 
    } 
 
} 
 

 
// add some lights 
 
var light = new THREE.DirectionalLight(0xE0E0FF, 1); 
 
light.position.set(200, 500, 200); 
 
scene.add(light); 
 
var light = new THREE.DirectionalLight(0xFFE0E0, 0.95); 
 
light.position.set(-200, -500, -200); 
 
scene.add(light); 
 

 

 
// now make nodes for camera 
 
var cameraCenterNode = new THREE.Object3D(); 
 
var cameraPositionNode = new THREE.Object3D(); 
 
scene.add(cameraCenterNode); 
 
cameraCenterNode.add(cameraPositionNode); 
 
cameraPositionNode.position.x = 100; 
 
cameraPositionNode.position.y = 40; 
 

 
var renderer = new THREE.WebGLRenderer({canvas: canvas}); 
 

 
function resizeIfChanged() { 
 
    var width = canvas.clientWidth; 
 
    var height = canvas.clientHeight; 
 
    if (canvas.width != width || canvas.height != height) { 
 
    camera.aspect = width/height; 
 
    camera.updateProjectionMatrix(); 
 

 
    renderer.setSize(width, height, false); 
 
} 
 
} 
 

 
function render(time) { 
 
    time *= 0.001; // make it seconds 
 
    
 
    resizeIfChanged(); 
 
    
 
    // Rotate camera center 
 
    cameraCenterNode.rotation.y = time; 
 
    
 
    // get cameraPositionNode's world position and put it in camera 
 
    cameraPositionNode.getWorldPosition(camera.position); 
 
    
 
    // point camera at center 
 
    camera.lookAt(cameraCenterNode.position); 
 

 
    renderer.render(scene, camera); 
 

 
    requestAnimationFrame(render); 
 
} 
 
requestAnimationFrame(render);

body { margin: 0 } 
 
canvas { width: 100vw; height: 100vh; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script> 
 
<canvas id="c"></canvas>

あなたが達成したいかに依存します。例えば

、あなたはcameraCenterNodeとcameraPositionNode間のポイントを計算することができます。例：

var out = cameraPositionNode.getWorldPosition(); 
var in = cameraCenternode.getWorldPosition(); 
in.lerp(out, zoomAmount); // where 0.0 = in and 1.0 = out 

// now set the camera there 
camera.position.copy(in); 

か、常にちょうどその-zAxisあなたが本当にカメラが動作する方法それはあなたの質問から明らかではありません

var worldMatrix = camera.getWorldMatrix(); 

var zoomVector = new THREE.Vector3(
    wm.elememts[8], wm.elememts[9], wm.elememts[10]); 

camera.position.sub(zoomVector.multiplyScalar(zoomAmount)); 

に沿って前方にカメラを移動することができます。あなたがいつも原点を指し示し、典型的なモデリングパッケージのように自由に浮動したいならば、常にORの周りを回転させたいならば。それにかかわらず、周りを回るためにある点を選ぶ必要があります。カメラが同じタイプの計算であるかどうかに応じて、固定小数点か新しい点かにかかわらず動作します。