Three.js 使用平面着色时出现“片段着色器未编译”错误

Question

我正在使用 GLTFLoader 在 3.js 中加载模型。它工作得很好，除了我尝试使用平面着色。如果我设置 flatShading = true，则会收到一条错误消息，指出片段着色器未编译。这是我用来加载模型的代码：

function loadModel() {
    // Load the model
    gltfLoader.load(modelPath + '.gltf', function (gltf) {
        for (let i = 0; i < gltf.scene.children.length; i++) {
            // Skip bones
            if (gltf.scene.children[i].isBone) {
                continue;
            }

            // If a mesh has multiple segments, then it is a group with an array of children (segments/meshes)
            // If a mesh only has one segment, then it is a single object (mesh) with no children, not an array of length 1
            let numSegments = gltf.scene.children[i].isGroup ? gltf.scene.children[i].children.length : 1;
            for (let j = 0; j < numSegments; j++) {
                let mesh = gltf.scene.children[i].isGroup ? gltf.scene.children[i].children[j] : gltf.scene.children[i];

                mesh.material.flatShading = true;
                //mesh.material.needsUpdate = true;
            }
        }

        // Show the model
        scene.add(gltf.scene);

        }, undefined, function (error) {
            console.log(error);
        }
    );
}

如果我省略 flatShading 线，模型加载正常。但是，包含 flatShaing 后，我收到以下错误消息：

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Fragment shader is not compiled.


FRAGMENT

ERROR: 0:1233: 'vTBN' : undeclared identifier


  1228:     normal = normalize( normalMatrix * normal );
  1229: #elif defined( TANGENTSPACE_NORMALMAP )
  1230:     vec3 mapN = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0;
  1231:     mapN.xy *= normalScale;
  1232:     #ifdef USE_TANGENT
> 1233:         normal = normalize( vTBN * mapN );
  1234:     #else
  1235:         normal = perturbNormal2Arb( - vViewPosition, normal, mapN, faceDirection );
  1236:     #endif
  1237: #elif defined( USE_BUMPMAP )
  1238:     normal = perturbNormalArb( - vViewPosition, normal, dHdxy_fwd(), faceDirection );
  1239: #endif

我正在使用修订版 143。

我是3D建模新手，所以我不太明白这个错误意味着什么。如果有人对如何解决此问题有任何建议，我们将不胜感激。

Answer 1

您看到的是旧版本

three.js

中的错误。当启用平面着色并且存在几何切线时，会出现着色器编译错误。

自

r154

以来已修复。

如果您无法升级

three.js

版本，请在使用平面着色时遍历场景并通过以下行从几何图形中删除所有

tangent

缓冲区属性：

geometry.deleteAttribute( 'tangent' );