如何在三个js中旋转对象以查看鼠标点？

Question

如何在三个js中计算对象rotation.y来查看鼠标指针？

当我将鼠标指针从 1 移动到 2 时，箭头应该转到点 2。我如何计算 rotation.y？

Answer 1

作为一个选项，您可以使用THREE.Raycaster()与THREE.Plane()和使用.lookAt()您的箭头在raycaster的射线和平面的交叉点来点吧。

让我们创建箭头对象：

var coneGeom = new THREE.ConeGeometry(0.125, 1, 4);
coneGeom.translate(0, .5, 0);
coneGeom.rotateX(Math.PI / 2); // 
var coneMat = new THREE.MeshNormalMaterial();
var cone = new THREE.Mesh(coneGeom, coneMat);
cone.lookAt(new THREE.Vector3(0, 1, 0));
scene.add(cone);

然后我们将添加一个事件监听器mousemove：

window.addEventListener("mousemove", onmousemove, false);

然后我们的onmousemove函数将是这样的：

var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0); // it's up to you how you will create THREE.Plane(), there are several methods
var raycaster = new THREE.Raycaster(); //for reuse
var mouse = new THREE.Vector2();       //for reuse
var intersectPoint = new THREE.Vector3();//for reuse

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

  raycaster.setFromCamera(mouse, camera);//set raycaster
  raycaster.ray.intersectPlane(plane, intersectPoint); // find the point of intersection
  cone.lookAt(intersectPoint); // face our arrow to this point
}

jsfiddle示例 r86