What causes .obj files to not respond to directional light in three.js?

Can anyone explain why the .obj file is not displaying directional light similar to the box?

Both have identical materials.

You can find the code on GitHub: https://github.com/triple-verge/triple-verge-website/blob/master/src/js/modules/logo-3d.js#L52

Here's a snippet of the code:

logo.addLogo = function () {
    loader.load('img/logo.obj', function (obj) {
        var material = new THREE.MeshLambertMaterial({
                color: 0xff0000
            }),
            cube; // Test

        _logo.obj = obj;

        obj.traverse(function (child) {
            if (child instanceof THREE.Mesh) {
                child.geometry.applyMatrix(
                    new THREE.Matrix4().makeTranslation(-0.5, 0, 0)
                );

                child.material = material;

                // Test
                cube = new THREE.Mesh(
                    new THREE.BoxGeometry(0.5, 0.5, 0.5),
                    material
                );

                $(_logo.container).on('frame', function () {
                    child.position.set(0, Math.sin(Date.now() / 750) * 0.1, 0);
                    child.rotation.set(
                        Math.PI * 0.5,
                        0,
                        Math.sin(Date.now() / 500) * 0.8
                    );
                    cube.rotation.set(
                        Math.PI * 0.5,
                        0,
                        Math.sin(Date.now() / 500) * 0.8
                    );
                });
            }
        });

        _logo.scene.add(obj);
        _logo.scene.add(cube); // Test
    });
};

Appreciate any help with this issue!

Using three.js version r.70

Answer №1

If you want to ensure proper vertex normals in your obj file, make sure to include them during the export process.

Also, consider adding 
child.geometry.computeVertexNormals();

to your traverse() function within the loader callback method.

This advice pertains to three.js version r.70

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

Troubleshooting EasyTabs: Localhost Issue with Ajax Tab Configurations

I've implemented EasyTabs for organizing my tabs on a webpage. I decided to use ajax-tabs functionality in order to fetch content from other pages when users click on the navigation menu buttons. However, I've encountered an issue where the conte ...

Jasmine and Karma encountered a TypeError stating that the function this.role.toLowerCase is not valid

Currently, I am in the process of writing a test case for a page within an application that our team is actively developing. However, I have encountered a challenging error within one of the test cases that I am struggling to overcome. Below is my Spec fil ...

After refreshing the page in Next JS, there is a delay in loading the Swiper Js styles. The Swiper slides appear stretched while waiting for Next JS to load the styles. Any suggestions

Having an issue with my Next 14.0.3 app and tailwind CSS. I recently installed swiper JS version 11.0.5 using npm. The problem arises when I reload the page, it takes about 1 or 2 seconds for the swiper styles to load. During this time, the swiper slides s ...

Revamp your JavaScript code to trigger when the clock strikes bold!

Having trouble setting up JavaScript to automatically bold the next clock time. Any tips on rewriting the JavaScript? For instance, if it is currently 6:49, I want the next clock time of 7:32 to be automatically bolded. And when the time reaches 7:32, I wa ...

Updating a document on Firestore based on a query is a straightforward process that involves first identifying

I'm currently working on a web form page that needs to update input fields into a specific firestore document based on certain conditions. Can anyone provide guidance on how this can be achieved? The initial part where I retrieve the query results se ...

Check if the number field in the If statement is empty or contains an excessive number of decimal places, while excluding cases where only zeroes are present in the decimal places

I am currently working with the following line of code: if ($val === "" || ($val.split(".")[1] || "").length > 2) With some assistance from the helpful individuals here, I have managed to implement this code successfully. ...

Having trouble transitioning from Curl to Axios in Node.js? Encountering issues when trying to make a curl request using the provided certificates, resulting in ECONNRESET or

I've been struggling to make a successful curl request in Axios (Node.js) without any luck. A typical working curl request I use (can't provide exact details as the API is private) is like this: curl --cacert server.pem --cert client.pem:123pas ...

Retrieve the highest integer from the server-side for the client

When creating input fields of type number on the client side, I have been setting their max attribute to the maximum integer value in the user's browser using: Number.MAX_SAFE_INTEGER.toString() Now, I need to output an input field on the se ...

The $(window).load(function() function is unable to run once the entire document has finished loading

I have not been able to find the solution in the following circumstances: In an HTML document, I successfully load multiple other HTML files. However, within one of these included HTML files, specifically "navmenu.html," I want to execute a script with a ...

The filter on the mobile version is not displaying correctly

When I select a category in the input filter, only items with the same category are displayed when clicked. However, when I click on "Others" on the desktop version, only rows with that category are shown, but on mobile after resizing and filtering, nothin ...

if the checkbox is selected, navigate to the displayed section

In my scenario, I have a total of 5 checkboxes and corresponding to each checkbox, there are 5 div elements. The functionality that I need is that when a checkbox is checked, the associated div should be displayed; otherwise, it should be hidden. The check ...

Are there any userscripts available for interactive websites?

I frequently create small GreaseMonkey UserScripts for my personal use. However, I often struggle with a recurring issue: How can I adapt to the changing nature of websites? For example, popular webstores like Amazon now update content dynamically withou ...

node.js is reporting that it cannot locate some of the modules

Attempting to execute a file using node run index.js within the flashloan test folder results in an error that keeps occurring... node:internal/modules/cjs/loader:1042 throw err; ^ Error: Cannot find module '/home/schette/Documents/flashloan test ...

What is the most effective way to toggle the visibility of div elements using jQuery?

I am currently working on a small project centered around interviewing people using short GIF animations. I want the viewers to have 10 seconds to watch the GIF, but I've noticed that the timer is not accurate in my code. After some research, I came ...

sending ajax information to create a pie chart displaying data percentages

I am currently facing confusion on how to pass or assign a value of my data-percent pie chart through my ajax data retrieved from the database. While I have successfully passed other fields using an id, I am stuck on how to incorporate the value for data p ...

Having trouble redirecting to the Google login screen with Passport Google Auth 2.0

Greetings, I have encountered an issue with my server setup. I am attempting to redirect users to the Google authentication screen when they navigate to the /auth/google path. However, instead of being redirected, I am consistently landing on my 404 error ...

Pressing the button updates the value in the input field, but the input field continues to

I need some assistance with my e-commerce platform. I am trying to implement a button that adds items to the shopping cart, but I'm encountering an issue where the value in nbrSeats (my list of values) changes in the data, yet the input field displays ...

Learn how to incorporate an input field into a form using the same class name

I am facing a challenging JavaScript issue that I have been struggling to resolve. My predicament involves a dynamically formed table with form fields. Here is the code snippet in question: var table = document.getElementById("table"); var row = table. ...

In my React JS class component, I am looking to have the image display switch each time the button is clicked

How can I change the image when clicking a button in a class component? I am familiar with function components, but unsure how to achieve this. class CoffeeImages extends React.Component{ constructor(props){ super(props) ...

Creating a task management application using AXIOS and VUE for easy data manipulation

I am currently working on a small app to enhance my skills in VUE and Axios. However, I am facing a roadblock when it comes to the update functionality. I am struggling to pass the ID to the form for updating and despite watching numerous tutorial videos ...