단추 이동 카메라 THREE.js

Question

내 웹 사이트에 별도의 단추를 갖고 싶습니다. 각 단추는 카메라를 다른 위치로 이동시킵니다. 어떻게해야합니까? 현재 버튼을 누르면 설정 한 카메라 위치의 체인을 따라 가도록 설정되어 있습니다. 그러나 각 버튼을 사용하여 카메라를 다른 장면으로 옮길 수있는 방법을 알지 못합니다.

HTML :

<button onclick="move()">Move</button> 

JS : 그래서 그냥이 같은 camere을 변경, 장면에 대한

camera.position.set(100, 0, 400); 
} 

function render() { 
    requestAnimationFrame(render); 

    renderer.render(scene, camera); 
    TWEEN.update(); 
} 

function moveCam() { 

    var pos1 = new TWEEN.Tween(camera.position).to({ 
     y: 300 
    }, 3000).easing(TWEEN.Easing.Quadratic.InOut); 

    var pos2 = new TWEEN.Tween(camera.position).to({ 
     x: -400 
    }, 4000).easing(TWEEN.Easing.Quadratic.InOut); 

    var pos3 = new TWEEN.Tween(camera.position).to({ 
     y: -10 
    }, 4000).easing(TWEEN.Easing.Quadratic.InOut); 

    var rot1 = new TWEEN.Tween(camera.rotation).to({ 
     y: -1 
    }, 4000).easing(TWEEN.Easing.Quadratic.InOut); 

    var pos4 = new TWEEN.Tween(camera.position).to({ 
     x: 600 
    }, 6000).easing(TWEEN.Easing.Quadratic.InOut); 

    var pos5 = new TWEEN.Tween(camera.position).to({ 
     y: -400 
    }, 2000).easing(TWEEN.Easing.Quadratic.InOut); 

    var rot2 = new TWEEN.Tween(camera.rotation).to({ 
     y: -5 
    }, 2000).easing(TWEEN.Easing.Quadratic.InOut); 

    var pos6 = new TWEEN.Tween(camera.position).to({ 
     z: 10 
    }, 5000).easing(TWEEN.Easing.Quadratic.InOut); 

    var rot3 = new TWEEN.Tween(camera.rotation).to({ 
     y: 0 
    }, 2000).easing(TWEEN.Easing.Quadratic.InOut); 


    pos1.start(); 
    pos1.chain(pos2); 
    pos2.chain(pos3, rot1) 
    rot1.chain(pos4) 
    pos4.chain(pos5, rot2) 
    rot2.chain(pos6) 
    pos6.chain(rot3) 

Answer 1

어쩌면 다음을 시도해보십시오.

버튼 하나당 하나의 트윈을 사용하십시오. 이렇게하면 방해하지 않도록 할 수 있습니다.

var positionTween = new TWEEN.Tween(camera.position) 
    .easing(TWEEN.Easing.Quadratic.InOut); 
var rotationTween = new TWEEN.Tween(camera.rotation) 
    .easing(TWEEN.Easing.Quadratic.InOut); 

각 단추의 위치와 회전을 완전한 형태로 정의하십시오. 따라서 위치를 정의하면 항상 세 가지 구성 요소로 정의하십시오. 같은 방향으로 회전합니다. 값을 지정하지 않으면 변경되지 않으므로 위치는 카메라의 위치에 따라 달라집니다.

여기에서 id 속성을 사용하여 위치를 가져옵니다. 그래서 버튼에 대한 HTML이 같은 모습 있으리라 믿고있어 :

<button id="button1" class="camera-button">Position 1</button> 

을 그리고 JS는 다음과 같습니다 이제 모든 버튼에 대한 이벤트 핸들러를 등록하고 설정을 조회 할 수

var buttonCameraSettings = { 
    button1: { 
     position: {x: 1, y: 0, z: 0}, 
     rotation: {x: 0, y: Math.PI, z: 0} 
    }, 
    button2: { 
     // ... 
    } 
}; 

마지막 부분에 지금

var button1 = document.getElementById('button1'); 
button1.addEventListener('click', function(ev) { 
    var buttonId = ev.target.id; 
    var cameraSettings = buttonCameraSettings[buttonId]; 

    updateCameraTweens(cameraSettings); 
}); 

, 기능 updateCameraTweens과 같을 것이다 :

,369 버튼의

function updateCameraTweens(params) { 
    if (params.position) { 
    positionTween.stop(); 
    positionTween.to(params.position, 1000).start(); 
    } 

    if (params.rotation) { 
    rotationTween.stop(); 
    rotationTween.to(params.rotation, 1000).start(); 
    } 
} 

애니메이션 당 지속 시간이 다른 경우 매개 변수에 해당 숫자를 추가 할 수도 있습니다.

회전에 관한 또 다른 참고 사항. 몇 가지 수학적인 이유 때문에 일반적으로 camera.rotation에 저장된 오일러 각도를 애니메이션으로 만드는 것이 최선의 방법은 아닙니다. 애니메이션은 개체의 쿼터니언이 대신 움직이는 경우 더 잘 보이는 경향이 있습니다.

var quatTween = new TWEEN.Tween(camera.quaternion); 
var toQuaternion = new THREE.Quaternion(); 
var toEuler = new THREE.Eueler(); 

// in updateCameraTweens() 
toEuler.set(rotation.x, rotation.y, rotation.z); 
toQuaternion.setFromEuler(toEuler); 
quatTween.to(toQuaternion, 1000).start(); 

Answer 2

자동 렌더링 : 여기

내가 현재 가지고있는 코드입니다

function move() 
{ 
    camera.position += 10; 
}