CODEWITHSUNDEEP
three.js
user3253067
user3253067

Reputation: 113

Face orientation with normals in WebGL renderer

I am rendering an object for which i have the following data: vertices, indices for vertices, normals, indices for normals, texture coordinates, indices for texture coordinates. I am using an approach that converts a BufferGeometry, in which i added the coordinates and their indices, to Geometry because of some limitations when texture coordinates are involved. So basically the faces are created automatically when doing the conversion.

My problem is that some faces are not visible. So for that i need to count on my normals and their indices. The problem is that I have created my own routine but that does not change the result. The faces do not show up.

After doing some research, i understood that WebGLRenderer uses the vertex order in which the faces were created for defining the orientation, thing that is not quite helping me at all since the fromBufferGeometry method handled the faces creation.

Is there any way for me to be able to use the vertex normals values and indices to set the orientation, or is there another way how to do this?

Here are some bits of my code:

 geometry = new THREE.BufferGeometry();
 indices = new Uint16Array(coordIndex);
 positions = new Float32Array(coord);
 normals = new Float32Array(normal);
 geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
 geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 geometry.addAttribute( 'normals', new THREE.BufferAttribute( normals, 3 ) );
 offsets = {
           start: 0,
           index: 0,
           count: indices.length
 };
 geometry.offsets.push(offsets);

 geometry2 = new THREE.Geometry();
 geometry2.fromBufferGeometry(geometry);
 geometry2.uvsNeedUpdate = true;
 geometry2.buffersNeedUpdate = true;
 geometry2.elementsNeedUpdate = true;

Upvotes: 0

Views: 722

Answers (1)

xoryouyou
xoryouyou

Reputation: 656

I had some similar Issue when using a custom mesh importer, where the result was not showing some faces. But setting the material.side = THREE.DoubleSide fixed this issue, maybe it works for you.

Upvotes: 1

Related Questions