# Environment map not working

**URL:** <https://discourse.threejs.org/t/environment-map-not-working/4598>\
**Category:** Questions\
**Tags:** environment-map\
**Created:** [October 22, 2018, 12:52pm UTC](https://discourse.threejs.org/t/environment-map-not-working/4598 "2018-10-22T12:52:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mithradantor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mithradantor/32/2979_2.png) [@mithradantor](https://discourse.threejs.org/u/mithradantor)\
**Post date:** [October 22, 2018, 12:52pm UTC](https://discourse.threejs.org/t/environment-map-not-working/4598/1 "2018-10-22T12:52:42Z")

</div>

I succesfully added an environment map. But what I ideally would like to is to have all the reflections on my model from the environment, but not being able to actually see the environment itself.

is that possible? cant find it on the net ☹

```
 var path = 'model/';
    var format = '.jpg';
    var envMap = new THREE.CubeTextureLoader().load( [
        path + 'posx' + format, path + 'negx' + format,
        path + 'posy' + format, path + 'negy' + format,
        path + 'posz' + format, path + 'negz' + format
    ] );

    scene = new THREE.Scene();
    scene.background = envMap;

    light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
    light.position.set( 0, 1, 0 );
    scene.add( light );
```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 22, 2018, 1:13pm UTC](https://discourse.threejs.org/t/environment-map-not-working/4598/2 "2018-10-22T13:13:39Z")

</div>

Are you looking for something like this? [https://jsfiddle.net/f2Lommf5/15357/](https://jsfiddle.net/f2Lommf5/15357/)

The idea is to assign the cube texture to the `.envMap` property of your material.

---

<div class="post-metadata">

**Author:** ![mithradantor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mithradantor/32/2979_2.png) [@mithradantor](https://discourse.threejs.org/u/mithradantor)\
**Post date:** [October 22, 2018, 1:24pm UTC](https://discourse.threejs.org/t/environment-map-not-working/4598/3 "2018-10-22T13:24:14Z")

</div>

Oh man, you are the bomb! exactly what I was looking for. Weird I couldnt find it, been search for 2 hours and all I found were tutorials / examples with a background lol. Thanks so much (again) Mugen!

Last question if I may. How does one do something like this: [https://marmoset.co/viewer/](https://marmoset.co/viewer/)

(for example top row most right example e.g. Greater Demon)

What kind of light do they use so everything is equally visible, yet has 100% of the material quality as shown inside your 3d tool?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 22, 2018, 1:32pm UTC](https://discourse.threejs.org/t/environment-map-not-working/4598/4 "2018-10-22T13:32:11Z")

</div>

Try to load you model with a lighting setup like in this example: [https://threejs.org/examples/#webgl\_loader\_fbx](https://threejs.org/examples/#webgl_loader_fbx)

In general, it can’t tell you something specific since the viewer does not use `three.js`. But the code used in the example is maybe a good starting point for you (a combination of a `HemisphereLight` and `DirectionalLight`).

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 22, 2018, 2:02pm UTC](https://discourse.threejs.org/t/environment-map-not-working/4598/5 "2018-10-22T14:02:43Z")

</div>

And `THREE.AmbientLight()` 🙂

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 22, 2018, 2:31pm UTC](https://discourse.threejs.org/t/environment-map-not-working/4598/6 "2018-10-22T14:31:55Z")

</div>

The example does not use an `AmbientLight` since `HemisphereLight` is already an indirect diffuse light source. In most cases, you don’t use both light types at the same time.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 22, 2018, 2:36pm UTC](https://discourse.threejs.org/t/environment-map-not-working/4598/7 "2018-10-22T14:36:27Z")

</div>

Yeah, there should be “or” instead of “and” 🙂  
Just to clarify, my reply is not related to that specific Three.js example.