three.js - 마우스를 클릭하면 카메라 위치를 전환하는 방법은 무엇입니까?

Question

나는 three.js에 꽤 익숙하다. 그래서이 질문이 약간 복잡한 것처럼 보인다면 미안하다.

그래서 이미 내 장면을 three.js로 설정했지만 내 카메라 위치가 A 지점에서 B 지점으로 부드럽게 움직 이도록하고 싶습니다. (코드에서 A와 B의 위치를 ​​지정합니다). Tween.js를 사용하여 카메라 애니메이션을 쉽게 할 수 있습니다.

마우스 왼쪽 버튼을 클릭 할 때마다 카메라의 위치가 변경되기를 원합니다. 기본적으로 카메라의 위치는 왼쪽 마우스 버튼을 장면의 아무 곳이나 클릭 할 때마다 위치 A에서 위치 B로 또는 그 반대로 전환됩니다.

그러나 나는 이런 식으로 복제하는 방법을 모르겠다. 마우스를 누를 때마다 위치를 변경하는 방법에 대한 자습서를 찾았지만 마우스를 클릭 할 때마다 고정 된 위치에서 앞뒤로 위치를 전환하는 것은 없습니다. 이 일을 해야할지 모르겠다. 내 코드의 render() 섹션에 'if'문을 써야 할 것이다. 마우스가 카메라 위치를 변경하기 위해 클릭되면 클릭하면 상태가 너무 단순해진다. ?

도움을 주시면 감사하겠습니다.

는 편집 :

function render() { 

      var timer = Date.now() * 0.00030; 

      camera.position.x += (0.5*Math.sin(timer) * mouseX - camera.position.x) * 0.05; 
      camera.position.y += (0.5*Math.cos(timer) *- mouseY - camera.position.y) * 0.05; 
      camera.position.z = 0; 

      camera.lookAt(scene.position); 

      for (i = 0; i < scene.children.length; i ++) { 
       var object = scene.children[ i ]; 
       if (object instanceof THREE.Points) { 
        object.rotation.y = time * (i < 4 ? i + 1 : - (i + 1)); 
       } 
      } 

      for (i = 0; i < materials.length; i ++) { 
       color = parameters[i][0]; 
       h = (0 * (color[0] + time) % 360)/360; 
       materials[i].color.setHSL(h, color[1], color[2]); 
      } 

      renderer.render(scene, camera); 

     } 

그냥 내가 마우스 왼쪽 버튼이 클릭 할 때마다 다른 특정 위치에 camera.position.z = 0; 애니메이션을 기대했다, 명확히하기 : 여기

내 렌더링() 장면에 대한 코드입니다 내 장면.

Answer 1

문서에서 마우스 이벤트를 수신하고 위치를 전환 한 다음 render()을 호출하여 캔버스를 다시 그릴 수 있습니다.

// list of positions in [x, y, z] coordinates 
 
var positions = [ 
 
    [0, 0, 0], 
 
    [5, 0, 0] 
 
]; 
 

 
// set our first position 
 
var positionIndex = 0; 
 
var position = positions[positionIndex]; 
 

 
document.addEventListener('click', function() { 
 
    // when a click happens ... 
 
    positionIndex++; 
 
    // reset position index back to 0 if it's past the end of the array 
 
    positionIndex = positionIndex >= positions.length ? 0 : positionIndex; 
 
    
 
    // update the current position 
 
    position = positions[positionIndex]; 
 
    
 
    // re-render the canvas 
 
    render(); 
 
}); 
 

 
function render() { 
 
    console.log('rendering at position', position); 
 
} 
 

 

 
// do our inital render 
 
render();