# glTF: Assign an HDR environement map to glTF asset

**URL:** <https://discourse.threejs.org/t/gltf-assign-an-hdr-environement-map-to-gltf-asset/4108>\
**Category:** Questions\
**Tags:** gltf-format\
**Created:** [September 12, 2018, 6:11pm UTC](https://discourse.threejs.org/t/gltf-assign-an-hdr-environement-map-to-gltf-asset/4108 "2018-09-12T18:11:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mikebourbeauart](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mikebourbeauart/32/2491_2.png) [@mikebourbeauart](https://discourse.threejs.org/u/mikebourbeauart)\
**Post date:** [September 12, 2018, 6:11pm UTC](https://discourse.threejs.org/t/gltf-assign-an-hdr-environement-map-to-gltf-asset/4108/1 "2018-09-12T18:11:55Z")

</div>

I have my asset exported and looking alright, but it’s missing an environment map. I know glTF has all the data built in and got some crazy results when I tried to add my own MeshStandardMaterial.

This is what my scene looks like (ambient light is being used to visualize the model, otherwise it’s totally black). Code is below  
 ![rbg_envmap](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/1/17f23509f409fda774fc3b7c1f2b8c92a5d5f863.gif)

```
var renderer;
var control;
var mixer;

var mesh; // use this to get a reference to to the mesh outside the scope of loader.load

var container = document.createElement('div');
document.body.appendChild(container);

var clock = new THREE.Clock();

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.set(50,50,50);
camera.target = new THREE.Vector3( 0, 0, 0 );

renderer = new THREE.WebGLRenderer( { alpha: false } );
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
container.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls( camera, renderer.domElement );

var light = new THREE.AmbientLight( 0xffffff, 1 );
light.position.set( 0.0, 0.0, 0.0 ).normalize();
scene.add( light );

// HDR
var floorMaterial = new THREE.MeshBasicMaterial( {
    color: 0xffffff,
    // needsUpdate: true
} );

var planeGeometry = new THREE.PlaneBufferGeometry( 200, 200 );
var planeMesh1 = new THREE.Mesh( planeGeometry, floorMaterial );
planeMesh1.position.y = - 50;
planeMesh1.rotation.x = - Math.PI * 0.5;
scene.add( planeMesh1 );

var ibl_texture = new THREE.EXRLoader().load( './assets/hdr/piz_compressed.exr', function ( texture ) {
    texture.minFilter = THREE.NearestFilter;
    texture.magFilter = THREE.NearestFilter;
    texture.encoding = THREE.LinearEncoding;

    var cubemapGenerator = new THREE.EquirectangularToCubeGenerator( texture, 512 );
    var cubeMapTexture = cubemapGenerator.update( renderer );

    var pmremGenerator = new THREE.PMREMGenerator( cubeMapTexture );
    pmremGenerator.update( renderer );

    var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
    pmremCubeUVPacker.update( renderer );

    exrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;

    texture.dispose();
    cubemapGenerator.dispose();
    pmremGenerator.dispose();
    pmremCubeUVPacker.dispose();
});

floorMaterial.map = ibl_texture;

var manager = new THREE.LoadingManager();

// Material
var textureLoader = new THREE.TextureLoader();
var aoTexture = textureLoader.load('./assets/textures/ao.png');
var baseTexture = textureLoader.load('./assets/textures/baseColor.png');
var heightTexture = textureLoader.load('./assets/textures/height.png');
var metalTexture = textureLoader.load('./assets/textures/metallic.png');
var normalTexture = textureLoader.load('./assets/textures/normal.png');
var alphaTexture = textureLoader.load('./assets/textures/opacity.png');
var roughTexture = textureLoader.load('./assets/textures/roughness.png');
var scattTexture = textureLoader.load('./assets/textures/scattering.png');

var material = new THREE.MeshStandardMaterial({
    alphaMap: alphaTexture,
    map: baseTexture,
    aoMap: aoTexture,
    normalMap: normalTexture,
    roughness: 1,
    roughnessMap: roughTexture,
    metalness: 1,
    metalnessMap: metalTexture,
    bumpMap: heightTexture,
    lights: true,
});

var loader = new THREE.GLTFLoader();
loader.load( './assets/models/from_sketchfab/scene.gltf', function ( gltf ) {

	var content = gltf.scene;

    clips = gltf.animations;
    content.position.set(0, 0, 0);
	content.scale.set(15, 15, 15);

	scene.add(content);

    clips.forEach((clip) => {
        if (clip.validate()) clip.optimize();
    });

    mixer = new THREE.AnimationMixer(scene);

    clips.forEach((clip) => {
        mixer.clipAction(clip).play();
    });

	// Apply envMap to model.
	content.traverse((node) => {
		if (node.isMesh) {
		    node.material.envMap = ibl_texture;
        }
		debugger;
	});

});

animate();

function animate() {
    requestAnimationFrame( animate );

    if(mixer){

        mixer.update(clock.getDelta());
    }

    render();

}

function render() {
    renderer.render( scene, camera );
}
```

---

<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:** [September 12, 2018, 6:16pm UTC](https://discourse.threejs.org/t/gltf-assign-an-hdr-environement-map-to-gltf-asset/4108/2 "2018-09-12T18:16:35Z")

</div>

Not sure about the HDR environment but for that `material` variable you create, I assume you want to attach it to the mesh in your glTF model? If so, see the notes in [https://github.com/mrdoob/three.js/pull/14897](https://github.com/mrdoob/three.js/pull/14897) — you’ll want `.flipY = false` on each texture, at least.

---

<div class="post-metadata">

**Author:** ![mikebourbeauart](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mikebourbeauart/32/2491_2.png) [@mikebourbeauart](https://discourse.threejs.org/u/mikebourbeauart)\
**Post date:** [September 12, 2018, 9:10pm UTC](https://discourse.threejs.org/t/gltf-assign-an-hdr-environement-map-to-gltf-asset/4108/3 "2018-09-12T21:10:31Z")

</div>

I have the material working, but the hands are freaking out. Everything looks fine if I don’t move the camera. Once I do (mostly when I zoom in and out) the hands start to freak out. Any thoughts? This doesn’t happen when the mesh isn’t assigned.

![crazy_mat](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/e/e0d2df438e7225724b5d3d5d9c16272a4cd92a43.gif)

---

<div class="post-metadata">

**Author:** ![Gerard\_Baldsing](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gerard_baldsing/32/2641_2.png) [@Gerard\_Baldsing](https://discourse.threejs.org/u/Gerard_Baldsing)\
**Post date:** [September 13, 2018, 3:37am UTC](https://discourse.threejs.org/t/gltf-assign-an-hdr-environement-map-to-gltf-asset/4108/4 "2018-09-13T03:37:27Z")

</div>

Hi Mike,

Try swappping this out:  
// Apply envMap to model.  
content.traverse((node) =\> {  
if (node.isMesh) {  
node.material.envMap = ibl\_texture;  
}  
debugger;  
});

For this:

content.traverse( function ( child ) {

```
    if ( child.isMesh ) {
      child.material.envMap = ibl_texture;
      //shadows are optional:
      //child.castShadow = true;
      //child.receiveShadow = true;
    }

  });
```

---

<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:** [September 13, 2018, 4:13am UTC](https://discourse.threejs.org/t/gltf-assign-an-hdr-environement-map-to-gltf-asset/4108/5 "2018-09-13T04:13:18Z")

</div>

Hm, yeah I’m confused by the hands/skinning issue — do you see the same on [http://gltf-viewer.donmccurdy.com/](http://gltf-viewer.donmccurdy.com/)? Or could you share a demo and/or the model? It sounds a bit like [https://github.com/mrdoob/three.js/issues/13288](https://github.com/mrdoob/three.js/issues/13288).

---

<div class="post-metadata">

**Author:** ![mikebourbeauart](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mikebourbeauart/32/2491_2.png) [@mikebourbeauart](https://discourse.threejs.org/u/mikebourbeauart)\
**Post date:** [September 14, 2018, 2:19pm UTC](https://discourse.threejs.org/t/gltf-assign-an-hdr-environement-map-to-gltf-asset/4108/6 "2018-09-14T14:19:56Z")

</div>

It doesn’t occur in the viewer or within my own code if I keep the material off the mesh. It only happens when I assign the material. I figured out that I have to assign the render target to the envmap in my render method (based on the three.js example file for EXR that I’m using). I can send my repo privately if you’d like to inspect it.

---

<div class="post-metadata">

**Author:** ![Aleksei](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aleksei/32/7927_2.png) [@Aleksei](https://discourse.threejs.org/u/Aleksei)\
**Post date:** [November 5, 2019, 3:06pm UTC](https://discourse.threejs.org/t/gltf-assign-an-hdr-environement-map-to-gltf-asset/4108/7 "2019-11-05T15:06:55Z")

</div>

@mikebourbeauart, can you please, show that part of code which you described here:

> I figured out that I have to assign the render target to the envmap in my render method

I took several approaches but failed. All this a bit confusing for me.  
Thanks in advance!