"Troubleshooting: Shadows are not appearing on Three.js OBJLoader .obj models

I'm currently tackling a project in which I want to enable a .OBJ model loaded from OBJLoader.js to cast a shadow from a spotlight. The light successfully casts shadows from other regular objects, however, the .OBJ model doesn't seem to be casting any shadows.

One potential issue that may be causing this problem is as follows: When these regular objects are generated by clicking on the floor, they are added to the Objects[] array, allowing them to be clickable for adding more objects on top of them. The .OBJ model is also added to this array, but it appears that I can't click on it to add models on top of it; almost as if the raycaster isn't detecting it.

I will provide all of my code below, as the root of the issue might be hiding somewhere unexpected.

You can view a working link HERE

Feel free to try clicking on the floor to observe how other objects do cast shadows.

Any suggestions or ideas? Mr.Doob, are you out there? :)

ps: It's strange that in my browser, the provided link is redirecting to a suspicious site called "4safe.in". You might have to copy and paste the link instead...

Just to cover all bases, here's a snippet of the code that likely contains the source of the problem.

    renderer.shadowMapEnabled = true;///////////////////////////////////////////// RENDERER /// <------------Renderer and lights set up to cast shadows
    light.castShadow = true;
    light.shadowDarkness = 1;
    renderer.shadowMapSoft = true;
    floor.receiveShadow = true;

    var texture = new THREE.Texture();
    var loader = new THREE.ImageLoader();
    loader.addEventListener( 'load', function ( event ) {

        texture.image = event.content;
        texture.needsUpdate = true;

    } );
    loader.load( 'modeltest/ash_uvgrid01.jpg' );

    // model

    var loader = new THREE.OBJLoader();
    loader.addEventListener( 'load', function ( event ) {

        var newModel = event.content;

         newModel.traverse( function ( child ) {

             if ( child instanceof THREE.Mesh ) {

                 child.material.map = texture;

            }

         } );

        newModel.position.set (200,30,0);
        newModel.castShadow = true;///////////////////////////// <------ This doesn't seem to be working.
        scene.add( newModel );
        objects.push( newModel );/////////////////////////////// <------ Another HINT: because of this, the raycaster SHOULD allow us to click the model and create a new block. But we can't.


    });

    loader.load( 'modeltest/male02.obj' );

Answer №1

Ensure that every individual mesh within your object has the castShadow property set to true.

newModel.traverse( function ( child ) {

    if ( child instanceof THREE.Mesh ) {

        child.material.map = texture;
        child.castShadow = true;

    }

} );

In order for raycaster.intersectObjects() to function properly with your object, make sure to enable the recursive flag by setting it as true.

var intersects = raycaster.intersectObjects( objects, true );

This code snippet is written for three.js version r.57

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

Ordering a string of whole numbers using JavaScript

I'm currently working on a form that takes a string of numbers, splits them at each semi colon and space, sorts the numbers, and then displays the sorted list. However, when I click the button, the value in the text box doesn't get posted. Can ...

React component fails to render even after successful authentication check

Trying to set up a secure route for my application, I encountered an issue with React Hooks where the state is not updated directly. This causes a problem when trying to redirect unauthenticated users, as the initial render treats them as not logged in and ...

Utilize axios to retrieve data and pass it as props to a component

I am new to react and struggling with a basic issue. I need help passing an array of values from an external service as a prop to another component. Approach render() { let todolist="default"; axios.get('http://localhost:8888/todoitems').t ...

Navigate to specific routes only when a user is signed in using the Route render feature in React Router

I'm having trouble figuring out how to display the signIn component when currentUser is not detected. There are no errors, but it's rendering an empty component because of the value "currentUser = null". <Routes> <Route exact path=&ap ...

Pause the for loop until all nested asynchronous database calls are completed

Currently, I am utilizing the listCollection method within mongodb to loop through each collection that is returned using a query with find. The issue arises when I attempt to construct an object within the loop that I intend to return with response.json ...

Tips for Locating an Element by Its Attribute in JQuery

I currently have a variable that holds a list of selects, and my goal is to filter out only those with a 'dependsOn' attribute set to 'EventType'. My initial attempt below doesn't seem to work as intended and returns a count of 0: ...

Retrieve the HTML code from a file and store it in a JavaScript variable

My PhoneGap application is able to load an external page in the inAppBrowser and inject a bottom bar onto that page using executeScript(). This allows me to have a bar with basic controls on the specific page. I have successfully implemented this functiona ...

Embed JavaScript locally within an iframe HTML

When attempting to add HTML code within an iframe to showcase data, everything works as expected. However, the issue arises when trying to include any JavaScript within the iframe, as it doesn't seem to be recognized locally. Below is the example cod ...

Personalize your Datatable export options with Jquery

I am working with a datatable that contains columns with data in the format 'XXXX unit'. For my export, I need to remove the 'unit' part of the data. What specific rule should I implement for this task? exportOptions: { columns: ...

"Implementing classes with AngularJS: A Step-by-Step Guide

Is there a way to dynamically add a class to the i tag after a button is clicked in AngularJS? <button type="button" title="Like" ng-click="countLikes(product.title)" class="btn btn-compare"> <i class="fa fa-thumbs-o-up"></i> </ ...

Styling only for Angular 2 Components

How can component scoped styles be used to style elements differently based on their location within the site while still maintaining style scoping? For example, when using a "heart like" item created in this course, how can padding be added specifically i ...

Difficulty encountered while setting up jQuery slider

I am struggling to set up a jquery slider (flexslider) It seems like I am overlooking something very fundamental, but for some reason I just can't figure it out. Any assistance would be greatly appreciated. Please check out the link to the test site ...

Activating events with Jquery

Can anyone help me with this HTML and jQuery issue I'm facing? When I click on an image for the first time (when it has the class 'hide'), the first jQuery click function is executed. However, when I click on the image again, the second func ...

Tips for incorporating an icon beneath the title of an angular echart

How can I add an icon below the Echart title? I have attempted the following but have been unsuccessful in rendering the icon. https://i.sstatic.net/PUURP.png The code in my component.ts file is as follows: constructor(private sanitizer: DomSanitizer) { ...

The most recent axios request yielded a null response

I needed to retrieve the current weather conditions of a specific location, so I decided to utilize two different APIs. The first one being Mapbox, which helped me convert the place name to geo-coordinates. The second API I used was Accuweather. Additional ...

Tips for ensuring the child directive has finished rendering before proceeding?

I am faced with a scenario where one directive is dependent on another: <div style="border:2px solid black;height:150px;padding:10px"> <my-internal-directive></my-internal-directive> <my-internal-directive></my-interna ...

Navigating the path of interactions with buttons on a web browser: a guide

I am interested in adding a small feature using jQuery where I can detect when the user clicks on the "Back" button of their browser to go back to the previous page. But how can this be done? I have searched for solutions but unfortunately, haven't ...

What are the steps to create an endless scrolling feature?

I'm trying to create a slider with a horizontal scrolling effect, but I've hit a roadblock. How can I make the slider scroll infinitely? In my code, you can see that after Item 6, it stops scrolling and I have to scroll backward. However, I want ...

Having trouble removing the npm package spotifydl from my system

After running the command npm install -g spotifydl, I discovered that the package was obsolete and no longer functioning properly. Subsequently, I attempted to remove it using npm uninstall -g spotifydl, but instead of completely uninstalling, it kept re ...

Unable to retrieve a singular data point from a set

I am currently working with a collection named notification and my goal is to retrieve a single value using the findOne() method. var allnotices = Notifications.findOne({eventownernumber:"2"},{sort: {noticedate: -1, limit: 1}}).noticemessage; The desire ...