三.js:网格底部无法显示 [英] Three.js: Bottom of mesh can't be displayed

问题描述

我已经使用官方转换器 (https://github.com/mrdoob/three.js/tree/master/utils/converters/obj).网格从一侧正确显示，但从另一侧无法正确显示.我认为问题在于它只有一侧，基本上是一个平面，因此所有面及其法线都指向一个方向.

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?

我可以添加网格两次，一次使用 material.side = THREE.BackSide;，但加载两次似乎不是最好的给我选择.

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.

推荐答案

在使用 WebGLRenderer 时，默认情况下仅渲染三角形图元的正面.您可以通过设置覆盖它:

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

正面由顶点的缠绕顺序决定.

如果三角形顶点按逆时针顺序 (CCW) 指定，则正面将面向您；如果按顺时针顺序 (CW) 指定，则正面将背对您.

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.

可以通过 WebGLRenderer.setFaceCulling() 方法更改此行为，但您不太可能认为这是必要的.

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

three.js r.75

three.js r.75

这篇关于三.js:网格底部无法显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！