What could be causing the shadow casting issue with a 3D model in three.js?

Question

What could be causing the shadow casting issue with a 3D model in three.js?

I am working with 3D models that are structured like this:

https://i.sstatic.net/osXTl.png

My goal is to incorporate a cast shadow similar to this:

https://i.sstatic.net/DBrRr.png

Here is the code snippet responsible for handling the model:

var ambLight = new THREE.AmbientLight( 0x404040 );
this.scene.add(ambLight)

var loader = new THREE.GLTFLoader();
loader.load(path,function (gltf) {
 gltf.scene.traverse( function( model ) {
  if (model.isMesh){ 
   model.castShadow = true; 
  }
 });
 this.scene.add(gltf.scene);
}

I implemented the castSHadow part based on guidance from this StackOverflow thread.

I have attempted using model.castShadow = true, as well as removing the if condition and solely having castShadow, but neither approach has yielded successful results. Is there a step I might be overlooking? For reference, the complete custom layer code can be found here.

javascript three.js 3d mapbox-gl-js gltf

Answer 1

Answer №1

Your scene lacks a shadow-casting light - consider adding an instance of AmbientLight for shadows.
To enable objects to receive shadows, ensure they have Object3D.receiveShadow set to true and are not using unlit materials like MeshBasicMaterial.
Don't forget to globally enable shadows with:
```
renderer.shadowMap.enabled = true;
```

For guidance on setting up shadows, check out this official example.

Answer 2

Your scene lacks a shadow-casting light - consider adding an instance of AmbientLight for shadows.
To enable objects to receive shadows, ensure they have Object3D.receiveShadow set to true and are not using unlit materials like MeshBasicMaterial.
Don't forget to globally enable shadows with:
```
renderer.shadowMap.enabled = true;
```

For guidance on setting up shadows, check out this official example.

Answer 3

Answer №2

After reviewing your code, it appears that you are attempting to overlay a shadow on top of Mapbox.

In addition to the advice provided by @Mugen87, you will need to create a surface below the model you are loading to hold the shadow. It is important to position this surface directly beneath the loaded object and take into account its size to prevent the shadow from extending beyond the surface. By following these steps, you should achieve the desired effect.

https://i.sstatic.net/wPD86.png

You can find the relevant code in this fiddle I have created. I made some adjustments to the lighting and included a light helper for improved clarity.

var customLayer = {
  id: '3d-model',
  type: 'custom',
  renderingMode: '3d',
  onAdd: function(map, gl) {
    // Code block shortened for brevity
  },
  render: function(gl, matrix) {
    // Transformation logic omitted for conciseness
  }
};

Answer 4

After reviewing your code, it appears that you are attempting to overlay a shadow on top of Mapbox.

In addition to the advice provided by @Mugen87, you will need to create a surface below the model you are loading to hold the shadow. It is important to position this surface directly beneath the loaded object and take into account its size to prevent the shadow from extending beyond the surface. By following these steps, you should achieve the desired effect.

https://i.sstatic.net/wPD86.png

You can find the relevant code in this fiddle I have created. I made some adjustments to the lighting and included a light helper for improved clarity.

var customLayer = {
  id: '3d-model',
  type: 'custom',
  renderingMode: '3d',
  onAdd: function(map, gl) {
    // Code block shortened for brevity
  },
  render: function(gl, matrix) {
    // Transformation logic omitted for conciseness
  }
};

What could be causing the shadow casting issue with a 3D model in three.js?

Answer №1

Answer №2

Similar questions

Change this npm script into a gulp task

Using an action code to retrieve the current user from firebase: A step-by-step guide

"Proceeding without waiting for resolution from a Promise's `.then`

Add multiple menu items dynamically to a dropdown menu in TinyMCE, with each menu item directing to the last item clicked when clicked

Deleting a page reference from the page history stack in Angular 4

Filtering Events using Radio Buttons in FullCalendar via JQuery

Unable to invoke .then when simulating axios call within componentDidMount

Retrieve an array from the updated scope

Generate selection choices by looping through a JSON document

AngularJS: Utilizing $http to fetch XML data instead of JSON

Combining Mongoose OR conditions with ObjectIDs

TabContainer - streamline your selection process with inline tabs

The functionality of the TURF booleanwithin feature is malfunctioning and not producing the

Generate an array of objects by combining three separate arrays of objects

Conceal Pictures within Sources Section

PHP: Eliminating Line Breaks and Carriage Returns

The data retrieved from the $.ajax() request in Vue.js is not properly syncing with the table

Inserting a value into a Node/Express session

How can you incorporate TypeScript's dictionary type within a Mongoose schema?

What is the best way to pass values between JSP Expression Language and Javascript?