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

原创已于 2022-05-21 15:34:23 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-05-21 15:33:06 首次发布

three.js 笔记专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了一个使用Three.js库的场景中，如何将三维空间中的坐标点转换为二维屏幕坐标的过程。通过获取元素大小，创建THREE.Vector3对象，应用相机投影，再进行坐标转换和归一化，最终得到适合在屏幕上显示的二维坐标。这对于在3D图形中定位2.5D图标尤其有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

线条是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
}