Issue with shadows on imported OBJ objects in Three.js when material is applied

After importing an obj using this load function:

    // triggered when the resource is loaded
    function ( obj ) {

        // For any meshes in the model, add our material.
        obj.traverse( function ( element ) {

            if ( element instanceof THREE.Mesh ){
                //node.material = material;
                //node.geometry.computeVertexNormals(); 
                element.castShadow = true; 
                element.receiveShadow = true;
            }
        } );


        obj.scale.set(0.5,0.5,0.5);
        scene.add( obj );
        parts[partName] = obj;

    }

The obj loads successfully and casts shadows from the spotlights in the scene. However, when I try to apply a material to the mesh (hence why that part is commented out in the code above), the model no longer receives shadows.

The materials are applied node by node, and the materials are mapped as jpg's like this.

if ( node.isMesh ) node.material = material;

new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'materials/orange.jpg' ), shininess: 50, shading: THREE.SmoothShading }),

Any assistance would be greatly appreciated. Thank you, Ed.

Answer №1

After realizing my mistake,

I was using MeshBasicMaterial

but I should have used

MeshLambertMaterial

in order for the material to properly receive shadows.

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

Refreshing the DeckGL HexagonLayer upon changes to the data array/Initiating a reload for the DeckGL HexagonLayer

I am currently using DeckGL along with React to showcase data on an OpenStreetMap. My goal is to incorporate filters to allow for different views of the data I possess. The main issue I encounter is the inability to refresh the layer representing the data ...

Automatically closing the AppDateTimePicker modal in Vuexy theme after selecting a date

I am currently developing a Vue.js application using the Vuexy theme. One issue I have encountered is with a datetimepicker within a modal. The problem arises when I try to select a date on the datetimepicker component - it closes the modal instead of stay ...

What is the best way to sort through data retrieved by a server component in a NextJS 13 AppDir?

I've hit a roadblock trying to integrate a search bar that filters server-fetched data in my project using NextJS 13 and AppDir. Despite numerous attempts, I can't seem to get it right. It feels like there's something crucial I'm overlo ...

Switch the paper tab to a dropdown menu in Polymer.js

Can someone assist me in transforming the paper tab into a paper drop down menu in polymer JS? I want the drop-down to appear with a list of values when hovering over the Top menu. Activity Execution <paper-tab cla ...

Tips for customizing the Link component in ReactJS to display innerHTML

After researching various methods for extending a React component through inheritance, I discovered that most examples focused on adding events rather than manipulating the innerHtml. This led me to ponder a simpler approach: // React packages import Reac ...

Learn how to showcase the value of the selected radio button in AngularJS

To show the chosen radio button in the response div, make sure to hide the div if no option is selected. Check out the code below: <body ng-app="QuestionDisplayModule"> <form> <div ng-controller="QuestionDisplayController" ...

Construct object in JavaScript recursively

My current project involves creating a file structure index using nodeJS. I am utilizing the fs.readir function to iterate through files and it is working smoothly. However, I am facing an issue when it comes to descending into the directory structure and ...

Does React JS set initial value after re-rendering its state?

Every time the state is updated, the function is triggered once more (please correct me if I am mistaken). And since the initial line of the App function sets the state, the values of data and setData will not revert to their defaults. For instance, i ...

What causes MySQL connection to drop unexpectedly in a Node.js environment?

Currently, I am working on developing a Facebook chatbot using Node.js and have implemented a MySQL Database to store data. Everything seems to be working fine, but I have come across a query - should I be closing the database connection? I attempted to c ...

Update the content of a div element with the data retrieved through an Ajax response

I am attempting to update the inner HTML of a div after a certain interval. I am receiving the correct response using Ajax, but I am struggling to replace the inner HTML of the selected element with the Ajax response. What could be wrong with my code? HTM ...

Determine whether there is only one array in the object that contains values

At the moment, I am attempting to examine an array in order to determine if only one of its elements contains data. Consider this sample array: playersByGender = { mens: [], womens: [], other: [] }; Any combination of these elements may contain dat ...

Tips for serving images locally instead of using an online URL when exporting with Next.js static:

I've encountered an issue where multiple images pulled from an online source are not being included in my export when I start the process. The image URLs are stored as strings online, but I want them to be saved locally and exported that way instead o ...

Tutorial on React JS and Python Django: Understanding the concept of an infinite loop in componentDidUpdate

I'm currently going through an online video tutorial that teaches how to create a CRUD full-stack app using React, Django, and SQLite. However, I've encountered an issue with fetching table data causing an infinite loop. It appears that the probl ...

How to assign attributes to all child elements in Angular?

I have a unique component in Angular that I utilize throughout my app. It's a button component which I use by calling <app-delete-btn></app-delete-btn> wherever needed. I tried to set the tabindex="1" attribute for my component ...

Navigating within a class-based component using Next.js: A brief guide

Is it possible to create a redirect from within an onSubmit call while maintaining CampaignNew as a class-based component? I have provided the code snippet below, and I am looking for guidance on achieving this. import React, { Component } from "rea ...

Diminishing of the darkness

Imagine a tree adorned with beautiful alpha leaf textures. The intricate pattern of the falling shadow casts a deep darkness on the leaves "below", causing the entire model to appear dark. https://i.sstatic.net/N5ocS.png https://i.sstatic.net/EL5BZ.png ...

Adjusting font size in dynamic containers relatively

Imagine we have a slider named .outer, which adjusts its height based on the width of the viewport. Inside this slider, there is an example slide called .inner that contains some text. However, when we shrink the window width, the content in slide .inner s ...

Issue with grid breakpoints for medium-sized columns and grid rows not functioning as expected

I'm working on building a grid layout from scratch in Vue.js and have created my own component for it. In my gridCol.vue component, I have defined several props that are passed in App.vue. I'm struggling to set up breakpoints for different screen ...

Tips for adding a border to a 3D pie chart in Highcharts

I created a 3D pie chart using the Highchart plugin and wanted to add borders to each portion. I tried adding the following code: borderWidth: 4, borderColor: "red" within the plotOptions: pie: section. However, I noticed that the portions were getting b ...

Guide to setting up collapsible sections within a parent collapsible

I came across this animated collapsible code that I'm using: https://www.w3schools.com/howto/howto_js_collapsible.asp Here is the HTML: <button type="button" class="collapsible">Open Collapsible</button> <div class="content"> &l ...