reactjs 无法在React Three Fiber中旋转补片

kgqe7b3p 于 2022-12-26 发布在 React

关注(0)|答案(3)|浏览(120)

我有一个平面网格，我想用一个初始旋转矢量来初始化它。但是，设置rotateX属性不起作用。

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

我哪里做错了？

3条答案

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

rotation arg的类型为Euler，它取一个值切片（读取数组）：
正如在关于欧拉的文档中所写的：
欧拉（x：浮点，y：浮动，z：浮动，顺序：字符串）

例如，要将球体绕x轴旋转90度，请编写以下命令：

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

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