How to load EXR file with OBJ and MTL file

Hello, what is the best way to load this EXR file so that it shows up in the reflections of the object but not in the background? Here is the Codepen (large OBJ file so it may take a second to load).

Load the EXR file like in the following example and then apply the texture to the envMap properties of the object’s materials.

https://threejs.org/examples/#webgl_loader_texture_exr

Am I doing this correctly? https://codepen.io/byaliabbas/pen/VwmbaMV
I have placed the OBJ loader inside the MTL loader inside the EXR loader. I then used materials.envMap = texture; to apply the exr file to the materal. But I don’t see the object load anymore.

Also I tried searching envMap in the docs but I couldn’t find anything referring that property.

The documentation does not support such a search. You can only filter the entries in the navigation panel. So you have open the doc page for the respective material type and then look for envMap e.g.

https://threejs.org/docs/index.html#api/en/materials/MeshPhongMaterial.envMap

Your codepen logs a security error.: When the app is hosted with SSL, you can’t load resources from HTTP links. Use HTTPS instead.

Thank you, I’ve updated the link to be HTTPS and I’m not getting any errors. I have applied the texture to the object’s materials by using materials.envMap = texture; But I’m not sure if I did that correctly because it doesn’t seem like the EXR is having any effect. What am I doing wrong? Moved to JSFiddle because CodePen kept crashing: https://jsfiddle.net/aliabbasdev/qx7fd3vw/17/

Try it like so: https://jsfiddle.net/43wLtjun/

materials.envMap = texture;

This code is wrong since materials is no material object. It’s type is a class from MTLLoader. Besides, when loading a equirectangular texture, you have to define its mapping by doing this.

texture.mapping = THREE.EquirectangularReflectionMapping;

You should also not dispose a texture if you still need it.

Wow that looks amazing, thank you so much. But how can I remove the metalness from the non-glass parts of the object, and keep the label white? Is it possible to have the object render like this?:

I suggest you go for a PBR workflow instead of using MeshPhongMaterial (which is the default material of OBJ/MTLLoader).

To do this, it’s best to author the model as a glTF asset. Imported glTF assets in three.js use MeshStandardMateiral by default (which is a PBR material). By using a roughness/metalness maps you can precisely define different behavior reflection across the object’s surface.