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

Question

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

​

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

Answer 1

作为一种选择，您可以将THREE.Raycaster()与THREE.Plane()一起使用，并使用箭头的.lookAt()将其指向光线和平面的交点。

让我们创建箭头对象：

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