如何使用react-three-fiber创建透明盒子

Question

我想创建一个(半)透明的盒子

<mesh position={position} transparent opacity={0.1}>
  <boxGeometry args={scale}>
    <meshPhingMaterial color={(0.5, 0.5, 0.5)} opacity={0.1} transparent />
   </boxGeometry>
</mesh>

我尝试了几个不透明度的值，但长方体仍然不透明。

怎么了？

Answer 1

<mesh position={position} scale={scale}>
  <boxGeometry />
  <meshPhongMaterial color="#ff0000" opacity={0.1} transparent />
</mesh>

您可以查阅所有这些对象的三个文档：https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene在那里列出了所有的属性和构造函数参数。

至少跳过一次这一节，真正快速地学习https://docs.pmnd.rs/react-three-fiber/API/objects以了解react语义。

ps。javascript中的(0.5, 0.5, 0.5)只是意味着它将返回最后一个数字。const a = (1, 2, 3)的收益率为3。

pps。最好是缩放网格而不是构造器参数。如果您更改了args，则必须重新创建对象，因为您实际上是在执行new BoxGeometry(scale)。另一方面，在网格上，它不需要这样做，而且速度更快。