Calculating Vertex Normals in Three.js

Upon running geometry.computeVertexNormals() in a THREE.BoxGeometry, the resulting vectors seem to be incorrect after calculating the vertex normals. Is this an error or expected behavior?

For reference, consider this example:

geometry = new THREE.BoxGeometry(50, 50, 50);
geometry.computeVertexNormals();
material = new THREE.MeshNormalMaterial();

While everything appears correct initially, upon rotating the X axis, you'll notice that the vectors are pointing in different directions.

mesh.rotation.x = 90 * Math.PI / 180;

One would expect the vector to point directly from the center of the three existing vectors before merging the geometry. Shouldn't it look something like this:
https://i.sstatic.net/MvryY.png
If not, could someone provide an explanation as to why this discrepancy occurs?

Thank you in advance.

Answer №1

calculateVertexNormals finds the mean of the face normals for every vertex's connected faces. In the case of a box mesh, vertices are not uniformly connected to the same number of faces, resulting in varying normal averages. Visualizing the wireframe helps illustrate this concept more clearly.

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

A JQuery function linked to the click event of the body element triggers another click event right away

$().ready(function(){ $("#move-to").click(function(){ $("body").bind("click",function(){ alert("foo"); }); }); }); Why do I receive an alert message of "foo" immediately after clicking on "move-to"? When I bind the " ...

Create a wait function that utilizes the promise method

I need to wait for the constructor() function, which contains an asynchronous method handled by Promise. My goal is to wait for two asynchronous methods within the constructor, and then wait for the constructor itself. However, my code is throwing an err ...

Leveraging AngularJS directives and $scope autonomously

Let me provide some context first: Previously, my focus was on developing lightweight, single-page Angular applications. However, in the past few days, I began working on a new project that combines Tapestry and Backbone. It has proven to be quite overwhe ...

The $(document).ready function may not be compatible with Internet Explorer

I have a page with two links - one for registering and one for logging in. Currently, the register link is the most important. When clicked, it loads a .tpl file using jQuery's load function. Within this tpl file, I include a new JavaScript file usin ...

How can I dynamically assign @ViewChild('anchor_name') to a newly updated anchor element in Angular 2+?

Upon receiving an item through a GET request, I set the item_id upon subscription. In the HTML file, I create a div with an anchor id="{{this.item_id}}". However, I encountered the following error: FeedComponent.html:1 ERROR TypeError: Cannot read propert ...

How come the pop-up isn't displaying in the middle of the screen?

I have encountered a positioning issue while using a semantic modal with Angular. The problem arises when I try to display the modal as it does not appear in the correct position. https://i.sstatic.net/o033E.png Below is the code snippet from my HTML fil ...

Trouble with JavaScript preventing the opening of a new webpage

I need help with a JavaScript function to navigate to a different page once the submit button is clicked. I have tried using the location.href method in my code, but it's not working as expected. Even though I am getting the alert messages, the page i ...

The value of req.files consistently shows as undefined

My issue is with req.files consistently returning undefined. Despite attempting connect-multiparty, body-parser, and express-fileupload, I can't seem to make it work with express-fileupload instead of multer. Can anyone help me troubleshoot this probl ...

Display a container using Fancybox

With just a click of a button, I want to reveal a hidden div in an elegant box. Here's the code snippet that actually works: $("#btnForm").fancybox({ content: $("#divForm").html() }); However, after doing some research, it appears that this may not ...

Transferring values from jQuery AJAX to Node.js

Is there a way to successfully pass a variable from jQuery to nodejs without getting the [object Object] response? I want to ensure that nodejs can return a string variable instead. $('.test').click(function(){ var tsId = "Hello World"; ...

Unlocking the Power of Ajax for Displaying Wordpress Queries

Running into some issues trying to use jQuery for displaying content. I have set up three buttons that, when clicked, load data from a php file on my server. Everything functions properly except when attempting to retrieve Wordpress posts. An error message ...

The issue of innerHTML malfunctioning when multiple eventListeners are used in a JavaScript code for the "Type Ahead" feature

I am currently working on enhancing the "Type Ahead" code from the Wes Box Javascript30 course by adding my own modifications. In the original code, a single data source is used to update search suggestions based on user input. I have adapted the code to i ...

Using ExpressJS to pass a variable from a .js file to index.html

I need assistance with integrating [email protected] I am trying to access a variable from main.js in index.html Here is the code in main.js: const express = require('express') const app = express() var router = express.Router() app.use(& ...

Utilizing JQuery for the Change and Keyup Event Handlers

I am currently utilizing JQuery, CakePHP, and Mysql within my application. One part of my code functions as follows: there is a Textbox for instructions, which, when typed into, is displayed in the Display panel. $(".TextFieldSettings #instructions").keyu ...

The <form> element is giving me headaches in my JavaScript code

Trying to troubleshoot why my HTML pages render twice when I add a form with JavaScript. It seems like the page displays once with the script and again without it. Below is the basic HTML code: <form action="test.php" method="post"> <div class=" ...

Refresh WebPage automatically after a Servlet successfully uploads and processes an image

I have a webpage that includes an image and a button. When the button is clicked, it uploads the image by submitting a form to a file upload servlet. However, after successfully uploading the image, the servlet does not display it in the img tag. Here is ...

Unfortunately, I am unable to utilize historical redirection in React

When an axios request is successfully completed, I want to redirect. However, I am encountering an error that looks like this: https://i.sstatic.net/irTju.png Below is the code snippet: import React, { useState, Fragment } from "react"; import S ...

What is the best way to transfer the value of a slider from jQuery or JavaScript to a Python Flask application

Trying to implement a round slider that displays its value on the client-side webpage. Whenever the user adjusts the slider, the updated value needs to be sent to the server using Python Flask as the backend. I attempted to achieve this using jQuery and Aj ...

Smoky textures and effects in Autodesk Forge Viewer: Creating realistic smoke particle effects within Forge Viewer

I've been working on creating a smoke particle effect in Forge Viewer for a few days now. I'm aiming for something similar to the effect shown in this image. I've explored some three.js particle engine samples, but none of them are compatibl ...

Passing a query variable to an input field through a PHP function

I have developed an autocomplete PHP function that connects to a MySQL database to fetch data based on user input: The PHP file is named search.php and contains the following code: if ( !isset($_REQUEST['term']) ) exit; $dblink = mysql_con ...