无法在 React Three Fiber 中旋转网格

Question

我有一个飞机网格，想要使用初始旋转向量进行初始化。但是，设置rotateX属性无效。

<mesh rotateX={1}>
   <planeGeometry args={[5, 5, 64, 64]} />
   <meshStandardMaterial />
</mesh>

我做错了什么？

- Sohail Saha

Answer 1

在 React Three Fiber 中，您可以通过“-”访问对象的属性。因此，它将是：

<mesh rotation-x={1}>
   <planeGeometry args={[5, 5, 64, 64]} />
   <meshStandardMaterial />
</mesh>

或者，您可以传递整个数组 [x, y, z]。

 <mesh rotation={[1, 0, 0]}>
     <planeGeometry args={[5, 5, 64, 64]} />
     <meshStandardMaterial />
 </mesh>

- Maksym Shokin

Answer 2

rotation参数的类型是Euler，它接受一个元组（读作数组）的值：

如docs中所述关于Euler：

Euler(x: Float, y: Float, z: Float, order: String)

• x - （可选）x轴的角度（弧度）。默认为0。
• y - （可选）y轴的角度（弧度）。默认为0。
• z - （可选）z轴的角度（弧度）。默认为0。
• order - （可选）表示应用旋转的顺序的字符串，默认为'XYZ'（必须大写）。

例如，要围绕x轴旋转90度的球体，可以编写以下代码：

<mesh rotation={[-Math.PI / 2, 0, 0]}>
  <planeGeometry args={[5, 5, 64, 64]} />
  <meshStandardMaterial />
</mesh>

- iamkirill

Answer 3

您可以使用useRef()来引用该平面，然后通过调用它在useEffect钩子中旋转它。

示例：

const planeRef = useRef();
useEffect(() => {
    planeRef && planeRef.current.rotation.x = 1.0 * Math.PI/180; // to convert from Deg to Rad.

}, []);

...
return (
<>
<mesh ref={planeRef}>
   <planeGeometry args={[5, 5, 64, 64]} />
   <meshStandardMaterial />
</mesh>
</>
);

- Mahmoud Mohamed Ouf

Answer 4

如果你正在使用TypeScript，那么你应该尝试安装@types/three。

- JULURI SAICHANDU