三个JS-在3D中旋转箭头以跟踪鼠标 [英] Three JS - Rotate arrow in 3D to track mouse

问题描述

我正在学习三个Js，我有以下问题：我有一个固定长度的箭头r居中位置(x, y, z)，我希望箭头旋转以跟踪鼠标。如果鼠标离中心的距离比r远，我希望箭头的z分量为0，但如果鼠标距离中心r，我希望箭头的z分量设置为剩余长度，即Math.sqrt((arrowLength * arrowLength) - (dx*dx) - (dy*dy))。

如何执行此操作？

我的问题与this question类似，但关键区别在于我事先不知道dz组件。

推荐答案

可以使用Vector3()的.unproject()方法将向量从摄像头的ndc空间投射到世界空间。

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 1).setLength(6);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

window.addEventListener("resize", onWindowResize);

let pointer = new THREE.Vector3();
let lookAt = new THREE.Vector3();
window.addEventListener("pointermove", event => {
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
  lookAt.copy(pointer).unproject(camera).setLength(5);
  o.lookAt(lookAt);
})

let g = new THREE.ConeGeometry(0.2, 2, 32);
g.translate(0, 1, 0);
g.rotateX(Math.PI * 0.5);
let m = new THREE.MeshNormalMaterial();
let o = new THREE.Mesh(g, m);
scene.add(o);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

function onWindowResize() {

  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(innerWidth, innerHeight);

}

</script>

这篇关于三个JS-在3D中旋转箭头以跟踪鼠标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！