R131 'tangent' : undeclared identifier

loader.setPath(‘models/gltf/’); loader.load(‘sphere.glb’, function (gltf) {

                    gltf.scene.traverse(function (child) {

                        if (child.isMesh) {

                            // mat.map = child.material.map;
                            // mat.normalMap = child.material.normalMap;
                            // //mat.metalnessMap = child.material.metalnessMap;
                            // mat.roughness = 0;
                            // //mat.metalness = child.material.metalness;
                            // mat.metalness = 0;

                            var sMat = new THREE.MeshPhysicalMaterial();

                            child.material = sMat;

                            //roughnessMipmapper.generateMipmaps(child.material);
                            console.log(child.geometry);
                            child.geometry.computeVertexNormals();
                            child.geometry.computeTangents();
                            console.log(child.geometry);
                        }

                    });

I am here http://localhost:8080/examples/?q=gltf#webgl_ loader_ Gltf modified the code, loaded a model (ball) exported from threejs editr, and loaded it. But the browser reported an error. Before r131, I could set vertextangents = true in the material, but now I don’t have this attribute. What should I do to use tangents correctly? I forced tangents on the shader:

export default /* glsl */`
#define STANDARD
#define USE_UV
#define USE_TANGENT

It should be sufficient to ensure the tangent buffer attribute is defined in the geometry. The renderer automatically uses tangents in this case.

According to your prompt, I did something, but I still couldn’t.

			loaderFBX.load('models/fbx/stanford-bunny.fbx', function (object) {

				model = object.children[0];

				model.traverse( ( obj ) => {
					if (obj.type === "Mesh" ) {
						console.log(obj);
						obj.geometry.usage = THREE.DynamicDrawUsage;
						obj.geometry.computeVertexNormals();
						obj.geometry.computeTangents();
						obj.geometry.needsUpdate=true;
					}

				});

				model.position.set(0, 0, 10);
				model.scale.setScalar(1);
				model.material = material;



				scene.add(model);

			});

At the same time, I also checked the geometric buffer of the ball and found that it has tangent data.
But it will still report errors. What should I do?

Could you create a demo showing this issue?

It is probably not a good idea to force tangents in the shader, are you seeing an error without that? And does this material have a normal map?

1 Like

I modified the shader source code of meshphysicalmaterial of threejs.
I need to add some new features to use tangents.
If the tangent is not forced, no error will be reported.
Some mesh materials do not carry normal maps.

If the material does not carry the found normal map, an error will be reported。

I had a similar issue when extending MeshStandardMaterial. You can override onBeforeCompile and set the defines as below. USE_TANGENT and the “missing” tangent attribute are set before the part of the vertexShader which is exposed in onBeforeCompile.

onBeforeCompile(shader) {
    shader.defines.USE_TANGENT = "";
    ...