如何旋转对象以查看三个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

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

How to rotate object to look mouse point in three js?

mesh

three.js