What is the best method for obtaining accurate normal values in three.js?

Question

What is the best method for obtaining accurate normal values in three.js?

I'm having trouble understanding how normals are computed in Three.js.

Here is the issue I am facing:

I have created a simple plane using the following code:

var plane = new THREE.PlaneGeometry(10, 100, 10, 10);
var material = new THREE.MeshBasicMaterial();
material.setValues({side: THREE.DoubleSide, color: 0xaabbcc});
var mesh = new THREE.Mesh(plane, material);
mesh.rotateY(Math.PI / 2);
scene.add(mesh);

When I check the normal of this plane, it shows up as (0, 0, 1). However, since the plane is parallel to the z-axis, this value seems incorrect.

I attempted to calculate the normals by adding the following code:

mesh.geometry.computeFaceNormals();
mesh.geometry.computeVertexNormals();

Despite this, I am still getting the same inaccurate result.

Did I overlook something?

How can I retrieve accurate normal values from Three.js?

Thank you.

javascript three.js

Answer 1

Answer №1

The geometry normals are originally defined in object space, but in your scenario, you need to convert them to world space.

// 1. Ensure the object's matrix is up to date.
// The renderer typically handles this during each rendering cycle, so you may not have to do it manually.
object.updateMatrixWorld();

// 2. Calculate the normal matrix
const normalMatrix = new THREE.Matrix3().getNormalMatrix(object.matrixWorld);

// 3. Lastly, transform the normal into world space
const transformedNormal = normal.clone().applyMatrix3(normalMatrix).normalize();

Using three.js version r.66

Answer 2

The geometry normals are originally defined in object space, but in your scenario, you need to convert them to world space.

// 1. Ensure the object's matrix is up to date.
// The renderer typically handles this during each rendering cycle, so you may not have to do it manually.
object.updateMatrixWorld();

// 2. Calculate the normal matrix
const normalMatrix = new THREE.Matrix3().getNormalMatrix(object.matrixWorld);

// 3. Lastly, transform the normal into world space
const transformedNormal = normal.clone().applyMatrix3(normalMatrix).normalize();

Using three.js version r.66

What is the best method for obtaining accurate normal values in three.js?

Answer №1

Similar questions

Node React authentication

Is it possible for Node.js to execute individual database operations within a single function atomically?

What is the best way to choose all elements from an array based on their key and then combine their values?

Is there a way to make the image above change when I hover over the thumbnail?

Pointer Permissions parsing does not permit creation

Issue with React form not appearing on web browser

Is there an alternative method to retrieve the client's user agent if getStaticProps and getServerSideProps cannot be used together?

I'm struggling to understand the purpose of using response.on

Checking a bcrypt-encrypted password in an Express application

Adding dynamically fetched JSON to an existing table

Having trouble resolving the dependency injection for stripe-angular

Various results can be produced based on the .load() and .resize() or .scroll() functions despite using the same calculation methods

Limit pasted content in an Angular contenteditable div

The Rsuite Uploader is refusing to transfer the file to the Express server

Discover a method to receive an alert when the mouse exits the inner window along the y-axis

Having difficulty with a script not functioning properly within an onclick button

What is the best method for converting an Object with 4 properties to an Object with only 3 properties?

Creating a new array set by utilizing the map method

Is there a way to stop TinyMCE from adding CDATA to <script> elements and from commenting out <style> elements?

Getting information from a database using PHP and AngularJS through the $http.get method