What is the mechanism behind shadows in THREE.js version 75?

Currently, I am exploring a tutorial on Three.js that introduces the concept of shadows, which can be implemented using methods like castShadow, receiveShadow, and enabling shadowMap.

However, the example code provided is for Three.js r69, while the latest version at the time of writing this question is r75. Unfortunately, the method for casting shadows in the r69 code does not function correctly in the newer versions.

Furthermore, the current Three.js documentation lacks information on attributes such as shadowMapenabled, shadowMap.enabled, and other related methods.

Any suggestions on how to address this issue?

Answer №1

There have been some changes to the shadow map properties in recent versions, but they still function similarly.

To configure the renderer for shadow maps (and select a more computationally expensive shadow map type):

var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

Setting up the light (noting that it also works with THREE.PointLight):

var light = new THREE.PointLight( 0xffffff, 1, 100 );
light.position.set( 0, 12, 0 );
light.castShadow = true;            // default false
light.shadow.mapSize.width = 1024;  // default 512
light.shadow.mapSize.height = 1024; // default 512
light.shadow.camera.near = 2;       // default 0.5
light.shadow.camera.far = 100;      // default 500
//light.shadow.camera.left = 500    // Not sure about this one + 
                                    // right, top and bottom, Do they still do anything?
scene.add( light );

If you encounter issues with certain properties listed in the current documentation, check your console for API change notifications.

Creating objects that cast and receive shadows remains the same as before:

//Creating a box
var boxGeometry = new THREE.BoxGeometry(1, 1, 1);
var boxMaterial = new THREE.MeshPhongMaterial({ color: 0xdddddd, specular: 0x999999, shininess: 15, shading: THREE.FlatShading });
var box = new THREE.Mesh(boxGeometry, boxMaterial);
box.castShadow = true;
scene.add(box);

//Creating a plane
var planeGeometry = new THREE.PlaneGeometry(20, 20, 32, 32);
var planeMaterial = new THREE.MeshPhongMaterial({ color: 0x00dddd, specular: 0x009900, shininess: 10, shading: THREE.FlatShading });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
scene.add(plane);

Positioning the plane beneath the box will make it receive a shadow.

Check out a working codepen example

EDIT In the current version of THREE.js, the scene must be rendered at least twice to display shadows.

THREE.js r75.

Answer №2

Below is a straightforward code snippet for creating shadows in three.js, which also includes the shadow camera helper:

var light = new THREE.SpotLight( 0xFFAA55 );
    light.castShadow = true;
    light.position.set( 1, 3, 5 );
    light.shadowCameraNear = 0.5;
    scene.add( light );
    helper = new THREE.CameraHelper( light.shadow.camera );
        scene.add( helper );

Check out the code here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Notification box is not showing up

I've been working on a JavaScript function that triggers when a form submission button is clicked for validation purposes. If all criteria are met, a standard confirm window pops up to check if the user wants to proceed with the form submission. Howev ...

What causes the low Performance score of a default NextJS Application with no content?

Just started experimenting with my initial Next.js project. Upon generating a new project using create-next-app, I decided to test its performance with the web application 'Lighthouse'. Surprisingly, although most other metrics scored above 90, ...

The function Model.find({}) is coming back as empty despite the fact that there are records present in the

While I can successfully add data to the users collection using my '/sign-up' route, I'm facing an issue with reading all the documents from the users collection. Instead of the expected data, all I receive is an empty array. { "status": ...

Optimal method for retrieving data from a JSON object using the object's ID with a map

Can you teach me how to locate a json object in JavaScript? Here is a sample Json: { "Employees" : [ { "userId":"rirani", "jobTitleName":"Developer", "preferredFullName":"Romin Irani", "employeeCode":"E1", "region":"CA", "phoneNumber":"408-1234567", " ...

What is the best way to contain the CSS for dynamically generated HTML within a div element without impacting other elements on the page?

I am currently facing a challenge where users can input any HTML into a text box, and I need to manipulate that HTML by identifying elements such as anchor tags or divs. To achieve this, I have created a hidden div and copied the pasted HTML into it using ...

Synchronization of movements in a multiplayer gaming environment

I have been experimenting with a basic demo that allows me to explore a first-person environment using three.js. My goal is to spawn another player when they join, and synchronize the movement of both players so they can see each other moving around the m ...

`I'm experiencing issues with my AJAX call when using Django`

As part of my blog practice, I'm trying to ensure that all notifications are marked as seen when a user views them. This functionality works fine when I manually go to the URL, but it's not working when using Ajax. Here is the JavaScript code: ...

Creating dynamic HTML elements by utilizing both jQuery and native JavaScript within the DOM

I have an old application that I'm revamping, and instead of using the node's id, I want to apply the DOM structure to its class. Here is a snippet of my code where I am attempting to combine jQuery (selecting the node by its class) with the exi ...

Find the target element containing a child element with specific CSS attribute using JQuery

I am attempting to select the element with the class "keyimage" that contains an a tag with a specific background image. This is the code I have written: $( ".keyimage" ).has( "a[style^='background-image: url('https://example.com/wp-content/upl ...

I'm having trouble with my vue props, can you lend a hand in resolving them

Recently, I delved into learning Vue.js and started implementing it in my project. The code snippet in my App.vue file is: In the second line of the code above, I passed a string "hello" as an attribute that is captured in the following code: App.vue: ...

When using `this.array.find` within methods or computed properties in Vue, it sometimes returns

Within a component, I am receiving an array called approvalOptions from getters that contains a certain value I need to find. I have attempted the following methods: Using it within methods (read from ...mapGetters) as shown below methods: { approva ...

I am experiencing an issue where the data stored in an array is not being displayed on the screen for some unknown

Currently, I am working on a tutorial for the PERN stack and encountering an issue when trying to display the contents of an array under title and content. Unfortunately, nothing is being printed to the screen. The problem seems to be within this section ...

Tips for disabling scrolling on touch screens for input elements

I am facing an issue with a modal that is positioned on top of a scrollable document body. I am trying to prevent the scrolling of the document when I swipe my finger on the modal. $(document).on('touchstart touchmove', function(e){ e.preventDef ...

Is there a way to incorporate page animations when utilizing the <a href> tag in HTML?

I have created several HTML files. On the main page, I simply inserted some code like this: <a href="new.html> <img src="img/button" id="buttonid"> </a> When I click the button, it takes me to the new.html page. I would like ...

Stop Jade from collapsing the directory hierarchy

When it comes to implementing a build solution using NPM scripts instead of Gulp or Grunt, I have been facing some challenges in managing multiple Jade files efficiently. I've referred to resources like and for guidance. The Jade CLI allows for com ...

Get the file without having to reload the page with the help of JSP, Servlet, or Ajax

When a user clicks the download button, I have a file to be downloaded from the servlet without refreshing the page. How can this functionality be achieved? Below is my JSP code. Users input credentials in the search box to download the file, so the file s ...

A scheduled task in Node.js set to run every day at 2 AM

My nodejs cron currently runs every 5 hours using the code below: cron.schedule("0 0 */5 * * *") How can I modify it to run daily at 2 AM instead? Thank you ...

Altering the texture of a mesh in Three.js can completely transform the appearance

I'm facing an issue with my model that contains multiple meshes. I only want to apply a texture to one specific mesh, but when I do, the entire model ends up with the same texture. What could be the mistake I'm making? function load_models(callb ...

"Utilizing Bootstrap Tour for Easy Navigation: Automatically Scroll Back to the Top with

I have a Bootstrap tour set up with code that is meant to capture the user pressing the end tour button and scroll them back to the top of the screen. However, currently the code runs when a new popover loads instead of when the end tour button is clicke ...

Ways to structure this updateone query for mongoose formatting

UPDATE: After making adjustments to the query using arrayFilters recommended by someone here, the query is returning success. However, the values in the database are not being updated. I am attempting to update specific fields within a MongoDB collection ...