Three.js中GetWorldPosition()/localToWorld()获取世界坐标不准如何解决

安全阿岳

2026-9-25

问题解决方法

你的代码错误点在于使用了被相交物体的本地原点坐标转世界坐标，而非射线击中的实际交点坐标。Three.js的射线相交结果intersects[0]已经提供了准确的交点世界坐标point属性，直接使用该属性即可。

修正后代码：

// 如果是跟随鼠标点击位置发射射线，需要先对鼠标坐标做归一化处理，示例如下：
// const mouse = new THREE.Vector2()
// mouse.x = (event.clientX / window.innerWidth) * 2 - 1
// mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
// raycaster.setFromCamera(mouse, camera);

raycaster.setFromCamera(new THREE.Vector2(), camera);
const intersects = raycaster.intersectObjects( scene.children, true );
if(intersects.length > 0){
    const hitResult = intersects[0];
    const cube = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshNormalMaterial() );

    // 直接使用相交结果自带的交点世界坐标
    cube.position.copy(hitResult.point);
    // 可选：如果需要立方体贴在物体表面不嵌入，可沿相交法线偏移半个立方体边长
    // const offset = hitResult.normal.clone().multiplyScalar(0.5);
    // cube.position.add(offset);
    scene.add(cube);
}

补充说明：

你当前代码中setFromCamera传入的是无参数的THREE.Vector2()，对应值为(0,0)，这个坐标对应画布的左上角，如果你需要从鼠标点击/悬浮位置发射射线，需要先将鼠标像素坐标归一化到[-1, 1]区间，参考代码中注释部分的写法。
如果被相交的物体自身有父级变换，intersects[0].point也已经自动计算了所有父级的矩阵变换，不需要你额外做localToWorld转换。