首页 > 解决方案 > 为什么 setFromMatrix() 位置不起作用?

问题描述

我正在使用 3D 对象,突然遇到了这个问题。我将我的场景保存在服务器中,这样当我刷新网页时,场景内的对象不会消失,但问题是场景内的对象不在正确的位置,它们总是在 (0, 0, 0) 位置,我认为这不应该发生,因为我已经在渲染之前设置了它的位置,但我不知道我是否以正确的方式进行操作。

const ObjectBuilder = (props) => {
    const { geometry, object } = props;
    const objRef = useRef();

    const matrix = new THREE.Matrix4();
    const loader = new THREE.BufferGeometryLoader();
    const position = new THREE.Vector3();
    const parsedGeom = loader.parse( geometry );

    matrix.set(...object.matrix);

    position.setFromMatrixPosition( matrix );

    const handleClick = (e) => {
        e.stopPropagation();

        props.click({ data: objRef });
    }

    console.log('matrix', matrix); //elements: [0, 0, 1111, 0, 50, 0, 0, 0, 0, 50, 0, 0, 0, 0, 1]
    console.log('position:', position); // x: 0, y:0, z:0

    return(
        <mesh
            name="map_object"
            ref={objRef}
            onClick={handleClick}
            receiveShadow
            castShadow
            scale={50}
            geometry={parsedGeom}
            position={position}
            matrix={matrix}
        >   
            <meshStandardMaterial
                color="white"
                metalness={0.3}
                roughness={0.5}
            />  
        </mesh>
    );
}

非常感谢你们!

标签: three.jsreact-three-fiber

解决方案


console.log('矩阵', 矩阵); //元素:[0, 0, 1111, 0, 50, 0, 0, 0, 0, 50, 0, 0, 0, 0, 1]

这看起来不对。您的评论仅显示 15 个数组元素,尽管该elements属性应包含 16 个。

假设objectTHREE.Object3D以下行的一个实例也是不正确的。

matrix.set(...object.matrix);

您不能将扩展运算符与THREE.Matrix4.


推荐阅读