无法在 React Three Fiber 中旋转网格答案

【问题标题】：Cannot rotate mesh in React Three Fiber无法在 React Three Fiber 中旋转网格
【发布时间】：2022-12-24 00:19:38
【问题描述】：

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

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

我究竟做错了什么？

【问题讨论】：

标签： reactjs three.js react-three-fiber react-three-drei

【解决方案1】：

如果您使用的是打字稿，那么您应该尝试安装@types/three

【讨论】：

【解决方案2】：

rotation arg 是 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>

【讨论】：

【解决方案3】：

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

【讨论】：