Utilize obj in three.js to enhance your 3D

As someone new to three.js and 3D graphics in general, I am struggling with loading a high-definition OBJ file onto the screen. While I have been able to load the file, it is not as well-defined as I would like.

The OBJ file in question is a ring with pearls, but when rendered, there are visible lines and the object lacks clarity. Currently, I am using the following script to load the object:

            app.loadObj( {
            path: 'obj/',
            fileObj: 'prova.obj',
            pivot: pivotA,
            overdraw: true,
            instanceNo: 0
        } );

The first picture shows the ring with the problematic lines mentioned above, while the second image depicts how the ring should ideally be rendered. You can view the images here.

You can also view the correct rendering of the ring in this link. (Apologies for any errors in my English)

javascriptthree.js

Answer №1

Upon reviewing the OBJ file being loaded on the provided site: Ring OBJ, it appears that vertex normals are not defined.

To better understand how vertex normals are defined, refer to the Wikipedia article on the Wavefront .obj file format. This will show you that vertex normals are specified at the face level with corresponding indices.

For example, consider the following definition of a Triangle in an OBJ file:

v 0.00 0.00 0.00
v 0.00 1.00 0.00
v 1.00 0.00 0.00

vt 0.00 0.00
vt 0.00 1.00
vt 1.00 0.00

vn 0.00 0.00 1.00

f 0/0/0 1/1/0 2/2/0
  • v 0.00 0.00 0.00 defines the position of vertices
  • vt 0.00 0.00 specifies texture UV positions
  • vn 0.00 0.00 1.00 indicates the normal vector
  • f 0/0/0 1/1/0 2/2/0 denotes a face using indexes for each component 
    f vertexIndex/uvIndex/normalIndex ...

In your specific OBJ file, upon examination at the end, faces are defined without normal vectors. They only include vertex and UV indices but lack normals:

v 3.462315 8.68541 -0.125
v 3.462315 8.68541 -0.497999
v 3.49977 8.670371 -0.766575
...

vt 0.166677 0 0
vt 0.166677 0.029819 0
vt 0.166677 0.052183 0
vt 0.166677 0.067092 0
...

f 1/1 8/8 25/25 
f 8/8 9/9 25/25 
f 9/9 10/10 24/24 
f 10/10 2/2 51/51 
f 2/2 11/11 49/49 
...

Since vertex normals are not provided, Three.js is likely generating default normals. This results in sharp edges due to the calculation being done per face rather than smoothing across adjacent faces.

The basic calculation involves: cross((v1 - v0), (v2 - v0)) which generates a single normal used for all vertices of the face, leading to sharp edges seen in the rendering.

This issue may stem from exporting the mesh without including normals from your modeling software. Review the export settings and ensure that normals are included during the process.

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

Understanding text overflow in JavaScript and jQuery

I am facing an issue where the text in some columns of my table is breaking into two lines. I believe reducing the font size will resolve this problem, but I am unsure about where to start coding for this particular issue. If you have any ideas or sugges ...

javascriptjquery

Can a YouTube video be triggered to play when a specific CSS style is selected?

I am searching for a method to display and play different YouTube videos based on a selected CSS style from a drop-down menu. I believe JavaScript can be utilized to detect the chosen CSS. Include the following in the html header of the page. <script ...

javascriptcsshtmlyoutubeembed

Looking to introduce Vue.js into an established SSR website?

Can Vue be used to create components that can be instantiated onto custom tags rendered by a PHP application, similar to "custom elements light"? While mounting the Vue instance onto the page root element seems to work, it appears that Vue uses the entire ...

javascriptvue.jsprogressive-enhancement

Ways to restart script following Ajax call when additional search results are loaded

Implementing Klevu's search results page has been a manageable task so far. However, I encountered an issue where the search results page is displaying an Add to Cart button that should not be there, as confirmed by Klevu themselves. Their suggestion ...

javascriptajax

The properties of a JSON object are not explicitly defined

When I make an AJAX call, I receive a JSON object and log it using this code: console.log(response); This is the response that gets logged in the console: {"filename":"new.jpg","orientation":"vertical"} However, when I try to access the orientation pro ...

phpjavascriptajaxjsonundefined

Collapsing Bootstrap menu bar causing logo overlap

When the navbar collapses (when it shows the toggle icon), the menu items (home, services, portfolio, about, contact) overlap with the logo. If I remove the position:absolute from the logo (navbar-brand), the menu appears in the center. Is there a way to h ...

javascriptjqueryhtmlcsstwitter-bootstrap

Access account using lightbox effect for the login form

In my simple CSS code, I have used a litebox view. I removed unnecessary CSS properties to keep it clean: <style> .black_overlay{ display: block; } .white_content { display: block; } < ...

javascript

Angular/JS encountered a premature end of program unexpectedly

I am taking my first steps in the world of web development with Angular (and JavaScript in general). I have been trying to rewrite some basic and common examples using Angular. One thing I attempted was to display a simple message using data binding. This ...

javascriptangularjs

Whenever I try to retrieve data from MongoDB using Node.js, I consistently encounter a timeout error

Currently, I am in the process of developing a website using React.js for the front end, Node.js for the back end, and MongoDB as the database. Dummy data has been inserted into the database which can be viewed https://i.sstatic.net/YOzCB.png. The database ...

javascriptnode.jsmongodbexpressmongoose

Component loader with dynamic rendering for multiple components

Currently, I am in search of a method to dynamically render components within my Angular application. While exploring various options, I came across the concept of dynamic component loading in Angular (refer to https://angular.io/guide/dynamic-component-lo ...

javascriptangular

drag and zoom feature similar to Google Maps

Is it possible to create draggable effects similar to Google Maps on a group of div elements? Are there any JavaScript libraries available that can replicate this functionality? ...

javascriptajax

Guide to accessing Realm(JavaScript) object in an asynchronous manner and integrating it with various services

I have incorporated the following code into my project to open Realm asynchronously and integrate it with services. RmProfile.js: import Realm from 'realm'; const PrflSchema = { name: 'Profile', primaryKey: 'id', prope ...

javascriptrealm

Using Python and Selenium to manipulate the webpage and execute JavaScript can help reconstruct the true HTML structure

I have a very basic Selenium code snippet that I am running: <input name="X" id="unique" value="" type="text"> <script> document.getElementById("unique").value="123"; </script> While I can retrieve the input value "123" using driv ...

javascriptpythonformsselenium

jQuery parent() Function Explained

checkout this code snippet - https://jsfiddle.net/johndoe1994/xtu09zz9/ Let me explain the functionality of the code The code contains two containers: .first and .second. The .first container has two default divs with a class of .item. The .second contai ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ways to efficiently populate HTML elements with JSON data

I am working on grasping the concept of functional programming. My understanding so far is that it involves encapsulating everything into functions and passing them around. For instance, in my current example, I am attempting to fetch data from a RESTApi a ...

javascripttypescriptdomfunctional-programming

The length of the scope variable generates an error

var example = $scope.newgoal.gTitle; console.log(example.length); Even running this short code test, it throws an error message: TypeError: Cannot read property 'length' of undefined I've attempted to find various solutions without succes ...

javascriptangularjsionic-framework

Angular: Refresh mat-table with updated data array after applying filter

I have implemented a filter function in my Angular project to display only specific data in a mat-table based on the filter criteria. Within my mat-table, I am providing an array of objects to populate the table. The filtering function I have created loo ...

javascriptangulartypescriptfiltermat-table

"Encountering an undefined error when making an AngularJS $http post request and receiving a

I am working on retrieving a specific value from the server side by passing a variable from the front-end (AngularJS javascript) to the backend (PHP) using $http. Once the server side (PHP) receives the value from the front-end, it executes an SQL query to ...

javascriptphpmysqlangularjshttp-post

Employing jQuery to populate information into an input field, yet encountering an issue where the data is not being successfully transmitted to

On my page, there is a form with an input box <input name="bid_price" id="bid_price" class="form-control"> If I manually enter a value, it gets posted successfully But when I try to insert a value using jQuery, it doesn't get posted, even tho ...

javascriptphpjquery

New methods for Sequelize ES6 models do not currently exist

Encountering issues while using Sequelize JS v4 with ES6 classes, I'm facing difficulty with the execution of instance methods. Despite being defined in the code, these methods appear to be non-existent. For instance - Model File 'use strict&a ...

javascriptnode.jsexpressormsequelize.js