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?
<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.