模型坐标系与设备坐标系之间完美转换的艺术

前端

2023-11-17 22:37:21

坐标系在Three.js中的作用：理解世界、设备和屏幕空间

Three.js，一个强大的三维库，为开发人员提供了构建引人入胜的虚拟世界的工具。了解Three.js中的坐标系对于与虚拟场景进行交互和操纵物体至关重要。

坐标系的世界

在Three.js中，有三个主要的坐标系：世界坐标系、设备坐标系和标准设备坐标系。

世界坐标系 是Three.js虚拟世界中的中心坐标系，以原点为中心向各个方向延伸。所有物体都在世界坐标系中定位，这意味着它们相对于原点的距离和方向。

设备坐标系 基于用户的设备，屏幕左上角为原点。该坐标系允许我们指定相对于屏幕位置的元素，例如鼠标坐标。

标准设备坐标系 与设备坐标系类似，但其原点位于屏幕中央。它主要用于将纹理映射到三维物体上。

从设备到世界的转换

通常，我们需要将设备坐标系中的坐标（如鼠标坐标）转换为世界坐标系中的坐标，以便与Three.js中的物体交互。为此，Three.js提供了Raycaster类。

Raycaster从相机投射一条射线，并返回它与场景中物体相交的点。通过将设备坐标系中的鼠标坐标转换为射线方向，我们可以获取世界坐标系中的3D坐标。

// 创建Raycaster
const raycaster = new THREE.Raycaster();

// 设置鼠标坐标（设备坐标系）
const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

// 将鼠标坐标转换为射线方向
raycaster.setFromCamera(mouse, camera);

// 执行射线投射
const intersects = raycaster.intersectObjects(scene.children);

屏幕空间坐标系

除了这三个坐标系外，还有屏幕空间坐标系 ，它与设备坐标系相似，但原点位于屏幕中央。屏幕空间坐标系主要用于将三维物体投影到屏幕上。

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 设置相机位置
camera.position.set(0, 0, 10);

// 添加相机到场景
scene.add(camera);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器添加到页面
document.body.appendChild(renderer.domElement);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);

  // 渲染场景
  renderer.render(scene, camera);
}

animate();