Question

我希望在单击网格时更改摄像机的位置

在这里的示例中 http://www.minyoungna.com/ 单击多维数据集时，摄像头确实会移动，但是仅当鼠标悬停在对象上时。

我认为这个问题的根源在于我的onclick事件，但我不知道如何解决。

function onclick (event){
  event.preventDefault();
  var intersects = raycaster.intersectObjects(  scene.children );
  if ( intersects.length > 0 ) {
    tween = new TWEEN.Tween(camera.position) // Create a new tween that modifies 'coords'.
    .to({ x: 100 ,y:100 }, 2000) // Move to (300, 200) in 1 second.
    .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
    .start(); // Start the tween immediately.
  } else {
  }
}

我的想法是当发生onclick事件时，它将使用raycaster检查是否存在任何相交的对象，并触发一个补间动画，该补间动画将在两秒内结束，无论是否存在任何相交单击后显示对象。

实际上，当发生onclick时，它不仅会产生上述不便，还会禁用以后单击时的补间效果，并将您传送到摄像头位置

我的其他一些功能

function animate (time) {

  for (let property in cube) {
    cube[property].rotation.x += .01;
    cube[property].rotation.y += .01;  

  };
  position(time);
  controls.update();
  composer.render();
  frameId = requestAnimationFrame(animate)
}

function onDocumentMouseMove( event ) {

  event.preventDefault();
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

最好

关于onclick事件的Three.js光线投射问题

0 个答案: