three将世界坐标转为屏幕坐标

原创已于 2025-07-21 17:34:12 修改 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数码相机

于 2025-05-29 21:57:27 首次发布

three.js 专栏收录该内容

4 篇文章

订阅专栏

1.获取对应的模型世界坐标

// 场景中有一个立方体
const cube = new THREE.Mesh(
    new THREE.BoxGeometry(),
    new THREE.MeshBasicMaterial()
);
scene.add(cube);

// 获取立方体的世界坐标
const worldPos = new THREE.Vector3();
cube.getWorldPosition(worldPos);

2.将世界坐标转成屏幕坐标

// 转换函数
function worldToScreen(position, camera, renderer) {
    const pos = position.clone().project(camera);
    const canvas = renderer.domElement;
    
    // 检查点是否在相机前方 (z值在-1到1之间)
    if (pos.z < -1 || pos.z > 1) {
        console.warn("点在相机后方或视锥体外");
        return null;
    }
    
    return {
        x: Math.round((pos.x + 1) * canvas.width / 2),
        y: Math.round((-pos.y + 1) * canvas.height / 2)
    };
}

// 使用示例
const screenPos = worldToScreen(worldPos, camera, renderer);
console.log(`屏幕坐标: (${screenPos.x}, ${screenPos.y})`);