Can the THREE.OBJLoader create a shadow effect?

Trying to create a shadow for an object,

There is a THREE.SpotLight as the light source in the scene

Below is the code snippet for MTLLoader() and OBJLoader()

        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.setBaseUrl('assets/');
        mtlLoader.setPath('assets/');
        mtlLoader.load('komoda.mtl', function (materials) {
            materials.preload();
             materials.materials.lambert2SG.map.magFilter = THREE.NearestFilter;
             materials.materials.lambert2SG.map.minFilter = THREE.LinearFilter;

             materials.materials.lambert3SG.map.magFilter = THREE.NearestFilter;
             materials.materials.lambert3SG.map.minFilter = THREE.LinearFilter;

            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.setPath('assets/');
            objLoader.load('komoda.obj', function (object) {
                object.castShadow = true;
                object.receiveShadow = true;
                scene.add(object);
            });
        });

Full JavaScript code can be found here:

Check out the online example at:

Thank you for your help!

EDIT: Added jsfiddle link, but unable to load materials on jsfiddle

https://jsfiddle.net/fcb9qoco/23/

Thanks again!

EDIT 2: Issue resolved - There were two problems, one being spotLight.shadow.camera.near = 500;

The correct value should have been 10, so spotLight.shadow.camera.near = 10;

Special thanks to @gaitat

The second issue was that the plane object did not have receiveShadow = true;

Now it does, thanks to @Jim Tang

Answer №1

My Chrome browser doesn't seem to run the online example, so I can't check it there. However, in my 'Three.js Inspector' debug tab, the hierarchy is shown as:

Scene
 +- SpotLight
 +- Group
  |- plane  <-- make sure to check this Mesh object's receiveShadow property
  |- komoda

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

What is the best way to reposition the origin of the canvas to the center?

As a beginner in html and JavaScript, I am currently working on a program that involves points and lines in a coordinate system. However, the canvas for html5 has its origin at the upper corner, and I need to create a coordinate system with the origin at ...

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

Error in Angular: Trying to read properties of an undefined value, specifically 'classList'

I am attempting to utilize intersection observer in order to apply a class to certain text once it crosses a specific trigger point. Although I have confirmed that my observer is functioning properly as some text changes to blue, there are other texts tha ...

Require assistance with try-catch statements

I am troubleshooting an issue with a try-catch block in my Protractor test. Take a look at the code snippet below: try { element(by.id('usernameas')).sendKeys(data); } catch(err) { console.log('error occurred'); } To test the ...

"Error encountered when attempting to read a file from a dialog box using Electron due to

I am currently working on an electron program that requires reading a file in order to apply another program onto it. At this stage, my main goal is to successfully read and log the content of the file. Below is the code snippet I have implemented in a sc ...

Modifying text on input buttons using Javascript

Including product names, text forms, and buttons on a webpage is essential for showcasing products effectively. Each product is assigned an ID such as p1, p2, etc., while the input types are identified by i1, i2, etc. When users enter information into the ...

Access all the properties of an object within a mongoose record

My database contains a collection of documents that are structured using the mongoose and express frameworks. Each document follows this schema: const userSchema = new Schema({ firstName: { type: String }, lastName: { type: String }, email: { t ...

Tips for controlling the size of a textarea in jQuery to prevent it from expanding further

How can I prevent the textarea size from increasing in jQuery? I created a demo where the user can only press 8 enters and enter up to 700 characters. However, my logic fails when the user first presses 7 enters and then starts writing text. The text appe ...

Can you explain the significance of the regular expression pattern /(?:^|:|,)(?:s*[)+/g in Javascript?

When it comes to Jquery, the regexp pattern is defined as follows: var rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g; This particular pattern is designed to match strings such as "abc,[" and "abc:[", while excluding instances like "abc^[". But what doe ...

Determining when all textures have successfully loaded in Three.js and ensuring there are no lingering black rectangles

I'm currently developing a web platform that allows users to customize and preview 3D house models. If the user's browser doesn't support WebGL, the server renders the house and sends screenshots to the client. However, if the screenshots ar ...

Identify 404 errors in multi-file routes with Express

Recently, I've been diving into using Express and I'm facing some challenges with detecting 404 errors. In my main file app.js, I launch the server and specify different files to handle various requests. For instance: const app = express(); app ...

Leveraging react-router for automatic redirection after form submission

My goal is to implement a search functionality on the page where users can enter a search term (name, email, username) and have the page filter out one card from all the cards based on the search value. I believe that upon pressing enter, we should redirec ...

Tips for utilizing the GROUP BY Clause in Sequelize along with associations

How can I properly utilize the GROUP BY clause in Sequelize to combine data from two tables? This is the SQL query I am attempting to translate into Sequelize: SELECT products.product_name, SUM(order_list.quantity) FROM products JOIN order_list ON prod ...

Is there a way to detect duplicate usernames in a form without actually submitting the form, and then automatically focus on the username field if a duplicate is

I need help with a user registration form that I am creating. I want the form to automatically search for an existing username as soon as the user starts typing in the username field. If the username already exists, I want the field to receive focus. In my ...

Utilizing the mobile navigation layout for desktop screens without the need to adjust breakpoints

Having created a responsive site with common breakpoints established in SCSS as mixins, I am now seeking to implement the mobile breakpoint for a single page on desktop view only. Initially, my plan was to create a 'forced-mobile' class by exten ...

Experiencing issues with the redirect button on the navigation bar of my website

Video: https://youtu.be/aOtayR8LOuc It is essential that when I click a button on my navigation bar, it will navigate to the correct page. However, since the same nav bar is present on each page, it sometimes tries to redirect to the current page multiple ...

Is the behavior of String.replace with / and different in Node.js compared to Chrome?

Creating a router in Node.js involves mapping URIs to actions, which requires an easily configurable list of URIs and regular expressions to match against the request URI. This process may seem familiar if you have experience with PHP. To test this functi ...

I'm trying to use Route.get() but it seems I forgot to include a callback function. What mistake did I make?

I've searched through various answers on different platforms, but I'm still struggling to understand. What mistake have I made? Can someone provide assistance? *revised. I have included requiring routes and app.use. It seems like the function is ...

Mastering the Sequence of JS Functions (or How Promises Still Confuse Me)

Let me explain my objective in simple terms: I have a set of functions that must be executed in a specific order, and each function has its own sub-order. This is how my code looks currently: async function LastModuleFunction() { await FirstModuleFun ...

Navigating to the desired page in node.js

Currently, I am dealing with Node.js servers and encountering an issue where the server only serves a single file regardless of the URL path specified. I understand that by writing a file, I can have the server display that particular page every time you l ...