There seems to be an issue with the rendering of face normals in Three

I am in the process of creating my own model format and attempting to generate custom geometry. Although I can successfully import the geometry, the face normals do not render even after being added to the geometry.

Below is the input file:

# Coordinates
    0e+0 0e+0 0e+0
    1e+0 0e+0 0e+0
    1e+0 0e+0 1e+0
    0e+0 0e+0 1e+0
    0e+0 1e+0 0e+0
    1e+0 1e+0 0e+0
    1e+0 1e+0 1e+0
    0e+0 1e+0 1e+0
# Normals
0e+0 0e+0 -1e+0
0e+0 -1e+0 0e+0
0e+0 0e+0 1e+0
0e+0 1e+0 0e+0
1e+0 0e+0 0e+0
-1e+0 0e+0 0e+0

# Connectivity List
1 2 6 5
1 2 3 4
3 4 8 7
6 5 8 7
2 6 7 3
1 5 8 4

This is how I am importing it:

    var geometry = new THREE.Geometry();

    //Add all positions to geometry
    for (var g=0;g<coordinates.length;g++){
        geometry.vertices.push(coordinates[g]);

    }

    for(var l=0;l<connectivity.length;l++){

        //sml file have rectangular faces but three js uses triangular faces (THREE.Face4 is deprecated) so converting 4 vertex faces to 3 verex faces 
        var index0= connectivity[l][3]-1;
        var index1= connectivity[l][4]-1;
        var index2= connectivity[l][5]-1;
        var index3= connectivity[l][6]-1;

        //If normals is exist thenaddthem to face array too

        if(normals.length==connectivity.length){

            console.log("Normals are exist");

            var face0=  new THREE.Face3(index0,index1,index2); 
            face0.normal.set(normals[l]);

            geometry.faces.push(face0);

            var face1=  new THREE.Face3(index2,index3,index0);
            face1.normal.set(normals[l]);

            geometry.faces.push(face1); 

        } else{

            console.log("Normals are not exist");

            var face0=  new THREE.Face3(index0,index1,index2);
            geometry.faces.push(face0);
            var face1= new THREE.Face3(index2,index3,index0);

            geometry.faces.push(face1); 
        }
    }

    geometry.computeBoundingBox();
    // geometry.compteVertexNormals();
    geometry.computeFaceNormals();

In the code, I am converting quads to triangles in the face (connectivity list) array as FACE4 is deprecated in Three.js. Additionally, I assign the same normal to both triangles that share the same quad.

Here is a visualization of this box:

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

Do you see any missing components or potential issues?

javascriptthree.jsface

Answer №1

The statements below are not correctly written in terms of syntax.

face0.normal.set(normals[l]);
...
face1.normal.set(normals[l]);

Face3.normal represents a Vector3, and the method Vector3.set requires 3 parameters.

If normals[l] has properties like x, y, and z:

face0.normal.set(normals[l].x, normals[l].y, normals[l].z);

this will set it accurately.

Alternatively, you can directly pass the normal as a Vector3 into the Face3 constructor. Check out the documentation here for more details.

Considering new information:

Given that normals[l] is already a Vector3, using Vector3.copy instead of set would be more appropriate:

face0.normal.copy(normals[l]);

However, since it is a Vector3, ideally, you should just include it in the constructor as previously mentioned.

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

Utilizing JSON Data for Dynamically Displaying Database Objects on a Google Map

After carefully reviewing the information provided in the initial responses and working on implementation, I am updating this question. I am currently utilizing the Google Maps API to incorporate a map into my Ruby on Rails website. Within my markets mode ...

javascriptruby-on-railsajaxjsongoogle-maps

Issue with combining jQuery-UI and Bootstrap offcanvas components

I've been struggling to understand why my Bootstrap navbar isn't working properly with jQuery-UI. It seems like they're not cooperating, and I can't seem to figure out the issue. If you have any insight into this problem, you'll be ...

javascriptjqueryjquery-uibootstrap-5

What is the unit testing framework for TypeScript/JavaScript that closely resembles the API of JUnit?

I am in the process of transferring a large number of JUnit tests to test TypeScript code on Node.js. While I understand that annotations are still an experimental feature in TypeScript/JavaScript, my goal is to utilize the familiar @Before, @Test, and @Af ...

javascripttypescript

How to retrieve the row index from a table using JavaScript

This question has cropped up numerous times, and despite trying various solutions suggested before, none of them seem to be effective in my case. Within a modal, I have a table where users can make changes that are then used to update the database. The ta ...

javascriptphpjqueryhtmlmysql

Enhance the JavaScript Array and reformat it once more

Alright, so here's the scenario: var inventory = ["axe", "shield", "bow", "staff"]; I decided to convert this array into a string and store it in my localStorage. localStorage.setItem("inventory", JSON.stringify(inventory)); Then I implemented a f ...

javascriptarrayslocal-storage

jQuery scripts were not loaded, resulting in an uncaught type error

Hey there! I am currently using jQuery Tablesorter to handle pagination on my website, but it seems to be throwing an error in the browser console. The specific error message reads: Uncaught TypeError: undefined is not a function viewTags:24 (anonymous fu ...

javascriptjquerypaginationtypeerror

Remove a property from an object using Object.assign()

Is there a way to remove a key using Object.assign() rather than setting the value to undefined in this scenario? In my code, I am utilizing .filter() to iterate through certain items. When a match is found, I aim to modify the x-property value while also ...

javascriptnode.jsreactjsobject

execute a method encapsulated within a factory from external to AngularJS

Although this question is similar to others posted here, none of the solutions provided have worked for me. My Cordova/AngularJS/Ionic app currently polls a remote server every 10 minutes to retrieve JSON data, and push notifications are working correctly ...

javascriptangularjscordovafactory

A Guide to Filtering MongoDB Data Using Array Values

I am trying to extract specific data from a document in my collection that contains values stored in an array. { "name": "ABC", "details": [ {"color": "red", "price": 20000}, {" ...

javascriptangulartypescriptmongodbmean-stack

The contents of a Javascript array are not appearing within a div element

I have developed a program that reads JSON data related to a concert event. The JSON file consists of an object named global, which includes details about the band name and venue. Additionally, there is a tickets object that contains information on all ava ...

javascriptjqueryhtmlarraysjson

When I use the shift method on one array, it alters the contents of that array

I am encountering a peculiar issue with two arrays of objects in my program. One array is named "Responses" and the other is called "Questions." The problem arises when I remove the first element from an object in the "Questions" array using shift() meth ...

javascriptarraystypescriptbotframework

The failed Mocha test was the result of combining Node/Express, async/await, and new Mongoose with the {useMongoClient: true

I recently updated my API to use async/await instead of callbacks. The transition went smoothly and all functions worked properly. I followed a TDD approach using Mocha/Chai, and all my tests passed without any issues. However, whenever I started my serv ...

javascriptnode.jsmongodb

Error: The JavaScript engine Hermes is throwing a TypeError because it is unable to access the property 'navigate' which is undefined

Trying to set up react navigation has been a challenge, especially when attempting to move navigation items into their individual components. Below is a Stack Navigator within APP.js: import React from 'react'; import { StyleSheet, Text, View } ...

javascriptreactjsreact-native

What is the best way to set the v-model property to an object that is constantly changing

I'm in the process of creating a dynamic form that allows users to add additional fields by simply clicking on a button labeled "adicionar condição." The concept is similar to what can be seen in the screenshot below: https://i.stack.imgur.com/Mpmr6 ...

javascriptvue.jsvuetify.jsv-model

Show image in entire browser window without resizing unless image is oversized

I am trying to achieve the display of an image centered within the entire browser window with a few conditions in place. If the image can fit within the browser's client area, it should be displayed at its original size. If the image is too tall or to ...

javascriptjquerycss

Show temporary information on the user's side in a table

To better explain the issue, please refer to the accompanying image. I am working with a Master/Detail form, specifically a Bill of Materials, which involves storing data in two separate database tables. The top portion of the form (Product, Quantity) is ...

phpjavascriptjqueryajaxcodeigniter

React Video Component not re-rendering upon state change

I am facing an issue while developing a video player in React. The page retrieves JSON data from the server and creates simple clickable links to change the video content. I have integrated an HTML5 player as a component, passing props such as controls, sr ...

javascriptreactjsuse-effectuse-state

The functionality of Jquery .slideToggle("slow") seems to be glitchy when used as a table expander

I attempted to implement the .slideToggle("slow"); feature to my table, following the instructions detailed here: W3Schools The toggle effect seems to be functioning, but not as expected. I want the effect to behave similar to the example on the W3School ...

javascriptjqueryhtmljquery-uislidetoggle

Differences in behavior of jquery-ajax between Mozilla Firefox and Google Chrome

I am facing a peculiar issue. My current task involves using the Google Maps API to retrieve latitude and longitude data based on zip codes, with the following script: $(document).ready(function(){ $.ajax({ url:"http://maps.googleapis.com/maps/ ...

javascriptgoogle-mapsjquery

What is the best way to switch between three different menus and ensure that the last selected menu remains open when navigating to a new page

My knowledge of javascript, jquery, and php is pretty much non-existent, unfortunately. I only have a grasp on html and css at the moment. However, I will be starting school to learn these languages in the fall! The issue I am currently facing is creating ...

javascriptphpjqueryajaxwordpress