ThreeJS 坐标系转化

最新推荐文章于 2025-10-10 10:26:32 发布
原创 最新推荐文章于 2025-10-10 10:26:32 发布 · 3.7k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#3d #js

本文详细介绍了ThreeJS中屏幕坐标系、世界坐标系和标准化设备坐标系的概念，并阐述了它们之间的转换关系，包括屏幕坐标转世界坐标和世界坐标转屏幕坐标的步骤及公式，提供了具体的转换函数示例。

这一章主要讲的是屏幕坐标和世界坐标之间的数据转换，在THreeJS中还是非常实用的...

目录

一、什么是屏幕坐标系？

二、什么是世界坐标系？

三、什么是标准化设备坐标系？

四、三个坐标系之间的关系

五、屏幕坐标转世界坐标

六、世界坐标转屏幕坐标 

一、什么是屏幕坐标系？

        ThreeJS使用了canvas画布绘制图形，所以屏幕坐标系就是canvas中的坐标系。

屏幕坐标系的起始点在左上角（0，0） 

二、什么是世界坐标系？

世界坐标系（三维坐标系）分为两种，左手坐标系和右手坐标系。

  • 左手坐标系：BabylonJS
  • 右手坐标系：ThreeJS（下图就是右手坐标系）

 

三、什么是标准化设备坐标系？

        一旦你的顶点坐标已经在顶点着色器中处理过，它们就应该是标准化设备坐标（Normalized Device Coordinates，NDC）了，标准化设备坐标是一个x、y和z值在-1.0到1.0的一小段空间。任何落在范围外的坐标都会被丢弃/裁剪，不会显示在你的屏幕上。下面你会看到我们定义的在标准化设备坐标中的三角形(忽略z轴)：

 与通常的屏幕坐标不同，y轴正方向为向上，(0, 0)坐标是这个图像的中心，而不是左上角。最终你希望所有(变换

最低0.47元/天 解锁文章
Threejs 展示——坐标间的转换
虎康的博客
01-30 864
世界坐标系是指整个 Three.js 场景的坐标系，它是一个三维坐标系，用来表示场景中物体的位置和方向。屏幕坐标系是指屏幕或视口的二维坐标系，通常以左上角为原点，向右为 X 轴正方向，向下为 Y 轴正方向。当用户在屏幕上点击鼠标时，得到的坐标就是屏幕坐标系中的坐标。在 Three.js 中，展示和坐标间的转换涉及到不同的坐标系，包括世界坐标系、屏幕坐标系和相机坐标系。相机坐标系是相机的局部坐标系，它以相机位置为原点，相机视线方向为 Z 轴负方向，垂直向上为 Y 轴正方向，水平向右为 X 轴正方向。
three.js地理坐标系有哪些，和屏幕坐标系的转换。
2401_82881178的博客
07-03 2407
坐标系很好理解，就是点线面体的位置，一个点是一个坐标，一条线段2个坐标，一个矩形四个坐标，一个立方体8个坐标，three.js面对的是三维空间，屏幕则是二维的，这就面临着转换问题，贝格前端工场借助本文为大家浅释一下。
three.js坐标系与变换操作
最新发布
wangmujia的博客
10-10 144
【代码】three.js坐标系与变换操作。
ThreeJS-3D教学十一：屏幕坐标和世界坐标转换
weixin_44384273的博客
01-15 2106
屏幕坐标和世界坐标转换
three.js 3d坐标转平面坐标
02-08
一个小demo，3d空间坐标转平面坐标，div固定于3d空间系中得某一点
[Threejs]三种坐标系位置数据的转换
moxiaomomo的专栏
10-29 1万+
webGL中主要有6种坐标系．接下来看看如何在以下三种坐标系之间进行坐标数据的转换：屏幕坐标系，标准坐标系，世界坐标系． 屏幕坐标系和标准设备坐标系 先来了解一下这两个坐标系的定义，具体如下图所示： 屏幕坐标系的起始点(0,0)在左上角，而标准坐标系的起始点在canvas中心处. 假设3D画布的大小填满window 假如我们要通过鼠标来操控3D画布内的场景对象，需要将鼠标的坐标位置转换为3...
threejs三种坐标（世界坐标，局部坐标，屏幕坐标）转换
m0_73495473的博客
08-08 6000
获取点击到的三维坐标图形，将其转化为屏幕坐标，获取其屏幕坐标的x,y值。三种坐标系的转换
three.js中坐标系转换以及camera的position、lookAt与up属性理解
weixin_50867227的博客
09-01 8761
three.js中坐标系转换以及camera的position、lookAt与up属性理解
Threejs 坐标定义
DIY_Liu的博客
06-14 1231
threejs坐标操作理解
ThreeJS 屏幕坐标与世界坐标互转
热门推荐
yleave的博客
10-17 1万+
物体坐标转屏幕坐标   在 ThreeJS 中，一个物体可看作一个 Mesh，Mesh 的坐标是用一个 Vector3 来表示的，Vector3 中包含了 x、y、z 坐标。 project 方法   通过 Vector3对象的方法 project，方法的参数是相机对象，语句 worldVector.project(camera);返回的结果是世界坐标 worldVector在 camera相机对象矩阵变化下对应的标准设备坐标， 标准设备坐标 xyz 的范围是[-1,1]。   Three 的场景是建立在
webgl和threejs的坐标系以及坐标转换
qq_37200686的博客
01-22 2353
如何将一个世界坐标下的模型，绘制到屏幕上呢？屏幕变换*标准设备变换*视图变换*模型变换*模型坐标。
Three.js坐标系与变换矩阵快速入门
新缸中之脑
01-27 5521
很多东西汇集在一起构成一个美丽的 3D 场景，例如光照、材质、模型、纹理、相机设置、后期处理、粒子效果、交互性等等，但无论我们创建什么样的场景，没有比这更多的了 比组成它的乐曲的排列和运动更重要。要创建建筑效果图，我们必须成为建筑师和室内装饰师。我们必须考虑建筑物和里面房间的比例，巧妙地放置家具和灯具。在自然场景中，无论是一朵花的特写，还是广阔的山景，我们都需要以自然而令人信服的方式安排树木和岩石，或叶子和花瓣。
ThreeJS 坐标系（旋转跳跃，永不停歇）
weixin_38363139的博客
05-31 1400
Mesh 内部还涉及到局部空间和局部坐标系（local coordinate system） ，Mesh 上还可以添加 Mesh（将一个Mesh作为另一个Mesh的children， child Mesh 位置变换就会相对于 parent Mesh 的局部坐标系进行变换计算）。计算时 meshA移动计算相对于scene的坐标系（这里就是世界坐标系）， meshB 移动计算时相对的坐标系是 meshA的局部坐标系。虽然每个 mesh 都有自己的坐标系，但是最后呈现到屏幕上我们看见的还是基于世界坐标系的。
Threejs入门之二十二：Threejs中的屏幕坐标转标准设备坐标
九仞山的专栏
04-14 1155
详细介绍了Threejs中屏幕坐标转标准设备坐标的方法，同时复习了HTML中四个坐标系的相关知识
ThreeJS教程：屏幕坐标转标准设备坐标
jianshi2023的博客
06-06 934
推荐：将加入你的3D工具链。
threejs 模型 世界坐标系和设备坐标系
m0_52009348的博客
04-10 2522
开发中遇到需求需要点击屏幕位置处，生成一个类似圆形弹窗面板，这个交互需要进行的坐标转换为模型坐标（局部坐标）=>场景坐标（世界坐标）=>标准设备坐标=>屏幕空间坐标，也就是一个将3D坐标转换为2D坐标的过程，话不多说，上代码！
THREE.JS 场景世界坐标和平面二维坐标互转
ALLENJIAO的专栏
09-19 3155
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>场景世界坐标转</title>     <style type="text/css">      
【Threejs进阶教程-算法篇】1.常用坐标系介绍与2d/3d随机点位算法
qq_42760477的博客
05-12 2081
Threejs进阶教程，坐标系与随机数，本篇主要介绍了在开发中常用的几种坐标系，以及基于这些坐标系的随机算法
threejs的三维坐标系
02-20
### Three.js 三维坐标系解析 #### 局部坐标系与世界坐标系 在 Three.js 中，存在两种主要的坐标系：局部坐标系和世界坐标系。每个对象都有自己的局部坐标系，在这个体系下定义的位置、旋转以及缩放属性都是相对于该对象自身的中心点而言的[^1]。 对于场景中的任何几何体来说，当对其进行变换（平移、旋转或缩放）时，实际上是在修改它在自己局部坐标系下的参数。然而，为了能够正确显示在整个虚拟世界的环境中，还需要将其转换到全局统一的世界坐标系中去。这种从局部向全球转变的过程涉及到一系列复杂的矩阵运算，包括但不限于模型视图矩阵(ModelView Matrix) 和投影矩阵(Projection Matrix)。 #### 坐标轴方向及其作用 Three.js 使用的是右手定则笛卡尔直角坐标系统，这意味着 X 轴指向右侧，Y 轴指向上方，Z 轴则是朝外的方向——即正对着观察者的一面被认为是正面(+Z)，背离观察者的那一面被认作背面(-Z)。 这样的设定不仅有助于开发者更直观地理解和控制物体的空间位置关系，同时也方便了后续涉及光照计算、摄像机视角调整等方面的工作。例如，通过改变某个物体沿 Z 轴上的位移可以轻松实现景深效果；利用绕 Y 轴转动的方式可以让角色面向不同的方位等操作都变得简单明了。 ```javascript // 创建一个位于 (0, 0, 0) 的立方体并设置其大小为宽高深各 1 单位 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 将立方体沿着 z 方向往前移动一些距离使其可见 cube.position.z = -5; ``` #### 三维至二维坐标的映射 值得注意的是，虽然 Three.js 主要处理的是三维数据结构，但在最终呈现给用户的画面上却是以二维形式展现出来的。因此，有一个重要的环节就是如何把三维空间内的坐标准确无误地投射到 Canvas 平面上完成可视化展示。这通常借助于透视投影(Perspective Projection) 或 正交投影(Orthographic Projection) 来达成目的[^2]。 具体来讲，无论是哪种类型的相机(Camera)，都会先将所有顶点按照一定的规则转化为标准化设备坐标(Normalized Device Coordinates,NDCs)，然后再进一步经过裁剪(Clipping)等一系列步骤之后才真正形成屏幕上所看到的画面内容。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值