Three.js 快速入门教程【四】三维坐标系

系列文章目录

Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
Three.js 快速入门教程【二】透视投影相机
Three.js 快速入门教程【三】渲染器
Three.js 快速入门教程【四】三维坐标系
Three.js 快速入门教程【五】动画渲染循环
Three.js 快速入门教程【六】相机控件 OrbitControls
Three.js 快速入门教程【七】常见几何体类型

---

---

一、前言

      在 Three.js 的世界中，三维坐标系是构建和理解所有 3D 场景的基础。就如同我们在现实世界中需要用方向和位置来描述物体一样，在虚拟的 3D 场景里，坐标系帮助我们精确地定位和摆放各种对象。本文将详细介绍 Three.js 中的三维坐标系相关知识，并通过具体的代码示例来帮助读者更好地理解和应用。

---

二、三维坐标系基础

1、 右手坐标系

Three.js 使用的是右手笛卡尔坐标系。在右手坐标系中，伸出右手，让拇指指向 X 轴正方向，食指指向 Y 轴正方向，那么中指所指的方向就是 Z 轴正方向。在 Three.js 中，X 轴正方向通常表示向右，Y 轴正方向表示向上，Z 轴正方向表示从屏幕向外。

2、 坐标原点

坐标原点是三维坐标系的中心，即 (0, 0, 0) 点。所有对象的位置都是相对于这个原点来确定的。坐标原点的位置默认处于3D场景的中心。当渲染画布为整个页面窗口大小，原点就在页面正中心。

3、 坐标轴范围

在 Three.js 中，坐标轴的范围是无限的，但在实际场景中，我们通常会根据需要设置合适的范围。例如，当创建一个小的三维模型时，可能会将坐标范围设置在 -10 到 10 之间；而当创建一个大型的场景时，可能需要更大的坐标范围如-1000到1000之间。

4、旋转方向

Three.js 采用右手定则来确定旋转的正方向：
右手定则：将右手握拳，拇指伸直。如果拇指指向坐标轴的正方向，那么其余四指弯曲的方向就是该坐标轴正方向的旋转方向。
绕 X 轴旋转：正方向是从 Y 轴正半轴向 Z 轴正半轴旋转。
绕 Y 轴旋转：正方向是从 Z 轴正半轴向 X 轴正半轴旋转。
绕 Z 轴旋转：正方向是从 X 轴正半轴向 Y 轴正半轴旋转。

---

三、在 Three.js 中使用三维坐标系

1、 创建三维对象并设置位置

// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建一个材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建一个网格对象
const mesh= new THREE.Mesh(geometry, material);

// 设置立方体的位置
mesh.position.set(2, 1, 0);

// 将立方体添加到场景中
scene.add(mesh);

在上述代码中使用 mesh.position.set(2, 1, 0) 方法将立方体的位置设置为 (2, 1, 0)，即 X 轴正方向 2 个单位，Y 轴正方向 1 个单位，Z 轴坐标为 0

2、 物体的旋转

坐标系也影响着物体的旋转。在 Three.js 中，物体的旋转默认是围绕自身 x、y、z 轴方向进行的。例如，我们可以通过以下方式让正方体绕着 y 轴方向旋转：

function animate() {
    requestAnimationFrame(animate);
    // 让正方体绕 y 轴旋转，每次旋转 0.01 弧度
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}

注意旋转单位是弧度而非角度
我们可以使用系统提供的工具类THREE.MathUtils.degToRad把角度转换为弧度

        // 绕 X 轴旋转 45 度
        cube.rotation.x = THREE.MathUtils.degToRad(45);
        // 绕 Y 轴旋转 30 度
        cube.rotation.y = THREE.MathUtils.degToRad(30);
        // 绕 Z 轴旋转 60 度
        cube.rotation.z = THREE.MathUtils.degToRad(60);

或
用Math.PI简单计算，Math.PI代表圆周率 π ,等于 180 度对应的弧度值

        // 绕 X 轴旋转 45 度
        cube.rotation.x = Math.PI/4;
        // 绕 Y 轴旋转 30 度
        cube.rotation.y = Math.PI/6
        // 绕 Z 轴旋转 60 度
        cube.rotation.z =Math.PI/3

---

四、坐标轴辅助器AxesHelper

AxesHelper 是 Three.js 中的一个类，用于在三维场景中绘制坐标轴。它以直观的图形方式展示了 Three.js 所使用的右手坐标系，通过不同颜色的线段分别代表 X 轴、Y 轴和 Z 轴，方便开发者确定对象在空间中的位置和方向

具体颜色对应关系如下：

红色（R）线段：代表 X 轴
绿色（G）线段：代表 Y 轴
蓝色（B）线段：代表 Z 轴

简单记忆：RGB分别对应坐标系的XYZ

添加方法：

THREE.AxesHelper(size:Number)，其中size表示坐标轴线长度

 // 创建坐标轴辅助器
const axesHelper = new THREE.AxesHelper(40);
scene.add(axesHelper);

增大size值

const axesHelper = new THREE.AxesHelper(200);

入参使用注意事项

1、根据场景大小调整：在实际开发中，要根据三维场景的规模来合理设置 size 的值。如果场景较大，使用较小的 size 可能会使坐标轴难以观察；反之，如果场景较小，使用过大的 size 会让坐标轴超出场景范围，影响视觉效果。

2、正值要求：size 必须是一个正值。如果传入负数或者非数值类型的值，可能会导致 AxesHelper 显示异常或者引发错误。

五、开发技巧与常见问题

• 物体和摄像机默认位置都在(0,0,0)，需调整position.z值才能看到物体
• 摄像机默认位置建议采用俯视视角观察物体，视线与z轴正方向夹角15-60度范围能比较好看清整个物体。（假设物体在原点）其中y值控制相机高度，值越大俯视角越大，z值控制相机与物体距离，值越大物体越小。例如：camera.position.set(0, 10, 50);
• 旋转操作使用弧度制而非角度制
• 性能优化避免频繁更新物体position属性

---

六、总结

理解 Three.js 中的三维坐标系是深入学习和开发 3D 场景的关键。通过掌握右手笛卡尔坐标系和右手定则的基本原理，以及它在创建物体、物体旋转和坐标变换中的应用，我们能够更加灵活地构建出丰富多样的 3D 世界。

更多three.js入门知识点请关注该系列教程后续的更新。