Skip to main content

ShadowDropper

🌒 Adding Realism​

Have you ever wondered what makes a scene look realistic? Adding Shadow to 3D objects may quickly add depth to your creations.😎 In this tutorial, we'll show you how to use Shadow Dropper to quickly apply shadows. In less than 5 minutes, you can create realistic shadows for all the meshes inside your scene.⏱️

First, let's set up a simple scene!

👀 If you haven't started there, check out that tutorial first!

🎲 Creating a Cube Mesh​

Let's start by adding a Cube, which we can dissect. We will create a Cube with 3x3x3 dimensions and use red color for the material.

const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
const redMaterial = new THREE.MeshStandardMaterial({color: "red"});
const redCube = new THREE.Mesh(cubeGeometry, redMaterial);
redCube.position.set(0, 1.5, 0);

Now, we will add the Cube to the Scene. We must also add the cube to components.meshes, which is simply an array of all the meshes in the Scene 🗄️. components.meshes acts as a store to help you manage your elements centrally.

scene.add(redCube);
components.meshes.push(redCube);

🌚 Adding Beautiful Shadow​

This completes our scene setup. Let's now include Shadows, we'll use ShadowDropper and pass components as an argument to it.🔗

const shadows = new OBC.ShadowDropper(components);

Shadow Dropper Component not only adds shadows to the scene, but it also helps you manage the Shadows. To obtain the required results, you can alter the ShadowDropper parameters.🔧

shadows.shadowExtraScaleFactor = 10;
shadows.darkness = 2;
  • shadowExtraScalarFactor - With this, the shadow's area of impact can be adjusted.
  • darkness - This is used to increase or decrease the intensity of Shadow.
    SHADOW and realism ✨

    Read the Shadow Dropper API for more on this. The Shadow Dropper API offers more configuration options to render realistic shadows.

🎨 Rendering Shadow​

Now, we will use Shadow Dropper to create shadows for the element. We will use renderShadow() to generate shadow for the cube we created.

shadows.renderShadow([redCube], "example");

renderShadow requires two parameter, the element and a shadowID. shadowID needs to be unique for the entire scene.

Deleting Shadows

❎ If you want to safely delete the shadow using shadowID you can call shadows.deleteShadow(shadowId);

Congratulations 🎉 on completing this tutorial! Now you can add shadows to BIM Models or any 3D Object in minutes using Shadow Dropper 🌗 Let's keep it up and check out another tutorial! 🎓