Damaged Battle Helmet

[Shange]

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 :･ﾟ✧

[Shange]

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?

[innovate]

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

[Mark_Bradshaw]

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

[Shange]

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

[Mark_Bradshaw]

Also check (if used) your:

• outputEncoding
• toneMapping
• toneMappingExposure

[Mark_Bradshaw]

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

[Shange]

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

[Mark_Bradshaw]

Check out lines 89 and 90 in the example.

[Mark_Bradshaw]

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

[Shange]

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

[Mark_Bradshaw]

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.

[Shange]

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

[Mark_Bradshaw]

Set the environment map to false.

[donmccurdy]

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

[Shange]

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

[Shange]

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