Smooth polygons in a Three.js model

After implementing the following code:

var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {

    console.log( item, loaded, total );

};

var texture = new THREE.Texture();

var loader = new THREE.ImageLoader( manager );
loader.load( 'obj/'+model+'.jpg', function ( image ) {

    texture.anisotropy = anis;
    texture.image = image;
    texture.needsUpdate = true;

} );

// model

var loader = new THREE.OBJLoader( manager );
loader.load( 'obj/'+model+'.obj', function ( object ) {


    object.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ) {

            child.material.map = texture;
            if(reflex){
                child.material.envMap = reflection;
                child.material.shading = THREE.SmoothShading;
                child.material.reflectivity = reflex;
            }

        }

    } );

    object.scale.set(10,10,10);

    object.position.y = pos;
    object.position.z = 0;
    object.position.x = 0;

    object.name = "model";
    scene.add( object );
} );

Although everything seems to be functioning fine, there is a visibility issue with all polygons on the model...

In order to achieve smoother textures, I stumbled upon this resource , which suggested using the following method:

// First we want to clone our original geometry.
// Just in case we want to get the low poly version back.
var smooth = THREE.GeometryUtils.clone( geometry );

// Next, we need to merge vertices to clean up any unwanted vertex. 
smooth.mergeVertices();

// Create a new instance of the modifier and pass the number of divisions.
var modifier = new THREE.SubdivisionModifier(divisions);

// Apply the modifier to our cloned geometry.
modifier.modify( smooth );

// Finally, add our new detailed geometry to a mesh object and add it to our scene.
var mesh = new THREE.Mesh( smooth, new THREE.MeshPhongMaterial( { color: 0x222222 } ) );
scene.add( mesh );

However, I seem to have hit a roadblock as I am unsure where to fetch the 'geometry' object from... Can anyone offer some guidance?

Answer №1

To enhance the appearance of your 3D model, consider smoothing out the vertex normals. You can achieve this by executing the following code:

mesh.geometry.computeVertexNormals();

Make sure to call this function for each child mesh within your object during traversal.

If the above solution does not rectify the issue, it is possible that adjacent faces on your model do not share vertices. In such a scenario, prior to computing vertex normals, include the following code:

mesh.geometry.mergeVertices();

This advice pertains to three.js version r.67

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 toggle the visibility of a dynamically created HTML element in ASP.NET?

I'm working on a program that displays two different prices depending on whether the user is registered or not. Registered users will see both the normal price and the discounted price, while unregistered users will only see the normal price. I need t ...

Another option instead of using jQuery to retrieve the active element in the

My goal was to determine when the user is interacting with an INPUT or TEXTAREA element and set a flag variable to true during this engagement. Once the user clicks out of these elements, the flag should be set back to false. To achieve this, I utilized j ...

Javascript skips the if-else block when used asynchronously

I'm struggling with an if-else block in my code that is not getting executed as expected. Despite rearranging the code to ensure the if-else condition is met before calling http.get(), I am still facing issues. This problem arises while working with A ...

Difference between Angular2 import syntax: "use 'import * as <foo>'" or "use 'import {<foo>}'"

There are two different ways to import modules that I have noticed. Most imports seem to follow this syntax: 'import {<something>} (for example, import { Component } from '@angular/core';) The other way of importing looks like this: ...

Displaying AJAX Confirmation in a Popup Window

My form is set up to insert data into a database via an AJAX request. Upon successful insertion, the "rentinsert.php" will display a success message on the page that reads "Your order has been placed". However, I would like this success message to appear i ...

Sending multipart/form-data with ajax in PHP returns as null

Recently, I encountered an issue with a form I have. It has the following attributes: method="post" and enctype="multipart/form-data" Every time I submit the form using AJAX $("#openTicketSubmit").click(function(){ var support_ticket_form_data = new ...

Switching between Custom tooltips and default tooltips in Chart.js and Angular

I need to show a tooltip based on certain conditions options: { tooltips: if (tooltipCondition === true) { { mode: 'index', position: 'nearest' } } else { { enabled: false, custom: function (tooltipMo ...

Utilize JavaScript to extract and transform plain text into a JSON object through the filtering process

After receiving the plain text data from an input source, I have the following information: 1 agri dev ban lt shortform1 346 346 343 343 9,671 346 3,330,659 78 -3.00 -0.87 3.00 0.87 361.80 400.07 449.86 472.00 283.00 2 Api Pwr Cpy shortform2 355 355 347 ...

Deliver the PDF generated document to Django Rest API

I have successfully created a PDF from an HTML file, Now, I am looking to automatically email the PDF as soon as it is generated. To achieve this, I need to send it to Django REST for backend processing. However, I am facing difficulties in figuring out h ...

The Vue.js v-on:mouseover function is not functioning properly in displaying the menu

When I hover over a LI tag, I want to display a menu. I have successfully implemented it using a simple variable with the following code: @mouseover="hoverFormsControls=true" @mouseleave="hoverFormsControls=false" However, when I attempted to use an arr ...

Can Highchart dynamically adjust color choices based on the quantity of data points available?

I am trying to figure out how to import a specific color palette into my column graph. I want to use different color palettes based on the number of data points in my graph - for 3 or fewer points, I want to use the top row colors, for 4 points I want to u ...

Unable to modify attribute within $templateCache through an AngularJS Directive

Here is my Directive code: module.directive('iconSwitcher', function() { return { restrict : 'A', link : function(scope, elem, attrs) { var currentState = true; elem.on('click', function() { ...

Is there a way to extract the MIME type from a base64 string?

My base64 String appears as "UklGRkAdEQBXQVZFZm10IBIAAAABAAEAg...". I am attempting to download this file using my browser. Therefore, I convert it to a blob with the following function: b65toBlob: function(b64Data, sliceSize = 512) { ...

What is the best way to access nested JSON data in Vue.js code demonstrated here?

How can I properly access the nested JSON data for stage.name provided in the example below? As shown in the template, my attempt to retrieve the stage name is not working. Using vue.js created() { url="http://{{ api_endpoint }}" fetch(url) ...

Tips for transforming an array of images (from an input field) into a JSON string

After creating an array of images using var a = Array.from(document.getElementById("id").files); I tried to generate a JSON string of that array using var b = JSON.stringify(a); However, all I get is an empty array. It seems like this issue is common w ...

Encountering a Blank Area at the Top of a Printed AngularJS Screen

Currently, I am tackling an issue in AngularJS while working on the Print Invoice Page. The problem I am encountering is a blank space at the top of the printed screen. Check out the image here Below is my code: HTML <div id="invoice" class="compact ...

The custom pagination feature in Addsearch UI always default to displaying the first page of search

I am currently using addsearch-ui version 0.7.11 for my project. I have been attempting to integrate a customized pagination function based on this example template. However, I have encountered an issue where the arrow buttons always navigate to the first ...

Problem with jQuery datetimepicker plugin not being identified as a date by Date() object wrapper

I have a component that allows users to select a date and time using the datetimepicker plugin found at this link. Here is my current configuration: $('#startDate').datetimepicker({ format: 'Y-m-d\\TH:i:s', }); When I c ...

deleting an object from an array in JavaScript

I have a collection of objects that looks like this: [{ "id": 2, "price": 2000, "name": "Mr Robot T1", "image": "http://placehold.it/270x335" }, { "id": 1, "price": 1000, "name": "Mr Robot T2", "image": "http://placehold.it ...

Why are my API routes being triggered during the build process of my NextJS project?

My project includes an API route that fetches data from my DataBase. This particular API route is triggered by a CRON job set up in Vercel. After each build of the project, new data gets added to the database. I suspect this might be due to NextJS pre-exe ...