THREE.js中setFromMatrixPosition()获取物体位置失效问题求助

你的问题核心出在矩阵数据完整性和React Three Fiber中变换属性的冲突这两点上，下面一步步帮你排查修复：

1. 矩阵数据不完整导致位置提取错误 #

你打印的matrix.elements只有15个值，但Three.js的Matrix4是标准4x4矩阵，必须包含16个元素。如果保存到服务器时没有存全这16个值，matrix.set(...object.matrix)会初始化出无效矩阵，自然无法提取出正确的位置。

先检查保存场景时的序列化逻辑，确保完整获取矩阵的所有元素：

// 保存物体矩阵时，取完整的16个元素数组
const savedMatrix = Array.from(object.matrix.elements);

2. React Three Fiber中matrix与变换属性的冲突 #

在React Three Fiber中，当你给<mesh>传递matrix属性时，组件会自动设置matrixAutoUpdate=false——这意味着物体的位置、旋转、缩放将完全由matrix控制，你手动设置的position={position}和scale={50}会被直接忽略，甚至会干扰矩阵的正确应用。

修复后的代码示例 #

去掉冗余的position和scale属性，完全依赖matrix控制物体变换：

const ObjectBuilder = (props) => { 
  const { geometry, object } = props; 
  const objRef = useRef(); 
  const loader = new THREE.BufferGeometryLoader(); 
  const parsedGeom = loader.parse( geometry ); 

  // 先校验矩阵数据的完整性
  if (object.matrix.length !== 16) {
    console.error("无效的矩阵数据：需要16个元素");
    return null;
  }

  // 用完整数组初始化矩阵
  const matrix = new THREE.Matrix4().fromArray(object.matrix);
  // 可选：验证提取的位置是否正确
  const position = new THREE.Vector3();
  position.setFromMatrixPosition(matrix);
  console.log('提取的正确位置:', position);

  const handleClick = (e) => { 
    e.stopPropagation(); 
    props.click({ data: objRef }); 
  } 

  return( 
    <mesh 
      name="map_object" 
      ref={objRef} 
      onClick={handleClick} 
      receiveShadow 
      castShadow 
      geometry={parsedGeom} 
      matrix={matrix} // 仅保留matrix，让它全权控制变换
    > 
      <meshStandardMaterial color="white" metalness={0.3} roughness={0.5} /> 
    </mesh> 
  ); 
} 

3. 额外验证点 #

• 保存前打印object.matrix.elements，确认16个值是物体变换后的正确矩阵；
• 如果物体存在父级容器，需要保存世界矩阵而非局部矩阵才能恢复全局位置，可通过object.getWorldMatrix(new THREE.Matrix4())获取后再保存。

这样修改后，加载回来的物体就能正确应用保存的矩阵，回到原本的位置了。

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