THREE.js 入门(一)xyz坐标系

一、坐标系概念

three.js 中,相机的默认朝向是沿着 Z 轴的负方向 。也就是说,默认情况下,相机会沿着 Z 轴的负方向"看"到场景中的对象,而 X 轴和 Y 轴分别对应水平方向和垂直方向。换句话说,相机的默认位置是 (0, 0, 0),并且它会朝向 负 Z 轴

默认方向:

  • X 轴:水平,正方向向右,负方向向左。
  • Y 轴:垂直,正方向向上,负方向向下。
  • Z 轴:深度,正方向向外(远离相机),负方向向里(靠近相机)。

默认相机朝向:

默认情况下,当你创建一个相机(比如 THREE.PerspectiveCamera)时,相机会位于 (0, 0, 0),并且它会朝向 Z 轴的负方向

复制代码
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5); // 相机的位置在 (0, 0, 5)
camera.lookAt(0, 0, 0); // 相机朝向 (0, 0, 0)

在这个例子中,camera.position.set(0, 0, 5) 表示将相机放置在 Z = 5 的位置,即距离场景原点 5 个单位。默认情况下,相机会朝向场景的中心 (0, 0, 0),即 lookAt(0, 0, 0)

二、调整相机的朝向

如果你想改变相机的朝向或方向,可以通过以下方法:

  1. 修改 camera.lookAt()lookAt() 方法可以让相机指向一个特定的点。可以传入一个目标点的坐标或一个 THREE.Vector3 对象来调整相机的朝向。

    // 相机指向 (1, 1, 0) 位置 camera.lookAt(new THREE.Vector3(1, 1, 0));

  2. 直接设置相机的旋转 : 你还可以直接设置相机的旋转(rotation.x, rotation.y, rotation.z),这将改变相机的朝向。

    camera.rotation.x = Math.PI / 4; // 旋转相机 45 度

  3. 修改相机位置 : 你可以直接通过设置相机的位置 (camera.position.set(x, y, z)) 来控制相机的位置,并通过 lookAt() 或旋转来调整相机的朝向

注:Unity 使用的是左手坐标系,threejs是右手坐标系

相关推荐
陈天伟教授3 小时前
人工智能训练师认证教程(2)Python os入门教程
前端·数据库·python
2301_764441333 小时前
Aella Science Dataset Explorer 部署教程笔记
笔记·python·全文检索
信看4 小时前
NMEA-GNSS-RTK 定位html小工具
前端·javascript·html
Tony Bai4 小时前
【API 设计之道】04 字段掩码模式:让前端决定后端返回什么
前端
爱吃大芒果4 小时前
Flutter 主题与深色模式:全局样式统一与动态切换
开发语言·javascript·flutter·ecmascript·gitcode
苏打水com4 小时前
第十四篇:Day40-42 前端架构设计入门——从“功能实现”到“架构思维”(对标职场“大型项目架构”需求)
前端·架构
派大鑫wink4 小时前
【Java 学习日记】开篇:以日记为舟,渡 Java 进阶之海
java·笔记·程序人生·学习方法
king王一帅4 小时前
流式渲染 Incremark、ant-design-x markdown、streammarkdown-vue 全流程方案对比
前端·javascript·人工智能
苏打水com4 小时前
第十八篇:Day52-54 前端跨端开发进阶——从“多端适配”到“跨端统一”(对标职场“全栈化”需求)
前端