Faces in ThreeJS Object Group lack shadows

I'm encountering an issue where shadows aren't being received on the faces within an Object3D group.

Although the shadows are cast from the objects and received by the ground, they don't interact with each other as expected.

I've looked for similar problems online but haven't found anything that matches my situation, leading me to believe that I may have set something up incorrectly.

Is there anyone willing to help troubleshoot? I have provided a working example in the JSFiddle link below. My suspicion is that the issue lies in how I've configured the faces of the objects.

Check out the JSFiddle here

var createObject = function(width, height, depth){
    console.log('createObject called');
    var geometry = new THREE.BoxGeometry( width, height, depth );
    var materials = [
        new THREE.MeshLambertMaterial({ color: 0xffffff }),
        new THREE.MeshLambertMaterial({ color: 0xffcc00 }),
        new THREE.MeshLambertMaterial({ color: 0xffffff }),
        new THREE.MeshLambertMaterial({ color: 0xffcc00 }),
        new THREE.MeshLambertMaterial({ color: 0xffffff }),
        new THREE.MeshLambertMaterial({ color: 0xffcc00 })
    ];
    var texture = new THREE.MeshFaceMaterial( materials );
    texture.minFilter = THREE.LinearFilter;
    var object = new THREE.Mesh(geometry,texture);
    object.recieveShadow = true;
    object.castShadow = true;
    return object;
}

Answer №1

In order to enable shadows on your meshes, make sure to activate the receiveShadow flag. You can refer to the documentation of the parent class Object3D for more information regarding this setting.

Check out this working example here: https://jsfiddle.net/woa7kzz1/

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

Monitoring the validity of form inputs using AngularJS's $watch functionality

Why isn't this deep watch triggering as expected? http://plnkr.co/edit/6FxMS4RlfljBMkprZYQs?p=preview Could it be that the watch function is not checking Angular attributes starting with $? If so, is there a way to monitor changes in validity beyond ...

Adjust the position of the object in relation to its current orientation

I am facing a challenge in moving an object upwards in relation to its current direction. I am working with a CubeGeometry that has a specific height, and my goal is to place an object at the top of it and have it rotate along with the cube. Simply adding ...

Vue Dev Tools is not updating data in Ionic Vue 3

There seems to be an issue with the updating of Reactive and Ref data in Vue Dev Tools when changes are made in an input field bound with v-model within a form. The updated data is only visible when I interact with another component and then return to the ...

Unrecognized OnClick Function in AJAX

As someone who is relatively new to AJAX, I am trying to work on a project that involves fetching data from a route and using AJAX to create a table. Within this table, each row has a button that, when clicked, should trigger a POST request to add some dat ...

Solution for displaying table cells in IE 7 and lower using Javascript

Lately, the community has come up with some amazing tools to push early versions of IE beyond their intended capabilities. For example, using multi-column CSS selectors. However, I've been struggling to find a JavaScript that can be loaded conditional ...

React Native (or React) utilizes separate TypeScript modules to detect and respond to style adjustments for dark mode

Objective: Add a dark mode feature to a react native application. A brief overview of the system: File structure: Profile.ts ProfileCss.ts constants.ts In my app, I've organized styles in separate .ts files and exported them as modules to keep them ...

Determine with jQuery whether a URL already contains a query string

When the site is loaded for the first time and a user selects a hospital location from the dropdown menu, the URL should have hos=somelocation as a query string parameter. If the URL already contains other query string parameters like then I need to chec ...

Optimizing shadow rendering in Three.js for top-notch performance

I've been working on a Minecraft project using Three.js, but I've run into some performance issues specifically when rendering shadows. If you'd like to check out the demo, you can find it here: You'll notice that the FPS drops below ...

Issue with Angular 5: Unable to update template within Observable sequence

When I have a component and need to display a loader Here is the component code: ngOnInit() { this.route.params .do(x => this.contentLoading = true) .switchMap(x => this.getClientSearchResults()) .subscribe(x => { ...

There is an issue with Nuxt 3 layers not functioning properly when trying to access a project page from a different

Is there a way to make a project function independently while still being accessible through layers and able to run smoothly? The current project structure is as follows: ...

React/Redux - Issue with rest operator functionality in component

Here is the initial state I am working with: const initialState = { selectedGroup: {}, groups: { rows: [], total: null }, offset: 0, range: 15, loading: false, error: null } Within a reducer function, I have this case for successful ...

Incorporating HTML and JavaScript into TypeScript: How to Embed a Shopify Buy Button in a .tsx document

I am currently looking to integrate Shopify with my personal website. My frontend is built using React (NextJS with TypeScript). The embed code for the Shopify buy button consists of an HTML div tag wrapping JavaScript. I am wondering how I can effectivel ...

What is the advantage of using event.target over directly referencing the element in eventListeners?

Suppose there are several buttons in an HTML file and the following code is executed: const buttons = document.querySelectorAll('button'); buttons.forEach((btn) => { btn.addEventListener('click', (e) => { console.log(btn.te ...

Can I send an AJAX request to JavaScript rather than ASP?

Currently, I am in the process of developing a content delivery network (CDN), and I am exploring the idea of using a jQuery AJAX call to a JavaScript file instead of an ASP file. The JavaScript file would be responsible for processing the input and then s ...

`The Streaming module within React Native`

I am facing an issue in my React Native project where I want to use a node library that depends on stream (require('stream')). The problem arises with the error stream could not be found within the project because stream is a nodejs package not ...

Exploring the hover functionality in GetOrgChart

Exploring mouse hover functionality in Getorgchart view. Looking to implement the mouse hover and mouse out events in Getorgchart view. Can I access the org chart element details during mouse hover/leave actions? ...

finding the node version in a code repository

Is it possible to determine the targeted node version (4 or 6) of a Node.js application by examining its code? I'm currently reviewing this: https://github.com/jorditost/node-postgres-restapi ...

What is the best method for rotating segments in THREE.TubeGeometry?

I've successfully generated a flat tube structure using THREE.TubeGeometry with radiusSegments set to 2. However, once added to the scene, it appears perpendicular to the ground: https://i.sstatic.net/U3qTt.png Is there a way to rotate each segment ...

The Google Maps API allows all markers to be connected to a single infowindow

I've been grappling with this issue for some time now, but I just can't seem to find a solution! I'm retrieving data from a database in Laravel using Ajax and then attempting to display infowindows for each marker on Google Maps. The markers ...

What causes Node.js to be unable to handle requests from Vue.js?

I'm encountering a strange error where Node.js is unable to see the URL address and consistently returns a 404 error. In my Vue.js application, I am making a post request using the axios package when the user clicks a button. The code snippet shows t ...