如何在反应三纤维中使用applyMatrix4

Question

我在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>

Answer 1

我使用以下代码使其在没有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，请回答。

Answer 2

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

• 用matrix替换applyMatrix4(applyMatrix4可能已失效？(

Answer 3

您可以将矩阵分解为位置、旋转和缩放，并应用这些。。。这并不理想，因为这实际上是在事后重新组合矩阵，但在支持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>
)
}