マウスホイールのカーソルの位置に基づいてズームします

Question

現在、THREE.jsプロジェクトで作業しています。トラックボールコントロールを使用している間は、モデルの中心を基準にズームしていますが、カーソルの位置に応じてズームしたいマウスホイールを使ってください。これに慣れている人は私を助けてください。 ありがとうございます。

Answer 1

mousewheelでは、モデルに相対的ではなく、カーソルの位置に基づいてズームするのに役立つこのコードを追加します。

トラックボールコントロールを使用している場合、これをパンや回転に使用できます。 mousewheelでトラックボールコントロールをfalseに設定しました。

renderer.domElement.addEventListener('mousewheel', 
      function (e) { 
       mousewheel(e); 
         }, 
      false); 


    function mousewheel(event) { 
      trackBallControls.noZoom = true; 
      event.preventDefault(); 
      var factor = 50; 
      var mX = (event.clientX/jQuery(container).width()) * 2 - 1; 
      var mY = -(event.clientY/jQuery(container).height()) * 2 + 1; 
      var vector = new THREE.Vector3(mX, mY, 0.5); 
      //console.log(vector); 
      vector.unproject(camera); 
      vector.sub(camera.position); 
      if (event.deltaY < 0) { 
       camera.position.addVectors(camera.position, 
      vector.setLength(factor)); 
       trackBallControls.target.addVectors(trackBallControls.target, 
      vector.setLength(factor)); 
       camera.updateProjectionMatrix(); 
      } else { 
       camera.position.subVectors(camera.position, 
       vector.setLength(factor)); 
       trackBallControls.target.subVectors(trackBallControls.target, 
       vector.setLength(factor)); 
       camera.updateProjectionMatrix(); 
      } 
     }