BJ Patel is an expert user of Umbraco. Always keen to share hints and tips on getting the best out of Umbraco.
Creating function showSpotLight for focused light source in a 3D scene
- Create function showSpotLight() :
This function showSpotLight() adds a spotlight to a 3D scene using THREE.js. The spotlight is yellowish (0xffffbb) with an intensity of 0.5, positioned at coordinates (-1, 5, -1). It emits light within a cone defined by an angle of Math.PI / 3, (penumbra)The spotlight has edges that fade softly making the transition from light to shadow smoother. (distance) The intensity of the spotlight diminishes gradually as you move farther away from it . The spotlight casts shadows (spotLight.castShadow = true) with a bias adjustment (spotLight.shadow.bias = -0.005). A visual helper (SpotLightHelper) is also added to visualize the light's cone and shadows in the scene.
// Function to add a spot light to the scene
function showSpotLight() {
spotLight = new THREE.SpotLight( 0xffffbb , 0.5 );
spotLight.position.set( -1, 5, -1 );
spotLight.angle = Math.PI / 3;
spotLight.penumbra = 0.05;
spotLight.decay = 2;
spotLight.distance = 200;
spotLight.castShadow = true;
spotLight.shadow.bias = - 0.005;
scene.add( spotLight );
const lightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( lightHelper );
}
comments powered by Disqus
Join Our Community
Join Our Community Become a part of our developer community. Share your projects, get feedback, and collaborate with like-minded individuals.
Your contributions help us continue creating valuable content. Consider supporting us by sharing our content.
Junagadh, Gujarat
Latest Blog Posts