Understanding surface orientations of moving objects

I am experimenting with creating a software-based vertex animation for a mesh. It's like a vertex shader, but done in software rather than hardware.

Essentially, I am applying a transformation matrix to each vertex of the mesh. While the mesh itself looks fine, the normals are not looking good at all. I have tried using both computeVertexNormals() and computeFaceNormals(), but they do not seem to work as expected.

Below is the code snippet that I used for the animation (where initialVertices represent the initial vertices generated by the CubeGeometry):

for (var i=0;i<mesh1.geometry.vertices.length; i++)
{
    var vtx=initialVertices[i].clone();
    var dist = vtx.y;

    var rot=clock.getElapsedTime() - dist*0.02;

    matrix.makeRotationY(rot);

    vtx.applyMatrix4(matrix);
    mesh1.geometry.vertices[i]=vtx;
}
mesh1.geometry.verticesNeedUpdate = true;

Here are two examples, one functioning correctly with CanvasRenderer:

and another one that does not work in WebGL:

Any suggestions on what could be missing from my approach?

Answer №1

You seem to be overlooking a few key considerations.

(1) Make sure to specify the ambient reflectance of the material. A common approach is to set it equal to the diffuse reflectance, or color.

var material = new THREE.MeshLambertMaterial( {
    color:0xff0000,
    ambient:0xff0000
} );

(2) If you are manipulating vertices, remember to update centroids, face normals, and vertex normals in the correct sequence. Refer to the source code for guidance.

mesh1.geometry.computeCentroids();
mesh1.geometry.computeFaceNormals();
mesh1.geometry.computeVertexNormals();

(3) When utilizing the WebGLRenderer, ensure that you set the necessary update flags:

mesh1.geometry.verticesNeedUpdate = true;
mesh1.geometry.normalsNeedUpdate = true;

Pro Tip: It's advisable to steer clear of using new and clone within intensive loops.

Version used: three.js r.63

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

Are there any notifications triggered when a draggable element is taken out of a droppable zone?

Within a single droppable area, there is a collection of individual Field Names that can be dragged, and a table featuring X headers, each of which can be dropped into. Initially, these headers are empty. Is there a way to detect when an item is taken out ...

Add the item to an array to store its state

I have a state variable that is initially set as an empty array const [boxes, setBoxes] = useState([]); const [showAddGalley,setShowAddGalley]=useState({galleyNo:""}); I created a function to handle form submissions, where I want to update the b ...

Guide on showcasing an array of objects in HTML with the help of the template element

My goal was to populate the HTML page with an array of objects using the template element. However, I made a mistake and only the last object in the array was displayed correctly on the page. Can anyone help me identify my error and suggest a correction? I ...

Incorporating Past Projects into an Angular 2 Website

Some time ago, I built a Javascript game utilizing the HTML canvas element for image rendering. Now that I have a personal website created with Angular 2, I am unsure of how to properly embed my game into my site. Due to Angular 2 removing the script tag ...

AngularJS has encountered an error due to exceeding the maximum call stack size limit

Utilizing AngularJS and a web API, I am fetching data from an SQL table. I have designed a function that populates input fields with values when a row is selected from an HTML table. However, I encountered an error during debugging when clicking on any row ...

The request for JSON parsing encountered a failed attempt, resulting in an error while trying to parse the JSON

var userData = { "emailAddress": document.getElementById('emailAddress').value, "password": document.getElementById('password').value } var userDataString = JSON.stringify(userData); alert(userDataString); var url = "url"; var ...

The Google Closure Compiler Service is providing faulty code

I've been using Closure Compiler through to minify and obfuscate my JavaScript code, but I seem to be encountering an issue. To troubleshoot, I created a test page with a script. Here's the HTML5 code snippet: <!DOCTYPE html> <html> ...

Tips for incorporating user access control logic into a lazy-loaded Angular Monorepo application without embedding the logic in the main application

In our current project, we are developing an Angular application utilizing the Angular monorepo structure. This setup includes a parent application and several children applications, with the parent application located in the `app` folder and the children ...

Tips for displaying a slideshow within a div using JavaScript

When the HTML loads for the first time, the div slideshow remains hidden until a button is clicked. Any suggestions on how to display the first div without requiring a button click? var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { s ...

Issue with Google Script not initializing in a second form

I'm currently working on a project that is bound to a Google Sheet container. The purpose of this project is to search for a specific value in one column, and based on the result, either mark the record as complete, allow for missing values to be fill ...

Unable to transfer Vue.js components in and out of the project

I have a directory structured like this. VueTree components Classic.vue Modern.vue index.js The Classic and Modern components consist of a template, export default {}, and a style. I am importing both of them in index.js as: import Classic ...

Monitor Socket IO for client disconnection events

I am facing an issue where I need to identify when a user loses connection to the socket. It seems that socket.on("disconnect") is not triggering when I simply close my laptop, leading to the ajax call not executing to update the database and mark the us ...

The Angular Animation constantly resets with each new action taken

In my Angular project, I am working on a scaling animation for a list. I want the animation to only trigger when specific buttons (red and green) are pressed. Currently, the animation restarts regardless of what I click on. Can anyone help me troubleshoot ...

Unallocated functions found within Web Sockets Objects

I am currently utilizing javascript (p5.js) in combination with node.js using express and socket.io. Within my code, I believe the issue lies within this specific section: for (var i = 0; i < 3; i ++){ for (var j = 0; j < 3; j ++){ ...

How to detect changes in Angular 2 using a separate service

Within my AuthService, I store real-time user data and a method for logging in. When the 'Login' button is clicked, the AuthService is called to retrieve updated user data from the server and update the value of 'this.user'. As a resul ...

Guide on including a sum (integer) property in the JSON output of my API

Currently, I am working on an API using Express.js. In one of my functions named getAll, my goal is to not only return an array of records but also include the total number of records in the response. The code snippet below showcases how I have been handli ...

Is it possible for me to include additional fields in a vuetify calendar event?

Is there a method to incorporate additional fields, such as a description, in addition to the name and start/end time for an event on the v-calendar's day view? ...

There seems to be an issue with connecting to the local server at https://localhost:3000/socket.io/ while using a

I am currently working on a Node.js project where I have a client.js for client-side code, and a server.js on a remote server using sockets to communicate over port 3000 In addition, Apache is running on port 80, with a ProxyPass configuration in place to ...

use ajax to dynamically append a dropdown menu

Currently working on creating a form that includes a dropdown menu populated with elements from a database. The challenge I'm facing is ensuring that once an element is selected from the dropdown, another one appears dynamically. My goal is to use AJA ...

Switch between including 'light' or 'dark' styles using Javascript?

I am currently working on a project where I aim to incorporate a dark mode toggle feature. To maintain organization and scalability, I have chosen to implement the SASS (.scss) architecture rather than plain CSS. My plan is to utilize variables within my ...