joken-前端工程师

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: :: 管理 ::
  404 随笔 :: 39 文章 :: 8 评论 :: 20万 阅读

在 Three.js 中,scene(场景)是一个三维空间的容器,用于存储和管理所有对象(如几何体、光源、相机等)。场景中的坐标轴定义了三维空间的方向和位置基准。以下是关于 scene 坐标轴的详细介绍。


结论

Three.js 使用右手坐标系,默认情况下:

  • X 轴:水平向右为正。
  • Y 轴:垂直向上为正。
  • Z 轴:朝屏幕外为正(远离屏幕的方向为负)。

详细展开

1. 坐标系类型

Three.js 默认使用右手坐标系,这是计算机图形学中最常见的坐标系之一。

(1) 右手坐标系判断方法
  • 伸出右手,大拇指指向 X 轴正方向。
  • 食指指向 Y 轴正方向。
  • 中指指向 Z 轴正方向。
(2) 具体方向约定
方向描述
X 轴 水平向右为正,向左为负。
Y 轴 垂直向上为正,向下为负。
Z 轴 朝屏幕外为正,朝屏幕内为负。

2. 原点 (0, 0, 0)

  • 原点是三维空间的参考点,通常用 (0, 0, 0) 表示。
  • 所有其他点的位置都是相对于原点进行测量的。

3. 坐标轴的作用

坐标轴用于定义三维空间中对象的位置、方向和变换。

(1) 位置
  • 对象的位置由其相对于原点的偏移量决定。
  • 示例代码:
    const cube = new THREE.Mesh(geometry, material);
    cube.position.set(1, 2, 3); // 设置立方体位置为 (1, 2, 3)
    
(2) 方向
  • 对象的方向可以通过旋转来调整。
  • 示例代码:
    cube.rotation.set(Math.PI / 4, 0, 0); // 绕 X 轴旋转 45 度
    
(3) 缩放
  • 对象的大小可以通过缩放来调整。
  • 示例代码:
    cube.scale.set(2, 1, 1); // 在 X 轴方向放大 2 倍
    

4. 场景中的坐标轴可视化

为了更直观地理解场景中的坐标轴,可以使用 AxesHelper 工具将其绘制出来。

(1) AxesHelper 的作用
  • AxesHelper 是一个辅助工具,用于在场景中绘制坐标轴。
  • 默认长度为 1,红色表示 X 轴,绿色表示 Y 轴,蓝色表示 Z 轴。
(2) 使用示例
const axesHelper = new THREE.AxesHelper(5); // 创建长度为 5 的坐标轴
scene.add(axesHelper); // 将坐标轴添加到场景中

效果如下:

  • 红色线条:X 轴正方向。
  • 绿色线条:Y 轴正方向。
  • 蓝色线条:Z 轴正方向。

5. 局部坐标系与全局坐标系

  • 全局坐标系:整个场景的固定参考坐标系,所有对象的初始位置都基于此。
  • 局部坐标系:每个对象都有自己的局部坐标系,用于描述其自身的几何结构和变换。
(1) 局部坐标系的影响
  • 当对象被平移、旋转或缩放时,其局部坐标系会随之变化,但全局坐标系保持不变。
  • 示例代码:
    const cube = new THREE.Mesh(geometry, material);
    cube.position.set(1, 0, 0); // 平移
    cube.rotation.set(0, Math.PI / 2, 0); // 绕 Y 轴旋转 90 度
    cube.scale.set(2, 1, 1); // 缩放
    
(2) 获取全局位置
  • 如果需要获取对象的全局位置,可以使用 object.getWorldPosition() 方法。
  • 示例代码:
    const globalPosition = new THREE.Vector3();
    cube.getWorldPosition(globalPosition);
    console.log('立方体的全局位置:', globalPosition);
    

6. 常见问题及解决方法

(1) 模型加载后位置不对齐
  • 原因:模型在建模软件中未正确对齐原点。
  • 解决方法
    • 在建模软件中重新设置模型的原点,并导出模型。
    • 或者在代码中手动调整模型的位置。
(2) 坐标轴方向混淆
  • 原因:对坐标轴方向不熟悉。
  • 解决方法
    • 使用 AxesHelper 可视化坐标轴。
    • 牢记右手坐标系的方向规则。

总结

Three.js 的 scene 坐标轴遵循右手坐标系,默认方向为:

  • X 轴:水平向右为正。
  • Y 轴:垂直向上为正。
  • Z 轴:朝屏幕外为正。

通过使用 AxesHelper 可以直观地查看坐标轴方向,而局部坐标系和全局坐标系的概念则帮助我们更好地理解和操作对象的位置、方向和变换。

posted on   joken1310  阅读(11)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示