Three.js 世界坐标系学习指南

Mintopia
142 阅读4分钟

一、引言

在使用 Three.js 进行 3D 场景开发时，理解世界坐标系是非常重要的基础。坐标系决定了物体在 3D 空间中的位置、方向和大小，是构建 3D 场景的基石。本文将详细介绍 Three.js 中的世界坐标系相关知识。

二、Three.js 中的坐标系概述

Three.js 使用的是右手坐标系。在右手坐标系中，伸出右手，让大拇指指向 X 轴正方向，食指指向 Y 轴正方向，那么中指所指的方向就是 Z 轴正方向。

坐标轴含义

  • X 轴：水平方向，正方向通常指向右侧。
  • Y 轴：垂直方向，正方向通常指向上方。
  • Z 轴：深度方向，正方向通常指向屏幕外。

三、创建基本的 Three.js 场景

在深入了解坐标系之前，我们先创建一个基本的 Three.js 场景。

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 渲染场景
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

代码解释

  1. 场景（Scene） ：场景是 Three.js 中所有物体的容器，就像一个舞台，所有的 3D 物体都在这个舞台上展示。
  1. 相机（Camera） ：相机决定了我们从哪个角度观察场景。这里使用的是透视相机（PerspectiveCamera），它可以模拟人眼的视觉效果，产生近大远小的透视效果。
  1. 渲染器（Renderer） ：渲染器负责将场景和相机的信息渲染到屏幕上。这里使用的是 WebGL 渲染器（WebGLRenderer），它利用 WebGL 技术进行高效的 3D 渲染。
  1. 立方体（Cube） ：创建一个立方体并添加到场景中。立方体的位置默认是在坐标系的原点（0, 0, 0）。

四、物体的位置设置

在 Three.js 中，可以通过物体的 position 属性来设置物体在坐标系中的位置。

// 设置立方体的位置
cube.position.x = 2;
cube.position.y = 1;
cube.position.z = 0;

代码解释

  • cube.position.x = 2：将立方体在 X 轴正方向上移动 2 个单位。
  • cube.position.y = 1：将立方体在 Y 轴正方向上移动 1 个单位。
  • cube.position.z = 0：立方体在 Z 轴上的位置保持不变。

五、坐标系的变换

局部坐标系和世界坐标系

每个物体都有自己的局部坐标系，局部坐标系的原点通常是物体的中心。当我们将物体添加到场景中时，物体的局部坐标系会相对于世界坐标系进行变换。

物体的旋转和缩放

除了位置，物体还可以进行旋转和缩放操作。

// 旋转立方体
cube.rotation.x = Math.PI / 4; // 绕 X 轴旋转 45 度
cube.rotation.y = Math.PI / 4; // 绕 Y 轴旋转 45 度
// 缩放立方体
cube.scale.x = 2; // 在 X 轴方向上缩放为原来的 2 倍
cube.scale.y = 0.5; // 在 Y 轴方向上缩放为原来的 0.5 倍

代码解释

  • cube.rotation.x = Math.PI / 4：将立方体绕 X 轴旋转 45 度（Math.PI / 4 表示 45 度的弧度值）。
  • cube.rotation.y = Math.PI / 4：将立方体绕 Y 轴旋转 45 度。
  • cube.scale.x = 2：将立方体在 X 轴方向上缩放为原来的 2 倍。
  • cube.scale.y = 0.5：将立方体在 Y 轴方向上缩放为原来的 0.5 倍。

坐标变换的重要性

在复杂的 3D 场景中，经常需要进行坐标变换。例如，当一个物体是另一个物体的子对象时，子对象的位置、旋转和缩放是相对于其父对象的局部坐标系而言的。通过坐标变换，可以将子对象的局部坐标转换为世界坐标，以便在场景中正确显示。

坐标变换的实现

Three.js 提供了一些方法来进行坐标变换。例如，getWorldPosition 方法可以获取物体在世界坐标系中的位置。

// 创建一个子立方体
const childGeometry = new THREE.BoxGeometry();
const childMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const childCube = new THREE.Mesh(childGeometry, childMaterial);
childCube.position.x = 1; // 子立方体在父立方体局部坐标系中的位置
cube.add(childCube);
// 获取子立方体在世界坐标系中的位置
const worldPosition = new THREE.Vector3();
childCube.getWorldPosition(worldPosition);
console.log('子立方体在世界坐标系中的位置:', worldPosition);

代码解释

  1. 创建子立方体：创建一个新的立方体作为 cube 的子对象，并设置其在父立方体局部坐标系中的位置。
  1. 获取世界坐标：使用 getWorldPosition 方法获取子立方体在世界坐标系中的位置，并将结果存储在 worldPosition 向量中。

六、总结

通过本文的学习，你应该对 Three.js 中的世界坐标系有了基本的了解。掌握坐标系的概念和操作方法，对于创建复杂的 3D 场景至关重要。在实际开发中，你可以根据需要灵活运用物体的位置、旋转、缩放以及坐标变换等操作，打造出丰富多彩的 3D 世界。

希望这篇文章能帮助你更好地学习 Three.js 中的世界坐标系知识。如果你有任何疑问或建议，欢迎留言讨论。

avatar
文章
阅读
粉丝