CODEWITHSUNDEEP
javascriptthree.js
Hi Hi
Hi Hi

Reputation: 376

Three.js: Bottom of mesh can't be displayed

I have converted a mesh from .obj to json using the official converter (https://github.com/mrdoob/three.js/tree/master/utils/converters/obj). The mesh is displayed correctly from one side, but not from the other. I believe the issue is that it only has one side, basically a plane, and therefore all faces and their normals pointing in one direction.

How could I fix this?

Edit: I could add the mesh twice, and one time using material.side = THREE.BackSide;, but loading it twice doesn't seem like the best option to me.

Upvotes: 1

Views: 263

Answers (1)

WestLangley
WestLangley

Reputation: 104823

Only front faces of triangle primitives are rendered by default when using WebGLRenderer. You can override that by setting:

material.side = THREE.DoubleSide; // or THREE.BackSide

The front face is determined by the winding order of the vertices.

If the triangle vertices are specified in counter-clockwise order (CCW), the front face will face towards you; if specified in clockwise order (CW), the front face will face away from you.

This behavior can be changed by the WebGLRenderer.setFaceCulling() method, but it is not likely you would find that necessary.

three.js r.75

Upvotes: 1

Related Questions