Three.js中能否获取渲染后向量及线几何中点的2D坐标？

完全可以获取，核心是利用Three.js提供的坐标转换能力，将3D空间中的点映射为屏幕2D坐标，具体实现如下：

核心逻辑 #

Three.js的Vector3.project(camera)方法能把世界空间的3D点转换为裁剪空间坐标（范围[-1, 1]），再将裁剪空间坐标映射到画布的像素坐标即可得到最终的2D位置。

线几何体的实现示例 #

假设你已有线对象line、相机camera和渲染画布canvas，可以这样遍历线的所有顶点获取屏幕坐标：

// 从线的BufferGeometry中提取顶点数据
const positionAttr = line.geometry.attributes.position;
const screenPoints = [];

for (let i = 0; i < positionAttr.count; i++) {
    // 创建局部空间的3D点
    const localPoint = new THREE.Vector3();
    localPoint.fromBufferAttribute(positionAttr, i);
    
    // 将局部点转换为世界空间（线有位移、旋转、缩放时必须做这一步）
    localPoint.applyMatrix4(line.matrixWorld);
    
    // 转换为裁剪空间坐标
    localPoint.project(camera);
    
    // 映射为画布像素坐标（注意翻转Y轴，适配画布坐标系）
    const screenX = (localPoint.x + 1) * canvas.width / 2;
    const screenY = (1 - localPoint.y) * canvas.height / 2;
    
    screenPoints.push({ x: screenX, y: screenY });
}

关键注意事项 #

• 变换处理：如果线对象设置了position、rotation、scale等属性，必须通过applyMatrix4(line.matrixWorld)将局部顶点转为世界空间顶点，否则坐标计算会出错。
• 实时更新：若相机或线对象有移动、旋转操作，需要在动画循环中重新计算坐标，才能得到最新的屏幕位置。
• 旧版本兼容：如果使用Three.js旧版的Geometry（非BufferGeometry），直接遍历line.geometry.vertices数组即可，无需从BufferAttribute提取数据。

内容的提问来源于stack exchange，提问作者bolshevik