CODEWITHSUNDEEP
react-three-fiber
Ruediger Jungbeck
Ruediger Jungbeck

Reputation: 2964

How to create transparent boxes with react-three-fiber

I want to create a (semi) transparent box

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

I tried several values for opacity, but the box stays non transparent.

What's wrong?

Upvotes: 3

Views: 9883

Answers (1)

hpalu
hpalu

Reputation: 1435

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

you can consult threejs docs for all of these objects: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene all the props and constructor args are listed in there.

and at least once skip through this section real quick https://docs.pmnd.rs/react-three-fiber/API/objects to learn about react semantics.

ps. (0.5, 0.5, 0.5) in javascript just means that it will return the last number. const a = (1, 2, 3) yields 3.

pps. it is better to scale the mesh instead of constructor args. if you change args the object must get re-created because you literally do new BoxGeometry(scale). on the mesh on the other hand it won't have to do it and it's faster.

Upvotes: 4

Related Questions