typescript applyMatrix4在React三纤中的应用

t30tvxxf  于 2023-03-31  发布在  TypeScript
关注(0)|答案(3)|浏览(82)

下面是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>
xqk2d5yq

xqk2d5yq1#

我使用以下代码在没有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>
        )
    }

如果有人知道如何使用applyMatrix4请回答。

rwqw0loc

rwqw0loc2#

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

  • applyMatrix4替换为matrix(applyMatrix4可能已失效?)
dl5txlt9

dl5txlt93#

你可以将矩阵分解成位置、旋转和缩放,并应用这些......不理想,因为这本质上是在事实发生后重新组合矩阵,但在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>
  )
}

相关问题