React-three-fiber with Drei

The amazing powers of the React component based way of working starts coming to fore when the community starts building components that can be used by others. The Drei (which means three in German) library is a great example of this. It offers a ton of amazing components that can be used to create stunning 3D scenes with minimal code.

To start with let’s simplify the OrbitControls from the previous post by simply replacing them with those provided by drei. Not only does it make the code simpler, it also adds a few more features like damping and autoRotate. I also added a Transform Control from drei to allow the viewer to reposition the cube object. This start interfering with the OrbitControls. However, looks like the creators of drei already thought about this and a simple fix is to add the defaultControls attribute to the OrbitControls. It seems this tells r3f to only use the TransformControls when the are explicitly selected by the user, and use OrbitControls otherwise.

To make the scene a bit more 3D and realisting, we can add shadows. We can easily do that by adding the following attributes

1. Add shadows to Canvas
2. Add castShadow to the directionalLight, cube, and sphere.
3. Add receiveShadow to the plane. And voila, we have shadows!

The plane and the objects are looking quite good, but the area around the plane is too dull. Let’s add just a little bit of flourish by adding a sky around the plae. The Sky component allows us to add a sky to the scene.