Strange outcome in Three.js rendering

Is it possible to correct the reflection issue around the cycles?

I noticed some strange results on my object and I've attached pictures to illustrate the problem.

Current result in Three.js:

https://i.sstatic.net/iJbpm.jpg https://i.sstatic.net/hv3jY.gif

Desired outcome:

https://i.sstatic.net/uMKAJ.jpg

https://i.sstatic.net/r48iC.jpg

loader.load( "model.js", function(geometry){
    geometry.computeVertexNormals();

    var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {
      color: 0xffffff,
      specular: 0xffffff,
      shininess: 65,
      metal: true,
      envMap: cubeCamera.renderTarget
    }));
    scene.add(mesh);
    });

The model was exported using the three.js json exporter from blender and contains vertices, faces, and UVs.

javascriptthree.jsblender

Answer №1

It seems like the issue you are facing is due to the use of triangle polygons with poor topology, often resulting in what is known as "pinching."

When creating models for Three.js or any game engine, it's important to follow good modeling practices. Here are some suggestions to improve reflections:

  • Reduce the number of polygons to only include essential details.
  • Aim for a cleaner topology by using quads instead of triangles.
  • Consider setting up smoothing groups to enhance the overall appearance.

To quickly solve the problem, consider using a simple planar shape with cutouts rather than complex surfaces that may not be visible. In my experience, reflections are better preserved when using MeshPhongMaterial with flat vertices under the same smoothing group, even if ngons and tris are present.

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

Create eye-catching banners, images, iframes, and more!

I am the owner of a PHP MySQL website and I'm looking to offer users banners and images that they can display on their own websites or forums. Similar to Facebook's feature, I want to allow users to use dynamic banners with links. This means the ...

phpjavascriptmysqlbanner

Div with headers that stick to the top and stack when scrolling

I am working on creating a lengthy scrollable list of grouped items where the group titles remain visible at all times (stacked). When a user clicks on a group header, the page should scroll to the corresponding items. I have successfully used the positio ...

javascriptcsssticky

Alter the functionality of the input element that has a tag of 'multiple'

I am encountering an issue with a form that allows users to upload multiple photos. When selecting multiple files at once, everything works as expected. However, if a user wants to add images one by one, each new addition deletes the previous file due to t ...

javascripthtmlformsinput

Utilizing OutlinePass in THREE.js version 102 for enhanced visual effects on skinned mesh surfaces

It seems that /examples/js/postprocessing/OutlinePass.js from THREE.js r102 does not work correctly with skinned meshes. The rendered outline always remains in the mesh's rest position. I am looking for a way to make this work, meaning updating the o ...

three.js

What is the best way to pass the text of a selected option in a dropdown menu to a function when a button is clicked in AngularJS?

Alright, so I've got this HTML page with a select element. The select has three options defined in the $scope below: <div id="mainID" ng-controller="theController"> <form name="assetTypeForm" class="form-horizontal" role="form" novalidat ...

javascriptjqueryangularjs

The request for the URL (https://deno.land/std/encoding/csv.ts) could not be sent due to an operating system error with code 100

Encountering an issue with importing the stdlib files from deno.land to the local cache when running mod.ts. Error: error sending request for url (): error trying to connect: tcp connect error: An attempt was made to access a socket in a way forbidden by ...

javascriptdeno

Is there a way to generate a specular effect using a specular map within a custom shader in Three.js?

My latest project involves creating a realistic earth in WebGL with Three.JS. I've successfully added day and night textures along with an atmosphere effect. Now, I'm looking to add a specular effect specifically on the water sections of the eart ...

three.jswebglshaderspecular

Encountering a 404 error in Angular MVC project while trying to load a

Trying to access an edit partial named AddEditPersonModal.cshtml from a different folder in my MVC project, in order to load its contents into a UI Bootstrap modal using Angular. However, when the index.cshtml page loads, I encounter a 404 error related to ...

javascriptangularjsasp.net-mvcasp.net-mvc-4

Looking for a discreet JavaScript-based text editor with advanced features?

Our CMS has been using the now-unsupported RichTextBox control for a while, and we want to find a lighter-weight alternative with better cross-browser support. Initially, we were considering different ASP.NET components, but I am starting to think that an ...

asp.netjavascriptjquery

Tips for iterating through a nested object in JavaScript with the forEach method

Here is my answer to the query. In this snippet, results represents a freshly initialized array. The object address nests within the user object. response.data.forEach(user => { results.push({ id: user.id, name: user.n ...

javascriptvue.jsforeachvuejs2

Stuck at loading: Electron encountering issues with Aurelia Navigation Setup

UPDATE 1: An unexpected challenge has arisen As I endeavored to install and configure Aurelia Navigation with Typescript and Electron by following these instructions: https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript I succe ...

javascripttypescriptelectronaureliajspm

Ways to incorporate various styles on a mobile screen for a javascript-generated function

In my current project, I have implemented a JavaScript function that renders HTML within a module. function generateHTML(bankName) { let content = `<div class="bankName" style=""><strong style="font-size: 28px;font-wei ...

javascripthtmljquery

Searching in the Kendo Dropdown List using text and value

$(document).ready(function() { $("#selection").kendoDropDownList({ filter: "startswith", dataTextField: "SelectionName", dataValueField: "SelectionID", dataSour ...

javascriptangularjskendo-uikendo-dropdown

Is there a way to prevent my jQuery from triggering the <a href> unless the ajax post is successful?

I am attempting to update the database and redirect the user's browser to a new page with just one click. Here is how the HTML appears: <a id='updateLiveProgress' style='width:118px;' href='~link~'>Click here</ ...

javascriptjqueryajax

Having trouble adding elements (after the initial iteration) using the push() method in JavaScript

I'm facing an issue where I have a string and an array, but I'm unable to push elements after the first iteration. Below is the code I'm using: response1 = "hello"; var arr = [""]; arr.push(response1); console.log("First position " + arr[0 ...

javascriptarrays

HTMLElement addition assignment failing due to whitespace issues

My current challenge involves adding letters to a HTMLElement one by one, but I'm noticing that whitespace disappears in the process. Here's an example: let s = "f o o b a r"; let e = document.createElement('span'); for (let i ...

javascripthtmltypescript

The z-index overlapping problem in webkit browsers is a result of Angular 7 animations

I have implemented staggered animations in my Angular 7 application to bring elements to life upon page load. However, I am facing a strange z-index problem with one of my components. Here is the animation code: @Component({ selector: 'track-page& ...

javascriptcssangularcss-animationsangular-animations

Is the vertex count of a Geometry in Three.js increased when it is converted to a BufferGeometry?

Recently, I've been experimenting with the fromGeometry method to convert regular Geometry objects into BufferGeometry objects. To my surprise, I noticed that the number of vertices increases during this conversion process. For instance, consider the ...

javascriptthree.js

Next.js presents a challenge with double-language applications

I am currently in the process of developing a web application using Next.js that will cater to users who speak my native language and English. I have a specific approach in mind: First, I plan to create a folder: /pages/en-us pages/ |--(all app pages) |- ...

javascriptnext.js

Tips for showing the value in the subsequent stage of a multi-step form

Assistance is required for the query below: Is there a way to display the input field value from one step to the next in multistep forms? Similar to how Microsoft login shows the email in the next step as depicted in the image below: https://i.sstatic.ne ...

javascriptphphtmlcss