three.js - Как переключить положение камеры, если щелкнуть мышью?

Question

Я довольно новичок в three.js, поэтому я сожалею, если этот вопрос кажется немного запутанным.

Итак, у меня уже есть сцена, установленная в three.js, но я хочу, чтобы положение моей камеры плавно переходило от точки A в точку B (я укажу позиции для A и B в своем коде). Я бы, вероятно, сделал это с помощью Tween.js, чтобы облегчить анимацию камеры.

Я хочу, чтобы изменение моей камеры в месте происходило всякий раз, когда нажимается левая кнопка мыши. Таким образом, положение камеры переключается с позиции A на позицию B и наоборот, когда нажимается левая кнопка мыши в любом месте сцены.

Однако я не уверен, как даже воспроизвести что-то подобное. Я нашел обучающие материалы о том, как менять позиции всякий раз, когда мышь удерживается, но ничего, что переключает позицию вперед и назад, в фиксированных положениях, всякий раз, когда нажимается мышь. Я не знаю, если это сделать, мне нужно было бы сделать оператор if if в разделе render() моего кода, который указывает, будет ли нажата мышь, чтобы изменить положение камеры, но я думаю, что это было бы слишком просто ?

Любая помощь приветствуется.

EDIT:

Вот код для моего рендеринга() сцены:

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();