时间戳

首页 > 解决方案 > 如何放大光线投射器选择？

three.js - 如何放大光线投射器选择？

问题描述

我想知道如何使用 ThreeJs 放大鼠标选择，我正在使用 raycaster 来选择模型区域，但是当我单击区域时某些东西不起作用 - 正如您在我的示例中看到的（感谢 Mugen87），我的目标是当我点击它们时放大面孔......我添加了以下功能：

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

  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject( mesh, false, intersects );
  if(mesh.type!= 'Mesh' ||  !intersects.length){
  return
  }

    var n = intersects[ 0 ].face.normal.clone();
    n.multiplyScalar(30);
    n.add(intersects[ 0 ].point);
    var p = intersects[ 0 ].point;
    camera.position.copy(n);
    camera.lookAt(p);
    
 
}

当我在模型外部单击时-它没有保持位置并且正在旋转...

标签： three.js

解决方案

那是因为您正在使用OrbitControls，它几乎接管了您的相机并为每帧分配一次位置和旋转。当您尝试手动设置其位置时，OrbitControls会覆盖您所做的任何事情。

解决方案是使您的controls变量全局化。然后当你准备好接管相机位置时，controls.enabled = false;在onClick()函数中设置。然后，当您准备好返回常规控件时，设置controls.enabled = true;

https://threejs.org/docs/#examples/en/controls/OrbitControls.enabled

推荐阅读