如何旋转对象看三个js中的鼠标点？

Question

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

当我将鼠标指针从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