屏幕坐标转three.js坐标

将屏幕坐标转变成threejs空间坐标：

function transToThreeCoord(x,y){let mouse = new THREE.Vector3();mouse.x = (x/window.innerWidth)*2 -1;mouse.y = -(y/window.innerHeight)*2 + 1;return mouse;
}

注意：在实际使用中，画布的宽高度并不一定是window.innerWidth或window.innerHeight，要根据画布实际的宽高度进行替换

推导过程如下：

上图中的式子化简一下就能得到transToThreeCoord中的公式

three.js坐标转屏幕坐标

将three.js三维坐标转换成屏幕上的二维坐标

/**
* 将three.js三维坐标转换成屏幕上的二维坐标
* @param THREE.Vector3 vector three.js三维坐标
* @return {x:int,y:int} 屏幕坐标
*/
function transToScreenCoord(vector) {var screenCoord = {};vector.project(camera);screenCoord.x = (0.5 + vector.x / 2) * window.innerWidth; screenCoord.y = (0.5 - vector.y / 2) * window.innerHeight;return screenCoord;
}

注意：在实际使用中，画布的宽高度并不一定是window.innerWidth或window.innerHeight，要根据画布实际的宽高度进行替换

接下来解释一下这个转换的过程：

vector.project(camera) 这句的意思是，将一个三维坐标，投影到相机平面上，使之变成一个二维坐标。需要注意的是，投影得到的结果是一个标准向量(或者叫单位向量)，其值是限定在[-1,1]范围内的。并且，这个向量是定义在以屏幕中心为原点的坐标系里的，这个坐标系和屏幕坐标系的关系，就像下图一样：

假如经过投影之后的点就是上图中的点A(0.3,0.5)，屏幕坐标系是sx-s0-sy,相机平面坐标系是tx-t0-ty,坐标系的各项参数已经标在图上，试着求A点在屏幕坐标系中的坐标。你求一遍的话，就会理解

screenCoord.x = (0.5 + vector.x / 2) * window.innerWidth;
screenCoord.y = (0.5 - vector.y / 2) * window.innerHeight;

的意思。

threejs坐标转换相关推荐

threejs 将屏幕坐标转换成3d中的坐标。
将当前屏幕上的坐标转换成3d中的坐标pos 是当前canvas屏幕上的坐标,targetZ 是物体距离原点的距离 private get3DPosByCanvasPos (pos: THREE.Vec ...
ThreeJS 屏幕坐标与世界坐标互转
文章目录屏幕坐标系和标准设备坐标屏幕坐标转世界坐标世界坐标转屏幕坐标要理解坐标系间的转换过程,需要提前了解: ThreeJS 中的几种坐标系屏幕坐标系和标准设备坐标系不想看链接中的 ...
threejs对象拾取
对象拾取对象拾取也就是要获得鼠标事件发生位置的图形对象.在threejs中,是通过Raycaster 对象来拾取对象的,ray是射线,caster是投射器,从字面上即可理解其工作原理是:从某个方向发 ...
mapbox-gl添加threejs飞线
文章目录前言飞线实现 1 初始化地图并加载three图层 2 绘制飞线几何体将几何体正确定位在mapbox上正确操作BufferGeometry几何体 3 tween实现动画全部代码总结 ...
THREEJS在场景图上动态标识一些文字方法二（文字精灵sprite）
threejs文字精灵sprite的实现 1.手动添加文字精灵 2.通过json动态获取文字精灵,并进行交互 3.point模型只表示位置 4.CircleGeometry实现 5.3.PlaneGe ...
ThreeJs做智慧城市项目后记
随着时间的推移技术的进步,前端越来越杂了,但是也越来越精彩了.只是会用一点ThreeJs,对于WebGl的原理并没了解过,这并不影响我们利用ThreeJs去做出一个非常炫酷的项目. 开始新世界的大门 ...
threejs 物体根据相机位置显示_threejs
threejs 点击数: 10347 简介既然我们可以使用canvas元素创建纹理,Three.js也给我们提供了可以实现video创建纹理的方法.我们通过Three.js提供的VideoTextur ...
Threejs实现绘制地球，地理位置标注、经纬度转换世界坐标threejs坐标
1,介绍该示例使用的是 r95版本Three.js库. 主要实现功能:绘制地球和地理位置进行标注效果图如下: 2,主要说明准备一张地图,创建一个球体并进行贴图,把地理位置经纬度转换成threej ...
threejs（一）：初步认识与使用
应项目需求,学习threejs将近半个月,现在总结一下我从网上搜集的比较有份量的资料和在项目中踩到的大小坑,以下内容如果有误,感谢各位大神不吝赐教. 一.threejs学习的资料 Threejs入门指 ...

threejs坐标转换

屏幕坐标转three.js坐标

three.js坐标转屏幕坐标

threejs坐标转换相关推荐

最新文章

热门文章