Damaged Battle Helmet

I want to load the Damaged Sci Fi Helmet GLTF model from three.js examples , for loading I have copied to the code from Three.js Loading a .GLTF File and replaced their model with Damaged Sci Fi Helmet model that I uploaded to glitch: https://cdn.glitch.com/a492c1d0-6427-4b27-bee9-8374b483d9f4%2FDamagedHelmet.gltf?v=1620656295727, for some reason when I run the code nothing shows up, see code here: Glitch :・゚✧

Update: I have managed to load the helmet but it still doesn’t look as good as the one from three.js examples, any advice?

Hi Shange,

not sure if i am correct, but in the example they use an environment map,
and also check if you have correct lighting in your scene,
it worked without a hitch when i tried this

You need to hook in the rest of the example which includes the environment map that’s generated by the PMREMGenerator.

I’ve added an envmap but it still doesn’t look like the example three.js examples

Also check (if used) your:

  • outputEncoding
  • toneMapping
  • toneMappingExposure

I’m not sure if you’ve added those yet, but my sense is that this is what’s needed next.

Sorry but the example three.js/webgl_loader_gltf.html at d4aa9e00ea29808534a3e082f602c544e5f2419c · mrdoob/three.js · GitHub doesn’t seem to use toneMappingExposure, how do I use it? also are there any Loaders besides EXRLoader which I can use for my envmap as EXRLoader only allows .exr images which for some reason does not work for me

Check out lines 89 and 90 in the example.

Also you can generate the cubemap faces separately (there are some online generators) and bypass using the THREE.PMREMGenerator.

Thanks it’s looking better now but still doesn’t look quite like the example

Try playing around with the various toneMapping types - three.js webgl - tone mapping

You can even create a custom one although I haven’t tried that yet.

How do I remove the background but still keep the envmap reflection in the Helmet? see image for example:

Set the environment map to false.

three.js has separate scene.environment and scene.background properties. The first affects reflections, the second is the visible background of the scene.

Thanks actually I think I prefer it with a background, see images for comparison:

Thanks all, got it working 100% now, extra high quality just like in the example Three js (neocities.org)