Incorrect hue of object imported using *.obj format on ThreeJS

Upon loading the Wavefront obj file from this link, I noticed that the normals were not calculated correctly, resulting in incorrect shading of the model. The code used to load the *.obj model was based on a modified version of the original project's loader / obj example. In such cases, after applying transformations like scaling to the model, it is usually necessary to call functions like dirtyDisplayList, UpdateModel, or RecalculateNormals to sync the model with the changes made. In Three.js, common functions for this purpose are geometry.computeFaceNormals() and

geometry.computeVertexNormals( true )
.

However, when I tried calling geometry.computeFaceNormals() and

geometry.computeVertexNormals( true )
, the model disappeared completely, accompanied by a console error message: TypeError: geometry.computeFaceNormals is not a function OBJ_Loader.html:102.

I am unsure what mistake I am making here. Any insights on this issue would be greatly appreciated.

var I_prof =  new THREE.OBJLoader();
I_prof.load('obj/male02/new_I_Profile.obj', function(geometry){ 

    geometry.scale.set(10, 10, 10);
    geometry.rotation.x = 3.1415/2;
    geometry.position.z = -0;
    geometry.position.x = 0;
    geometry.position.y =0;
    //geometry.computeFaceNormals();
    //geometry.computeVertexNormals( true );
    scene.add(geometry);
} );

Answer №1

Although this question was posed a while back, I am now ready to provide an answer.

A callback function accepts the parameter Object3D, which includes the attribute geometry. Additionally, an object may have multiple children. To access and modify the geometry of each child, you can utilize the traverse function. An example of how your function (function(geometry){...}) could be structured is shown below:

function(object){
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            child.geometry.scale.set(10, 10, 10);
            child.geometry.rotation.x = 3.1415/2;
            child.geometry.position.z =-0;
            child.geometry.position.x =0;
            child.geometry.position.y =0;
            child.geometry.computeFaceNormals();
            child.geometry.computeVertexNormals( true );
            scene.add( child );
        }
    }
}  

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 combine elements at matching indexes from an array of arrays into a unified array?

Suppose I have an array of arrays structured as follows: [ [0, 1, 3], [2, 4, 6], [5, 5, 7], [10, 0, 3] ] Is there a way to create a new array that calculates the sum of all values at each index position within the inner arrays using JavaScript? F ...

Issue with fuse-box: unable to import ReactDOM

Recently, I decided to switch from webpack to fuse-box for my side project. Everything is compiling without any issues, but when I try to load it, an error pops up: I downloaded a React demo code and it works fine. Additionally, there are no problems wit ...

"Learn the trick to effectively binding the mousewheel event in Blazor for seamless functionality on the Firefox

We are looking to implement code for a mouse wheel event on a div container. The code below functions correctly in browsers Edge and Chrome: <div id="scroll-container" @onmousewheel="MouseWheelEventHandler"> [...] </div> ...

In Django, I am assigning the URL as the category but encountering an error that is expecting a semicolon in JavaScript

I am currently trying to set the category as the URL in Django but I am running into an error that states '; expected.javascript' {% for category in all_categories %} <div onclick="location.href='{% url 'category' categ ...

Differences between using a getter in Vue.js/Vuex compared to directly accessing state values on the create lifecycle hook

As I utilize the created lifecycle hook within vue.js to fetch data from my store and pass it to a vue component's data, an interesting observation arises. When I employ this.selectedType = store.state.selectedType, the data is successfully retrieved ...

Using React components to create an anchor element for a popover display

Hey, I'm just starting out with React and trying to wrap my head around Hooks like useState. It's a bit challenging for me, and I want to keep things simple without making them too complex. I've encountered an issue when transitioning a Rea ...

Using scale transformations to animate SVG group elements

I am currently experimenting with an SVG example where I hover over specific elements to expand or scale them. However, I seem to have made a mistake somewhere or missed something important. Can someone offer me assistance? View the demo on JSFiddle here ...

Struggling to update the inner content of a div container

For some reason, I'm having trouble updating the inner html content of a specific div element. <div class="emoji-wysiwyg-editor form-control" data-id="83fa07d0-2bab-4c02-8bb6-a2133ae64bbd" data-type="input" placeholder="Chat Message" contenteditab ...

JS : Removing duplicate elements from an array and replacing them with updated values

I have an array that looks like this: let arr = ['11','44','66','88','77','00','66','11','66'] Within this array, there are duplicate elements: '11' at po ...

Alert: Every child within a list must be assigned a distinct "key" property in React.js

After reading the article on looping inside React JSX, I decided to enhance my code by rendering components through a loop. However, an issue has arisen in the form of a warning message: Warning Each child in a list should have a unique "key" pro ...

When the month picker is selected, my intention is to retrieve the true value. However, I am encountering an issue where it consistently returns the false value instead

I created a month picker similar to the image provided. After removing unnecessary code, I was left with only the part that generates questions. Initially, when the month picker renders, no value is selected. However, upon selecting a month, the value is d ...

Can someone assist me in understanding the proper syntax for the Node.js function that inserts a document into Watson's Discovery service from the watson-developer-cloud library?

I'm attempting to upload JSON documents into a Discovery collection using the Node.js watson-developer-cloud JDK. Here is the relevant code snippet: const DiscoveryV1 = require('watson-developer-cloud/discovery/v1'); const discovery = new D ...

Looking for assistance on how to access a JSON file in JavaScript without the need for servers

As I embark on my journey with JavaScript, a question has been lingering in my mind - is it possible to access a JSON file locally, without the need for servers like WAMP? My goal is to simply retrieve the data from a JSON file and display its contents o ...

Tips for assigning a JSON object as the resolve value and enabling autosuggestion when utilizing the promise function

Is there a way to make my promise function auto-suggest the resolved value if it's a JSON object, similar to how the axios NPM module does? Here is an example of how axios accomplishes this: axios.get("url.com") .then((res) => { Here, axios will ...

toggle back and forth between two div elements

I am trying to create a toggle effect between two divs, where clicking on one will change its border and header color to red while the other div disappears. I have tried using an IF statement in my JavaScript code, but it is not working as expected. Can so ...

Text input in Bootstrap not reaching full width

Trying to achieve a Bootstrap textfield embedded in a panel that spans 100% of the remaining space-width within the panel. However, this is the result obtained: The blue border represents the edge of the panel. Below is the code being used: <div clas ...

How do I display the frequency of a number occurring multiple times within an array in JavaScript?

I'm currently working on this task: Create a JavaScript function that prompts the user for a number and then displays how many times that number appears in an array. To achieve this, I am using parseFloat to convert the user input from a string to ...

Executing a file function from another within a module function in ReactJS

I need to utilize the functions that are defined in the apiGet.js file: export let apiGet = () => { return 'File One'; } These functions are being called in another module called brand.js. Here is the code snippet: require("../action ...

Steps for wrapping a class with a higher order component

Is it feasible to encapsulate a class component within a higher order component (HOC) that is also a class? import React, { Component } from "react"; import { View } from "react-native"; import { Toast } from "react-native-easy-toast"; const withToast = ...

Mastering sorting in AngularJS: ascending or descending, the choice is yours!

I have set up a table view with infinite scroll functionality. The table contains 2000 objects, but only shows 25 at a time. As the user scrolls to the bottom, it loads an additional 25 elements and so on. There is a "V" or "^" button in the header that sh ...