카메라의 위치를 ​​업데이트하여 객체 회전 시뮬레이션

Question

나는 그 장면의 중심을 항상 보도록 카메라를 설치 한 3d 장면을 가지고 있습니다.

카메라의 x, y, z를 업데이트하여 카메라의 좌표를 변경하여 해당 중심을 중심으로 회전하고 줌하려면 어떻게해야합니까?

회전 이상 롤/요/줌

내가 WebGL에/세 사용하고

을 포함해야하지만이 모든 언어/엔진

Answer 1

뒤에 수학 조금 복잡에 적용해야한다 생각합니다. 최고의

는 http://threejs.org/examples/misc_controls_orbit.html

당신은뿐만 아니라 최대 및 최소 각도 및 설정 자동 회전을 정의 할 수 있습니다 사용할 수 있습니다. ,

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 원점에 카메라로부터의 거리 : 내가 제대로 이해하면

Answer 2

, 당신은 장면의 원점에보고를 "회전"카메라 위치를 필요로 설정 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)); 

함께 카메라를 앞으로 이동할 수 있습니다. 항상 원점을 가리 키기를 원하면 일반적인 모델링 패키지처럼 자유롭게 움직일 수 있도록하려면 원을 중심으로 항상 회전 시키십시오. 그럼에도 불구하고 주위를 돌아서 어떤 지점을 선택해야합니다. 카메라가 동일한 유형의 계산인지 여부에 따라 고정 점인지 새 점인지에 따라 달라집니다.