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

已于 2023-07-29 14:16:59 修改
阅读量313 收藏
点赞数
分类专栏： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
D3D坐标系统下3D世界坐标映射到2D屏幕坐标的平移矩阵
guoyichao的专栏
02-17 1万+
D3D坐标系统下3D世界坐标映射到2D屏幕坐标的平移矩阵，有需要的朋友可以参考下。D3D中绘画3D模型基本上就是靠3个矩阵World, View, Projection来联合进行模型位置定位、视角定位及透视变形的，这与2D绘制一个图形只需要给出屏幕上的一个像素坐标就能进行定位有着非常大的不同。在某些场合，我们想根据屏幕上的像素坐标来绘制3D模型，一般可以通过用正交投影代替透视投影就能轻松进行绘制，但
three.js加载obj+mtl文件源码
03-21
在三维图形渲染领域，Three.js 是一款非常流行的 JavaScript 库，它使得在浏览器中创建复杂的3D场景变得简单。本教程将深入探讨如何使用 Three.js 加载 obj 和 mtl 文件，以及如何为 obj 模型添加纹理。 首先，我们...
three.js 3D坐标转化为2D屏幕坐标
你蠢哭我咯的博客
07-13 5910
//创建一个3D坐标 var vector = new THREE.Vector3(); //获取模型 var obj = scene.getObjectByName(data.list[0].modelName); vector = vector.setFromMatrixPosition(obj.matrixWorld).project(camera); var
three.js 3d坐标转平面坐标
02-08
一个小demo，3d空间坐标转平面坐标，div固定于3d空间系中得某一点
三维坐标转二维坐标算法
最新发布
ck23456的博客
12-09 1098
三维坐标转二维坐标算法详解
如何将three.js坐标体系中的坐标转换为二维坐标
Think More 的博客
05-21 1158
背景： 线条是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 坐标系转化
Define_best的博客
07-28 2233
ThreeJS 坐标系转化（屏幕坐标与世界坐标互转）
Three.js获取鼠标点击的三维坐标示例代码
12-09
总的来说，Three.js中获取鼠标点击的三维坐标涉及到视口坐标到世界空间坐标的转换、射线投射以及物体交点的检测。这些技术在实现交互式三维应用时非常关键，例如选中物体、触发事件或进行拖放操作。理解这些步骤对于...
three.js3D地形.zip
07-13
这包括草地、岩石、水体等不同材质的纹理，通过UV坐标映射到地形的每个面片上。 三、地形细节增强 1. 分割与平滑：为了增加地形的细节，我们可以对原始高度图进行细分，增加更多的顶点和面。同时，应用平滑算法，...
基于threejs的2.5D地图项目.zip
05-30
2.5D地图通常是指介于2D和3D之间的地图表示形式，它在二维平面上展示三维空间的简化视图。这种技术在保留三维信息的同时，降低了视觉复杂性，提高了用户体验。在Three.js中实现2.5D地图，可以通过控制视角和光照，使...
threejs三种坐标（世界坐标，局部坐标，屏幕坐标）转换
m0_73495473的博客
08-08 3145
获取点击到的三维坐标图形，将其转化为屏幕坐标，获取其屏幕坐标的x,y值。三种坐标系的转换
threejs二维坐标与三维坐标的互转
凌风子夜
09-29 9108
屏幕坐标转为为空间坐标 应用场景，射线检测，使用鼠标点击屏幕，获取一个屏幕坐标A(x，y)，必须转换为空间坐标才能在threejs中使用。 示例代码： var mouse=new THREE.Vector2(); mouse.x=(event.clientX/window.innerWidth)*2-1; mouse.y=-(event.clientY/window.inn...
二三维联动小思考
webgpu
12-11 2998
背景 一般游戏里比如LOL有个小地图，有的软件还有一个像是俯视图的二维小地图，这里如何同步两边的transform呢？ 第一种想法 3D是主场景，然后2D直接上方一个正交camera实时绘制 存在问题 这样绘制两次，不好 这样如果要操作2D视图，那怎么办 第二种想法 直接绘制一个2D场景 比如3D用了three 2D就拿个cocos?laya?pixi这些具备2D能力的库来单独构造一个2D场景 这样也绘制两次，但是2D场景一般来说就是sprite集，会比3D场景绘制两次好太多了 可以操作2D视图 如
Threejs进阶之十八:使用ExtrudeGeometry从二维图形创建三维几何体
九仞山的专栏
06-08 2127
详细介绍了使用ExtrudeGeometry从二维图形创建三维几何体的方法和步骤
three.js中坐标系转换以及camera的position、lookAt与up属性理解
weixin_50867227的博客
09-01 6718
three.js中坐标系转换以及camera的position、lookAt与up属性理解
Three.js坐标系与变换矩阵快速入门
新缸中之脑
01-27 5026
很多东西汇集在一起构成一个美丽的 3D 场景，例如光照、材质、模型、纹理、相机设置、后期处理、粒子效果、交互性等等，但无论我们创建什么样的场景，没有比这更多的了 比组成它的乐曲的排列和运动更重要。要创建建筑效果图，我们必须成为建筑师和室内装饰师。我们必须考虑建筑物和里面房间的比例，巧妙地放置家具和灯具。在自然场景中，无论是一朵花的特写，还是广阔的山景，我们都需要以自然而令人信服的方式安排树木和岩石，或叶子和花瓣。
threejs 模型 世界坐标系和设备坐标系
m0_52009348的博客
04-10 1954
开发中遇到需求需要点击屏幕位置处，生成一个类似圆形弹窗面板，这个交互需要进行的坐标转换为模型坐标（局部坐标）=>场景坐标（世界坐标）=>标准设备坐标=>屏幕空间坐标，也就是一个将3D坐标转换为2D坐标的过程，话不多说，上代码！
3D坐标在二维屏幕上的映射
x2017x的博客
09-27 2311
三维空间的物体点坐标设为（x,y,z），求解其在屏幕上的映射点，需要的输入为：三维坐标点、pvm矩阵（projection * view * model）、渲染屏幕的宽高及起始点（left,up,width,height）。 cv::Point ptCast(Vec3f pos3D, int* viewPort, float* pmv) { GLKMatrix4 pmv...
矩阵变换实现从二维到三维坐标映射的方法探究
热门推荐
lordwish的专栏
03-12 1万+
如果我们面前有一张二维平面图和一个三维模型，如何让平面图和模型上的物体产生空间对应关系呢？本文将针对这一问题进行探究。 问题背景 举个例子，下图左边是我家房子的平面图，右边是我家房子的三维模型。家里装修我买了一个沙发，我在平面图上把沙发的位置标出来，在客厅区域放置一个图标，然后我希望三维模型能在客厅的相应位置自动添加一个沙发。 简单来讲就是如何把二维平面上的一个二维坐标一一映射到...
three.js三维向量映射成z为0的二维向量，并且保证向量的模长不变
07-14
要将一个Three.js中的三维向量映射为z为0的二维向量，并且保持向量的模长不变，你可以使用如下的方法： 1. 创建一个三维向量，将其z分量设为0，保持其x和y分量不变。 2. 计算原始三维向量的模长。 3. 对映射后的二维向量进行缩放，使其模长与原始三维向量相同。 下面是一个示例代码片段，展示了如何实现这个映射过程： ```javascript // 原始三维向量 var originalVector = new THREE.Vector3(2, 3, 4); // 将z分量设为0，生成映射后的二维向量 var mappedVector = new THREE.Vector3(originalVector.x, originalVector.y, 0); // 计算原始向量的模长 var originalLength = originalVector.length(); // 计算缩放比例 var scale = originalLength / mappedVector.length(); // 缩放二维向量 mappedVector.multiplyScalar(scale); ``` 在这个示例中，我们首先创建了一个原始的三维向量`originalVector`，然后将其z分量设为0，生成了一个映射后的二维向量`mappedVector`。接下来，我们计算了原始向量的模长`originalLength`以及缩放比例`scale`，最后使用`multiplyScalar`方法缩放了映射后的二维向量，使其模长与原始向量相同。 希望这个示例对你有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值