Trouble with smooth shading on OBJ file when loaded into Three.js environment

It's interesting how the OBJ appears smooth in my 3D modeling software but looks somewhat quirky and triangular in the Three.js scene. I've applied MeshLambertMaterial to it, which supposedly uses THREE.SmoothShading as its default shading. Despite manually setting the shading property and confirming through debugging console that it is properly configured, the model in the scene still lacks that desired smooth appearance.

Answer №1

The OBJ(MTL)Loader does not automatically calculate the VertexNormals. However, you can manually calculate them later on like this (not verified):

myModel.traverse( function( item ) {
    if ( item instanceof THREE.Mesh ) {
        item.geometry.computeVertexNormals(); 
    }
} );

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

Forwarding information and transferring data from a Node server to ReactUIApplicationDelegate

I am currently working on a NodeJS server using Express and React on the front-end. I am trying to figure out how to send data from the server to the front-end without initiating a call directly from the front-end. The usual solutions involve a request fro ...

The iPad screen displays the image in a rotated position while it remains

Recently, I developed a mini test website that enables users to upload pictures and immediately see them without navigating back to the server. It seemed quite simple at first. $('input').on('change', function () { var file = this. ...

A-Frame: Struggling to accurately update the world position of a child object within the scene

Within my current virtual reality scene setup, I am working with an entity that has laser controls and a raycaster structured as follows: <a-scene> <a-entity laser-controls raycaster ...> <!--<a-entity id="inventory" ...> Coul ...

A distinct handler function designed for a dynamically generated form

I have 3 MaterialUI TextFields that are rendered n number of times based on user input (stored in a variable named groupMembersCount) in a functional ReactJS component using the useState hook: const [groupDetails, setGroupDetails] = React.useState([ { ...

Looking to handle a .csv file containing both quotes and commas within the quotes in Node.js - how can I achieve this

My code solution successfully parses a CSV file, but it doesn't handle cases where data has commas within quoted fields. For example, "not, accounted","normal". let filePath = Path.resolve(__dirname, `./MyData.csv`); let data = fs.readFileSyn ...

Persistent extra pixels found in CSS radiobutton group buttons that persist despite attempts to remove them

UPDATE: I have corrected the title of this post, as it was mistakenly taken from another post. For the past few months, I've been working on a sports app using React. However, I am facing a minor cosmetic problem with my radio buttons. Despite my eff ...

Is it possible to execute "green arrow" unit tests directly with Mocha in IntelliJ IDEA, even when Karma and Mocha are both installed?

My unit tests are set up using Karma and Mocha. The reason I use Karma is because some of the functionality being tested requires a web browser, even if it's just a fake headless one. However, most of my code can be run in either a browser or Node.js. ...

Out of the total 1341 test cases, Yarn is currently only running 361

Currently, I am immersed in a project containing over 1300 test cases. Despite my efforts to clone the entire project again, it appears there is an issue with my npm. Upon executing yarn test, only 361 out of 1341 tests are running. I am puzzled as to how ...

Save the text found within an element to Appim wd.js

I am a beginner with Appium and I am currently exploring the workshop Git project, which utilizes wd.js and Grunt. From my research in the documentation and forums, I have learned that there are two methods for accessing the text of native elements within ...

The search results fail to show the required information

I am trying to retrieve data from an API based on a search query. When the user enters the name of the film they are looking for and hits enter to submit the form, the matching films should be displayed on the screen. However, my console is showing errors ...

Strangely behaving animated mobile navigation glitch

CodePen showcasing the mobile navigation Upon initial interaction with the mobile navigation, it operates as expected. However, a bug arises with subsequent interactions. The navigation either opens and closes instantly or the links appear in a jumbled or ...

Any ideas on how I can enable rotation of SVG images within a Bootstrap 4 Accordion card with just a click?

I'm working on a Bootstrap 4 accordion card that has an SVG arrow image in each header. I am trying to make the arrow rotate 180 degrees when the header is open, and return to its initial state when it is closed or another header is opened. Currently, ...

What is the best way to calculate the sum of a field within a map?

Having trouble determining how to calculate the total of an array received from an API request. Working with Next.js {positions.map(position => { return ( <List title={position.title} slug={position.slug} quantity={position ...

Unable to substitute a value using the useState hook in React

Whenever I click a key, I attempt to update the value of a variable but it appears not to be working as intended. ↓ The current implementation is not effective and needs improvement import React, { useState, useEffect } from 'react'; const Li ...

Tips for loading JSON data into the select2 plugin

My goal is to extract the last two letters (in this case "VA") from the data attribute (data-code="US-VA") of a jvectormap-element using JVectormap. I want to compare these letters with State objects in the database and then load corresponding counties in ...

What causes insertMany in mongoose to not generate ObjectIds?

Currently, I am in the process of developing an application using Node.JS and MongoDB. My challenge lies in inserting multiple documents with predefined _ids and some ObjectId arrays. When I utilize insertMany function, all document _id fields turn into st ...

methods for converting an array to JSON using javascript

Our team is currently working on developing a PhoneGap application. We are in the process of extracting data from a CSV file and storing it into a SQLite database using the File API in PhoneGap. function readDataUrl(file) { var reader = new FileReade ...

Vue 3 Router view fails to capture child's event

After some testing, I discovered that the router-view component in Vue 3 does not capture events sent from its child components. An example of this scenario is as follows: <router-view @event-test="$emit('new-test-event')" /& ...

Authenticating the identity of the client application - the client is currently within the browser

I have a PHP backend (although it's not really important) and a Javascript client that runs in the browser. Here is how the application operates: The user accesses a URL and receives raw templates for rendering data An Ajax GET query is sent to the ...

Responsive design with Flexbox, interactive graphics using canvas, and dynamic content resizing

I'm having difficulties with my canvas-based application. I have multiple canvases, each wrapped in a div container alongside other content. These containers are then wrapped in an "hbox" container. The objective is to create a dynamic grid of canvas ...