无法在 React Three Fiber 中旋转网格

Question

我有一个平面网格，我想用初始旋转向量对其进行初始化。但是，设置rotateXprop 不起作用。

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

我究竟做错了什么？

Answer 1

在 React 3 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>

Answer 2

rotationarg 是一种类型Euler，它采用一个值的元组（读取数组）：

正如有关欧拉的文档中所写：

Euler( x : 浮点型, y : 浮点型, z : 浮点型, 顺序 : 字符串 )

• 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>