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