Implementing Shadows in Three.JS

I'm having trouble adding the castShadow and receiveShadow properties to an object in my code. Can someone please point out what I'm doing wrong?...

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath("objects/Tree/");
mtlLoader.load("tree.mtl", function(materials) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath("objects/Tree/");
    objLoader.load("tree.obj", function(gate) {

        var positionX = 0;
        var positionY = 4;
        var positionZ = 0;

        gate.position.x = positionX;
        gate.position.y = positionY;
        gate.position.z = positionZ;
        gate.scale.x = 2
        gate.scale.y = 2;
        gate.scale.z = 2;
        scene.add(gate);

        gate.castShadow = true;
        gate.receiveShadow = true;
    });
});

Answer №1

To correctly enable castShadow, you should iterate through each child element using the traverse method and set it to true for instances of THREE.Mesh.

gate.traverse( function ( child ) {
    if ( child instanceof THREE.Mesh ) {
      child.castShadow = true;
    }
});

You can view a working example here.

This solution should be quite helpful in achieving your desired outcome.

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

showing console logs before initializing preferences may lead to inaccurate results

My Content Management System (CMS) is WordPress. Recently, after making some changes, I encountered an error on a specific page: An error occurred: loading pref showConsoleLogs before prefs were initialised, leading to incorrect results being displayed - ...

The value of the variable remains consistent throughout the .each function when using JQuery's .post() method

I am facing a dilemma with a variable value discrepancy within the $.post function compared to the parent function $(element).each(function. Below is the snippet of my code: $(document).ready(function() { $(".list").each(function() { var a = $(thi ...

The error message "confirm is not a function" occurs when using the link_to function

I'm having trouble implementing a confirm dialogue box on a button, as it's not working and throwing an error: Here is my code snippet: <%= link_to restaurant_survey_path(@restaurant, id: @survey.id), data: { confirm: 'Are you sure?&apo ...

Arranging the data in the table by alternating rows using Datatables

I need to organize my data in a way that includes an additional row for descriptive information, but this particular row should not be sorted. It is crucial for understanding the rest of the data, so hiding or showing it is not an option. Is it possible t ...

Interactive web page with dynamic JQuery functionality and navigable page links

I am working on the project/index.html page <html> <head> <title>Index</title> <scripts...> </head> <body> Hello <div id="content"></div> <button id="page1" value="page1"/> <but ...

Obtain data attributes using JQuery's click event handler

I'm facing an issue with a div structure setup as follows: <div class='bar'> <div class='contents'> <div class='element' data-big='join'>JOIN ME</div> <div class=& ...

Is there a way to circumvent the mouse up event?

I want to create a feature where when a user clicks down, something specific occurs. The sequence of events includes: An action taking place (which is not the focus here). Triggering a mouse up event. Implemented with: angular, html, css. Excludes: jQue ...

Retrieving data from multiple collections in Mongodb for a comprehensive single result

Dealing with my Express API, I am striving to retrieve all information from multiple collections. Pondering over aggregation as the potential solution, but struggling to grasp the concept completely. It seems that you need to explicitly specify each key yo ...

Display detailed images upon hovering

Top of the morning to everyone. I'm in search of a way to display higher resolution images when hovering over lower resolution ones. I want to create a rule or function that can handle this dynamically without manually adding hover effects and changi ...

Binding events within other events can be achieved using D3

Trying to implement code from Scott Murray's book "Interactive Data Visualization for the Web" to create versatile bar graphs. Though the code successfully generates and updates graphs, it seems that the sorting functionality is not functioning as exp ...

How to troubleshoot the error I am encountering in Vue while using custom HTML tags?

While I'm still a Vue newbie, I find it quite enjoyable. I've been experimenting with using just a custom tag like this: <ui-button>Learn more</ui-button> Unfortunately, I encountered an error asking me to register the component. To ...

Verifying if form submission was done through AJAX using PHP

Hey there, I need some help with checking whether or not this ajax method has been submitted. I want to display the result based on a certain condition. Below is the code for the Ajax POST request: $.ajax({ url: "addorderInfo.php", // This ...

Using functions like .map in a TypeScript model may not function properly

After retrieving data from a server, I created a TypeScript model to structure the incoming data as follows: export class DataModel{ public PageNo: number public showFromDate: string public showToDate: string public gradeFieldId: number } ...

Vue.js has encountered a situation where the maximum call stack size has been exceeded

I have implemented a method called cartTotal that calculates the total price of my products along with any discounts applied, and I am trying to obtain the final value by subtracting the discount from the total. cartTotal() { var total = 0; var di ...

What could be causing the Babel installation to fail within Electron? Is Babel necessary for my project or can it be avoided?

Having trouble using the npm package https://www.npmjs.com/package/swipe-detect and encountering the following error message: export default function(target, callback, threshold=150) { ^^^^^^ SyntaxError: Unexpected token export at Module._compile (i ...

Is indexed coloring available for vertices in three.js?

I have recently started exploring the world of three.js and I am aware that there is a way to color vertices in three.js. However, I am currently researching whether it is possible to implement indexed colors for vertices in three.js or WebGL. Specifically ...

End <li> element in WebGL

Using Three.js, I have a model where clicking on objects creates a list of buttons. When I click an li element, the function is triggered but the result only shows after clicking in the model again. How can I refocus back to the WebGl model without needin ...

Could the lack of component rerendering when updating state during delete in Angular services be causing issues?

I have two components that are interacting with each other: todos.services.ts: import { Injectable } from '@angular/core'; import { TodoItem } from '../interfaces/todo-item'; @Injectable({ providedIn: 'root', }) export cla ...

The onChange method in React is failing to execute within the component

I am having trouble overriding the onChange method in a component. It seems like the method is not triggering on any DOM events such as onChange, onClick, or onDblClick. Below are the snippets of code where the component is rendered and the component itsel ...

Generating observables from form submission event

Note: I am completely new to Angular and RXJS. Currently, I am working on a simple form where I want to create an observable. The goal is to listen for submit events and update a value within the component. However, I keep encountering an error message sa ...