WebGL 渲染器中带有法线的面部方向

Question

我正在渲染一个对象，我有以下数据：顶点、顶点索引、法线、法线索引、纹理坐标、纹理坐标索引。我正在使用一种将 BufferGeometry 转换为 Geometry 的方法，其中我添加了坐标及其索引，因为涉及纹理坐标时存在一些限制。所以基本上在进行转换时会自动创建面孔。

我的问题是有些面孔不可见。所以为此我需要依靠我的法线和他们的指数。问题是我已经创建了自己的例程，但这并没有改变结果。面孔没有出现。

经过一些研究后，我了解到 WebGLRenderer 使用创建面的顶点顺序来定义方向，这对我一点帮助都没有，因为 fromBufferGeometry 方法处理了面的创建。

有什么方法可以使用顶点法线值和索引来设置方向，或者有其他方法可以做到这一点吗？

这是我的一些代码：

 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;

Answer 1

我在使用自定义网格导入器时遇到了一些类似的问题，结果没有显示某些面孔。但是设置 material.side = THREE.DoubleSide 解决了这个问题，也许它对你有用。

WebGL 渲染器中带有法线的面部方向

Face orientation with normals in WebGL renderer

three.js