如何将three.js坐标体系中的坐标转换为二维坐标

背景:
在这里插入图片描述

线条是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.Vector3(pos.x, pos.y, pos.z);
    let vector = a.project(camera);
    let halfWidth = width / 2;
    let halfHeight = height / 2;
    let result = {
        x: Math.round(vector.x * halfWidth + halfWidth),
        y: Math.round(-vector.y * halfHeight + halfHeight)

    };
    return result
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在threejs,可以使用以下方法将屏幕坐标转化为场景坐标: 1. 将屏幕坐标转化为归一化设备坐标(NDC): ```javascript var mouse = new THREE.Vector2(); function onMouseMove( event ) { // 计算鼠标位置的二维向量 mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; } ``` 2. 将NDC坐标转化为三维场景坐标: ```javascript var raycaster = new THREE.Raycaster(); var plane = new THREE.Plane(); var intersection = new THREE.Vector3(); function onMouseMove( event ) { // 计算鼠标位置的二维向量 mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; // 将NDC坐标转化为三维场景坐标 raycaster.setFromCamera( mouse, camera ); raycaster.ray.intersectPlane( plane, intersection ); } ``` 其,`raycaster`是一个射线投射器,用于从摄像机位置向屏幕上的点进行射线投射;`plane`表示场景的一个平面,用于计算射线与平面的交点;`intersection`是计算出的场景坐标。 3. 将场景坐标转化为局部坐标: ```javascript var localIntersection = new THREE.Vector3(); function onMouseMove( event ) { // 计算鼠标位置的二维向量 mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; // 将NDC坐标转化为三维场景坐标 raycaster.setFromCamera( mouse, camera ); raycaster.ray.intersectPlane( plane, intersection ); // 将场景坐标转化为局部坐标 localIntersection.copy( intersection ); localIntersection.applyMatrix4( mesh.matrixWorldInverse ); } ``` 其,`mesh`是场景的一个物体,用于将场景坐标转化为局部坐标。`matrixWorldInverse`是物体的世界矩阵的逆矩阵,用于将场景坐标转化为局部坐标。 最终,`localIntersection`就是屏幕坐标转化为场景坐标

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值