Three.js doesn't cast shadows properly on loaded OBJ file despite shadow property being enabled

Currently delving into the world of Three.js, I encountered my first major hurdle when transitioning from native primitives to imported OBJ objects.

I created a simple dodecahedron model that I UV-mapped in Cinema4D r15 and exported as an OBJ file. Strangely, when using this model instead of the DodecahedronGeometry primitive, the geometry no longer appears lit by my directional light.

Check out this JSFiddle for reference: https://jsfiddle.net/xm3ttmxw/1/

Here is the desired result (using a primitive): https://jsfiddle.net/84hbs7ed/1/

In my code, I have set the receiveShadow property to true for all meshes in the OBJ. Shadow maps have been activated for both the light source and renderer. The directional light follows the camera and is directed towards the center of the dodecahedron. The ambient light is functioning properly.

If you have any insights or solutions, your help would be greatly appreciated. Thank you!

javascriptthree.jsshadowsdirectional-light

Answer №1

Upon further investigation, it has become evident that the issue stems from a lack of vertex normals (OBJLoader does not calculate those). The resolution lies in computing the vertex normals dynamically as demonstrated here: https://example.com/a/28568522/1234567

object.traverse( function( child ) {
    if ( child instanceof THREE.Mesh ) {
        child.geometry.computeVertexNormals(); //include this
    }
} );

A big thank you to Sebastian Baltes!

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

The ideal scenarios for employing functional setState

Lately, I've been delving into the world of React, immersing myself in tutorials and explanations on how to manipulate elements in different ways. One aspect that has caught my interest is the setState function, which allows you to update or override ...

javascripthtmlreactjs

The re-rendering of a functional component utilizing React.useCallback and React.memo() is occurring

I was delving into React concepts and eager to experiment with some new things. Here are a few questions that crossed my mind: Does every functional child component re-render when the parent state changes, even if it doesn't have any props? It seems ...

javascriptreactjsreact-hooks

What is the best way to showcase an image using Next.js?

I'm having a problem with displaying an image in my main component. The alt attribute is showing up, but the actual image is not appearing on the browser. Can someone please point out what I might be doing wrong? import port from "../public/port. ...

javascriptnext.js

Passing a Javascript variable to the NAME attribute of an HTML <a href> tag: Steps to do it efficiently

I need assistance with passing a JavaScript variable to the NAME attribute of an HTML tag. Let's consider this script example: <script> var name = "Click here!"; </script> My goal is to pass the variable to some code in order for <a ...

javascriptjqueryhtml

Creating a multidimensional array or array tree from a list of arrays - A step-by-step guide!

My challenge involves working with an array that looks like this: ["Lorem", "Ipsum", "Colo", "sit", "ame", "consecteur"] The goal is to create subarrays with a combined character length of 10, resulting in something like this: [ ["Lorem", "Ipsum"], ...

javascriptarraysmultidimensional-array

"React Bootstrap column showing gaps on the sides instead of filling the entire

In my current project with React and React Bootstrap 4.0, I am aiming to create a collapsible side-bar of 300px width on the left side of the screen, with the content displayed in the remaining space. The main parent component for the side-bar and content ...

javascriptreactjstypescriptsassbootstrap-4

Tips for spanning a div to fill 100% of the available width

I am facing an issue with two sibling divs nested inside a parent div as shown below: <div class="row filters-box"> <div class='col-md-1'> <div class="title"><label class="filter-title">Filter</label>< ...

javascripthtmlcss

Mastering the correct way to handle the "window" object within the Node.js testing environment using JSDom

Testing my React app using Tape and JSDom involves importing a specific module at the beginning of each test JS file: import jsdom from 'jsdom' function setupDom() { if (typeof document === 'undefined') { global.document = jsdom ...

javascriptnode.jstestingreactjsjsdom

Encountering a 401~UNAUTHORIZED error while attempting to log the message received from a socket.io connection

I'm working on a website that displays the real-time value of Bitcoin in USD. I am using the Cryptocompare API with the help of socket.io Web Socket technology. Here's a snippet of my code: var ioClient = require('socket.io-client'); ...

javascriptnode.jsexpresswebsocketsocket.io

Modify CSS using JavaScript at a specific screen size

Currently, I am in the process of designing a responsive navigation system which involves implementing a button that dynamically changes the styling of the div #navigation using Javascript. The aim is to toggle between display: none; and display: block; ba ...

javascriptcsshiddenresponsivedisplay

What is the most efficient way to post an array and iterate through it using PHP?

As the user types into an input field, jQuery's replace function is used to immediately create an array. The objective is to send these values to PHP for a live search on a specific MySQL table. I've managed the input field and the ajax call, bu ...

javascriptphpjquerymysqlarrays

Unable to convert value to ObjectID

I am receiving an array of names (String) in my body and I want to convert each name to its corresponding object ID from my Collection. My goal is to reference Strings to a Schema and replace them with their ObjectIds. This is the Schema I am using: ...

javascriptarraysnode.jsexpress

Troubleshooting: Onsubmit not functioning to validate form using Javascript

After searching for a solution to my issue, I couldn't find any helpful posts so here is my question: I am trying to validate a form before submitting it to the database. Below is the code I have: <%@ page language="java" contentType="text/html; c ...

javascripthtml

Obtaining a fresh access token from a refresh token using the googleapis npm library

I've been searching everywhere for an explanation, but I can't seem to find one. The documentation I've read says that refresh tokens are used to obtain new access tokens, but it doesn't explain the mechanics behind it. Normally, I wou ...

javascriptnode.jsgoogle-api

Determine the specific row number that the user clicked on within the table

I came across this code that apparently retrieves the number of the row that was clicked, but I am having trouble grasping how it works. Could someone please provide an explanation for the following code? <html> <head> <title&g ...

phpjavascriptmysql

What is causing this error/bug to show up in Angular?

I encountered an error while working on my Angular project that incorporates both front-end and back-end development with Python Flask. Even though the page updates correctly, a database-related error is being displayed in the console. Below are the snippe ...

javascriptpythonangulartypescript

HTTP2 Protocol Error in three.js loader occurs when cache is disabled on Azure CDN

As part of my current project, I am utilizing Three.js loader to retrieve various image assets stored on Azure storage via Azure CDN. Everything functions smoothly when the browser cache is active. However, issues arise when the cache expires or when I del ...

azurethree.jsazure-storagehttp2azure-cdn

Blending the foundation of canvas text and HTML element sharing

I am currently working on drawing text to an HTML canvas element and positioning an HTML button next to it using CSS styling and JavaScript. My goal is to have both the text and button share the same font and baseline alignment, but I am facing some challe ...

javascripthtmlcsscanvasvertical-alignment

Utilizing a JavaScript function to toggle the Bootstrap dropdown without the need for manual clicking

I've configured a Bootstrap dropdown in my site's mini cart that includes a lightbox effect to grey out the background content when the dropdown is activated. Here's the code snippet: $(".dropdown").on('show.bs.dropdown hide.bs.dropdow ...

javascriptjqueryhtmlcssbootstrap-4

The HTMLInputElemet type does not include a Property Rows

Hey there, I'm just starting to dive into Angular and TypeScript. My current challenge is figuring out how to check if a table is empty or not so that I can show or hide a specific div accordingly. I've attempted the following: var rows = docume ...

javascriptangularhtmltypescript