代码之家  ›  专栏  ›  技术社区  ›  Rashomon

如何在react three-five中使用applyMatrix

  •  0
  • Rashomon  · 技术社区  · 4 年前

    我有这个代码 THREE.js :

      var RASToLPS = new THREE.Matrix4();
      RASToLPS.set(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      mesh.applyMatrix(RASToLPS);
      scene.add(mesh);
    

    我想把它转换成 react-three-fiber 。我尝试了以下代码,但不起作用:

        <mesh 
            {...props}
            geometry = {bufferGeometry}
            material = {material}
            applyMatrix4 = {matrix4 => {
                matrix4.set(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            }}
            >
        </mesh>
    
    0 回复  |  直到 4 年前
        1
  •  2
  •   Rashomon    4 年前

    我设法让它在没有 applyMatrix4 使用以下代码创建网格属性:

        const Component = ({
            bufferGeometry,
            material,
        }) => {
            const mesh = useRef<THREE.Mesh>()
        
            useEffect(() => { 
                if (mesh.current) {
                    const RASToLPS = new THREE.Matrix4()
                    RASToLPS.set(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
                    mesh.current.applyMatrix4(RASToLPS)
                }
            }, [mesh])
        
            return (
                <mesh
                    geometry = {bufferGeometry}
                    material = {material}
                    ref={mesh}
                >
                </mesh>
            )
        }
    

    如果有人知道如何使用 苹果矩阵4 请回答。

        2
  •  0
  •   Jon    4 年前

    不是全部答案(我也有类似的问题),但请在原始代码上尝试以下操作 mesh 属性

    • 更换 applyMatrix4 具有 matrix (applyMatrix 4可能已经失效?)
        3
  •  0
  •   alecmce    2 年前

    你可以将矩阵分解为位置、旋转和缩放,并应用这些。。。这并不理想,因为这基本上是在事后重新组合矩阵,但直到 matrix={matrix} 如果支持,则此操作有效:

    import { Euler, Matrix4, Quaternion, Vector3 } from 'three'
    
    interface Decomposition {
      position: [number, number, number]
      rotation: [number, number, number]
      scale:    [number, number, number]
    }
    
    export function decompose(matrix: Matrix4): Decomposition {
      const position = new Vector3()
      const quaternion = new Quaternion()
      const rotation = new Euler()
      const scale = new Vector3()
    
      matrix.decompose(position, quaternion, scale)
      rotation.setFromQuaternion(quaternion)
    
      return {
        position: position.toArray() as [number, number, number],
        rotation: rotation.toArray() as [number, number, number],
        scale: scale.toArray() as [number, number, number],
      }
    }
    

    然后使用:

    interface Props {
      matrix: Matrix4
    }
    
    export function Example(props: Props): ReactElement {
      const { matrix } = props
    
      const decomposition = useMemo(() => decompose(matrix), [matrix])
    
      return (
        <mesh {...decomposition}>
          ...
        </mesh>
      )
    }