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是右手坐标系

相关推荐
VT.馒头24 分钟前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript
css趣多多36 分钟前
一个UI内置组件el-scrollbar
前端·javascript·vue.js
-凌凌漆-44 分钟前
【vue】pinia中的值使用 v-model绑定出现[object Object]
javascript·vue.js·ecmascript
C澒1 小时前
前端整洁架构(Clean Architecture)实战解析:从理论到 Todo 项目落地
前端·架构·系统架构·前端框架
C澒1 小时前
Remesh 框架详解:基于 CQRS 的前端领域驱动设计方案
前端·架构·前端框架·状态模式
Hello_Embed1 小时前
libmodbus 移植 STM32(USB 串口后端篇)
笔记·stm32·单片机·嵌入式·freertos·libmodbus
Charlie_lll1 小时前
学习Three.js–雪花
前端·three.js
张祥6422889041 小时前
RTKLIB源码和理论结合分析笔记三
笔记
日更嵌入式的打工仔1 小时前
0欧电阻作用
笔记
onebyte8bits1 小时前
前端国际化(i18n)体系设计与工程化落地
前端·国际化·i18n·工程化