three.js三维坐标映射成二维坐标

已于 2023-07-29 14:16:59 修改
阅读量377 收藏
点赞数
分类专栏： three.js学习 文章标签： javascript
于 2023-07-29 14:13:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52047574/article/details/131994412
版权

目的

确定将three.js里的三维坐标映射到屏幕的哪个地方

几种坐标系

代表屏幕的canvas坐标系，二维的，其左上角为原点，类似屏幕；
代表three.js里的空间坐标系，三维的，其中心为原点。

转换过程

three.js里的世界坐标（三维）=》标准设备坐标=》canvas坐标（二维）

TODO

世界坐标转标准设备坐标的Vector3.project(camera)的实现；
CSS2DRenderer类的实现

参考

link

weixin_52047574
关注
专栏目录
three.js 3d坐标转平面坐标
02-08
一个小demo，3d空间坐标转平面坐标，div固定于3d空间系中得某一点
three.js 3D坐标转化为2D屏幕坐标
你蠢哭我咯的博客
07-13 5959
//创建一个3D坐标 var vector = new THREE.Vector3(); //获取模型 var obj = scene.getObjectByName(data.list[0].modelName); vector = vector.setFromMatrixPosition(obj.matrixWorld).project(camera); var
three.js地理坐标系有哪些，和屏幕坐标系的转换。
最新发布
2401_82881178的博客
07-03 1454
坐标系很好理解，就是点线面体的位置，一个点是一个坐标，一条线段2个坐标，一个矩形四个坐标，一个立方体8个坐标，three.js面对的是三维空间，屏幕则是二维的，这就面临着转换问题，贝格前端工场借助本文为大家浅释一下。
Three.js坐标系与变换矩阵快速入门
新缸中之脑
01-27 5118
很多东西汇集在一起构成一个美丽的 3D 场景，例如光照、材质、模型、纹理、相机设置、后期处理、粒子效果、交互性等等，但无论我们创建什么样的场景，没有比这更多的了 比组成它的乐曲的排列和运动更重要。要创建建筑效果图，我们必须成为建筑师和室内装饰师。我们必须考虑建筑物和里面房间的比例，巧妙地放置家具和灯具。在自然场景中，无论是一朵花的特写，还是广阔的山景，我们都需要以自然而令人信服的方式安排树木和岩石，或叶子和花瓣。
如何将three.js坐标体系中的坐标转换为二维坐标
Think More 的博客
05-21 1195
背景： 线条是three.js开发的，每条线条的开始位置需要放一个2.5D的图标，所以就需要把三维的坐标转为二维 const myObj = document.getElementById(dom); const width = myObj.clientWidth; const height = myObj.clientHeight; const pos = {x:10,y:10,z:10}; function getPosition(pos = {}) { let a = new THREE.Ve
threejs 模型 世界坐标系和设备坐标系
m0_52009348的博客
04-10 2089
开发中遇到需求需要点击屏幕位置处，生成一个类似圆形弹窗面板，这个交互需要进行的坐标转换为模型坐标（局部坐标）=>场景坐标（世界坐标）=>标准设备坐标=>屏幕空间坐标，也就是一个将3D坐标转换为2D坐标的过程，话不多说，上代码！
二三维联动小思考
webgpu
12-11 3015
背景 一般游戏里比如LOL有个小地图，有的软件还有一个像是俯视图的二维小地图，这里如何同步两边的transform呢？ 第一种想法 3D是主场景，然后2D直接上方一个正交camera实时绘制 存在问题 这样绘制两次，不好 这样如果要操作2D视图，那怎么办 第二种想法 直接绘制一个2D场景 比如3D用了three 2D就拿个cocos?laya?pixi这些具备2D能力的库来单独构造一个2D场景 这样也绘制两次，但是2D场景一般来说就是sprite集，会比3D场景绘制两次好太多了 可以操作2D视图 如
Threejs进阶之十八:使用ExtrudeGeometry从二维图形创建三维几何体
九仞山的专栏
06-08 2248
详细介绍了使用ExtrudeGeometry从二维图形创建三维几何体的方法和步骤
Three.js获取鼠标点击的三维坐标示例代码
12-09
总的来说，Three.js中获取鼠标点击的三维坐标涉及到视口坐标到世界空间坐标的转换、射线投射以及物体交点的检测。这些技术在实现交互式三维应用时非常关键，例如选中物体、触发事件或进行拖放操作。理解这些步骤对于...
three.js3D地形.zip
07-13
这包括草地、岩石、水体等不同材质的纹理，通过UV坐标映射到地形的每个面片上。 三、地形细节增强 1. 分割与平滑：为了增加地形的细节，我们可以对原始高度图进行细分，增加更多的顶点和面。同时，应用平滑算法，...
three.js加载obj+mtl文件源码
03-21
在三维图形渲染领域，Three.js 是一款非常流行的 JavaScript 库，它使得在浏览器中创建复杂的3D场景变得简单。本教程将深入探讨如何使用 Three.js 加载 obj 和 mtl 文件，以及如何为 obj 模型添加纹理。 首先，我们...
lightning-scatter-3:基于Three.js的散点图
05-10
在传统的二维散点图中，每个数据点用一个点表示，而在三维散点图中，每个点则被映射到空间中的一个位置，增加了第三个维度，使得数据的多维度分析成为可能。这种视觉效果对于揭示数据之间的空间模式和趋势非常有效。...
矩阵变换实现从二维到三维坐标映射的方法探究
热门推荐
lordwish的专栏
03-12 1万+
如果我们面前有一张二维平面图和一个三维模型，如何让平面图和模型上的物体产生空间对应关系呢？本文将针对这一问题进行探究。 问题背景 举个例子，下图左边是我家房子的平面图，右边是我家房子的三维模型。家里装修我买了一个沙发，我在平面图上把沙发的位置标出来，在客厅区域放置一个图标，然后我希望三维模型能在客厅的相应位置自动添加一个沙发。 简单来讲就是如何把二维平面上的一个二维坐标一一映射到...
3D坐标在二维屏幕上的映射
x2017x的博客
09-27 2341
三维空间的物体点坐标设为（x,y,z），求解其在屏幕上的映射点，需要的输入为：三维坐标点、pvm矩阵（projection * view * model）、渲染屏幕的宽高及起始点（left,up,width,height）。 cv::Point ptCast(Vec3f pos3D, int* viewPort, float* pmv) { GLKMatrix4 pmv...
图形学 坐标系空间变换
bijinsong的博客
03-26 4238
3D物体从三维坐标映射到2D屏幕上，要经过一系列的坐标系变换，这些坐标系如下：model物体本身（local）的坐标系，是相对坐标。比如一个3D人物模型，头部某个点的坐标为（0，0，20），这是相对该模型的中心点（0，0，0）说的。当模型向前移动了5个单位，其中心点依旧是（0，0，0），头部那个点依旧是（0，0，20）world世界坐标系，即物体放在世界里的坐标，也就是大家最能理解的那个坐标。还是...
三维坐标转二维坐标算法
ck23456的博客
12-09 1265
三维坐标转二维坐标算法详解
D3D坐标系统下3D世界坐标映射到2D屏幕坐标的平移矩阵
guoyichao的专栏
02-17 1万+
D3D坐标系统下3D世界坐标映射到2D屏幕坐标的平移矩阵，有需要的朋友可以参考下。D3D中绘画3D模型基本上就是靠3个矩阵World, View, Projection来联合进行模型位置定位、视角定位及透视变形的，这与2D绘制一个图形只需要给出屏幕上的一个像素坐标就能进行定位有着非常大的不同。在某些场合，我们想根据屏幕上的像素坐标来绘制3D模型，一般可以通过用正交投影代替透视投影就能轻松进行绘制，但
Python 3D函数图形投影到2D坐标轴上
Angelaboy的博客
04-02 4683
1、contourf函数命令 cmap = matplotlib.cm.jet norm = matplotlib.colors.Normalize(vmin=min(np.array(sol)), vmax=max(np.array(sol))) plt.contourf(X,Y,Z,cmap=cmap,norm=norm,levels=50) #levels 这里的尽量多才能与imshow一致 cbar = plt.colorbar() plt.grid(F
投影变换
深之JohnChen的专栏
03-18 8934
投影变换1 >基本概念    在计算机图形软件中所采用笛卡尔(cartesian)直角三维坐标系统，按照z轴方向的不同有两种形式：    1右手系统：当用右手握住z轴时，大姆指指向z轴的正方向(图3.20(a))，其余四个手指从x轴到y轴形成一个弧。    2左手系统：当用左手握住z轴时，大姆指指向z轴的正方向(图3.20(b)))；其余四个手指从x轴到y轴形成一个弧。 
three.js将一个坐标系下的三维向量映射成另一个相对坐标系下的z为0的二维向量，并且保证向量的模长不变
07-14
要将一个坐标系下的三维向量映射到另一个相对坐标系下的z为0的二维向量，并且保持向量的模长不变，可以进行以下步骤： 1. 定义原始坐标系和目标坐标系之间的转换矩阵。 2. 将原始三维向量与转换矩阵相乘，得到在目标坐标系下的新向量。 3. 将新向量的z分量设置为0。 4. 保持向量模长不变，将新向量缩放到与原始向量相同的模长。 以下是一个示例代码片段，展示了如何使用Three.js将一个坐标系下的三维向量映射到另一个相对坐标系下的z为0的二维向量，并且保持向量的模长不变： ```javascript // 原始三维向量 var originalVector = new THREE.Vector3(2, 3, 4); // 定义原始坐标系和目标坐标系之间的转换矩阵 var transformMatrix = new THREE.Matrix4(); // 这里假设转换矩阵已经定义好了，你可以根据实际情况进行设置 // 将原始三维向量与转换矩阵相乘，得到在目标坐标系下的新向量 var newVector = originalVector.clone().applyMatrix4(transformMatrix); // 将新向量的z分量设置为0 newVector.z = 0; // 保持向量模长不变，将新向量缩放到与原始向量相同的模长 var scale = originalVector.length() / newVector.length(); newVector.multiplyScalar(scale); ``` 在这个示例中，我们首先创建了一个原始的三维向量`originalVector`。然后，你需要定义原始坐标系和目标坐标系之间的转换矩阵`transformMatrix`，这个矩阵可以根据实际情况进行设置。接下来，我们将原始向量与转换矩阵相乘，得到在目标坐标系下的新向量`newVector`。然后，我们将新向量的z分量设置为0，最后根据模长的差异进行缩放，使新向量的模长与原始向量相同。 希望这个示例能满足你的需求！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值