# Replace GLTF Material with Wireframe After Loading?

**URL:** <https://discourse.threejs.org/t/replace-gltf-material-with-wireframe-after-loading/41962>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [August 27, 2022, 7:44pm UTC](https://discourse.threejs.org/t/replace-gltf-material-with-wireframe-after-loading/41962 "2022-08-27T19:44:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ccammack](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@ccammack](https://discourse.threejs.org/u/ccammack)\
**Post date:** [August 27, 2022, 7:44pm UTC](https://discourse.threejs.org/t/replace-gltf-material-with-wireframe-after-loading/41962/1 "2022-08-27T19:44:09Z")

</div>

Hello, I’m trying to load the damaged helmet and replace its material with the wireframe shader from [the wireframe demo](https://threejs.org/examples/?q=wirefra#webgl_materials_wireframe) but I only get a solid grey helmet.

 ![2022-08-27 12_27_18-Helm - JSFiddle - Code Playground - Brave](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/d/7d202056c249dccc55c8cc56e347b12cb6ae97c5.png)

Here’s my fiddle: [Helm - JSFiddle - Code Playground](https://jsfiddle.net/ccammack/4f079zmo/222/)

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

Can anyone see what I’m missing?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [August 27, 2022, 8:12pm UTC](https://discourse.threejs.org/t/replace-gltf-material-with-wireframe-after-loading/41962/2 "2022-08-27T20:12:15Z")

</div>

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

```nohighlight
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:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/9/096ca064fe65fe2afd34ab289648064bd3cbde8b.jpeg)

Link: [Helm - JSFiddle - Code Playground](https://jsfiddle.net/prisoner849/r9daj5pL/)