Replace GLTF Material with Wireframe After Loading?

Hello, I’m trying to load the damaged helmet and replace its material with the wireframe shader from the wireframe demo but I only get a solid grey helmet.

Here’s my fiddle: Helm - JSFiddle - Code Playground

Uncomment line 18 (//if (false)) to see the original material.

Can anyone see what I’m missing?

Geometry needs to be non-indexed.
There is setupAttributes() function in the example.
You need to do something like this:

new GLTFLoader().load(
  'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf',
  function(gltf) {
    //console.log("gltf:", gltf);
    //if (false)
    {
      gltf.scene.traverse(function(object) {
        if (object.type === 'Mesh') {
          let g = object.geometry.clone().toNonIndexed();
          object.geometry.dispose();
          object.geometry = g;
          setupAttributes(object.geometry); // add this function from the example to your code
          const material = new THREE.ShaderMaterial({
            uniforms: {
              'thickness': {
                value: 1
              }
            },
            vertexShader: document.getElementById('vertexShader').textContent,
            fragmentShader: document.getElementById('fragmentShader').textContent,
            side: THREE.DoubleSide,
            alphaToCoverage: true // only works when WebGLRenderer's "antialias" is set to "true"
          });
          object.material = material;
        }
      });
    }

    scene.add(gltf.scene);
  });

and you’ll get this:

Link: Helm - JSFiddle - Code Playground

1 Like