# How to add Environment map

**URL:** <https://discourse.threejs.org/t/how-to-add-environment-map/1927>\
**Category:** Questions\
**Tags:** loaders, materials, textures\
**Created:** [February 24, 2018, 3:28pm UTC](https://discourse.threejs.org/t/how-to-add-environment-map/1927 "2018-02-24T15:28:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AviAvi](https://avatars.discourse-cdn.com/v4/letter/a/48db29/32.png) [@AviAvi](https://discourse.threejs.org/u/AviAvi)\
**Post date:** [February 24, 2018, 3:28pm UTC](https://discourse.threejs.org/t/how-to-add-environment-map/1927/1 "2018-02-24T15:28:36Z")

</div>

Hi i need to add an environment map to my model, ( i am a programmer with limited knowledge of 3D art )

Working demo of the Model is found here: [http://a3d.joladev2.com/webgl-env-map/index.html](http://a3d.joladev2.com/webgl-env-map/index.html)

Environment map is here: /webgl-env-map/assets/env.jpg

Code for the model is here: [https://jsfiddle.net/xk12n88z/4/](https://jsfiddle.net/xk12n88z/4/)

If it is not possible to add this jpg map, then i need a map that makes this lamp looks like chrome, thank you i appreciate any help

---

<div class="post-metadata">

**Author:** ![AviAvi](https://avatars.discourse-cdn.com/v4/letter/a/48db29/32.png) [@AviAvi](https://discourse.threejs.org/u/AviAvi)\
**Post date:** [February 24, 2018, 6:30pm UTC](https://discourse.threejs.org/t/how-to-add-environment-map/1927/2 "2018-02-24T18:30:20Z")

</div>

Ok i used FBX loader and it loads normally,

so mtl and obj loaders will not load normal map

json loader will not load environment map,

but fbx loads everything, and works fine

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [February 24, 2018, 11:08pm UTC](https://discourse.threejs.org/t/how-to-add-environment-map/1927/3 "2018-02-24T23:08:09Z")

</div>

For future readers, it’s also fairly easy to add the environment map after loading the model, e.g. if you want the same model to have a different environment map in different contexts.

```auto
// Load envMap.
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('/path/to/env.jpg');

// Load model.
modelLoader.load('/path/to/model.foo', (object) => {
  // Apply envMap to model.
  object.traverse((node) => {
    if (node.isMesh) node.material.envMap = texture;
  });
});

```

---

<div class="post-metadata">

**Author:** ![kif11](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kif11/32/5993_2.png) [@kif11](https://discourse.threejs.org/u/kif11)\
**Post date:** [May 31, 2021, 5:15pm UTC](https://discourse.threejs.org/t/how-to-add-environment-map/1927/4 "2021-05-31T17:15:34Z")

</div>

I have to set `texture.mapping = THREE.EquirectangularReflectionMapping;` to make it working.

---

<div class="post-metadata">

**Author:** ![emirotin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/emirotin/32/23666_2.png) [@emirotin](https://discourse.threejs.org/u/emirotin)\
**Post date:** [January 20, 2022, 11:24pm UTC](https://discourse.threejs.org/t/how-to-add-environment-map/1927/5 "2022-01-20T23:24:31Z")

</div>

Saved my day 🙂