GLTFLoader and RGBELoader - Adding HDR texture to enviroment

Hi, I’m been trying to apply an HDR texture to my enviroment for “reflecting” it into my gltf model.

So far I’ve tried with PMREM Generator and failed.
So, I went with the new approach using the RGBELoader: three.js webgl - GLTFloader

And failed as well. I’m clearly missing something but can’t figure out what it is.

Here´s my code:


            import * as THREE from 'three';
            import { OrbitControls } from 'https://unpkg.com/three@0.136.0/examples/jsm/controls/OrbitControls.js';
			import { GLTFLoader } from 'https://unpkg.com/three@0.136.0/examples/jsm/loaders/GLTFLoader.js';
			import { RGBELoader } from 'https://unpkg.com/three@0.136.0/examples/jsm/loaders/RGBELoader.js';

        let scene, camera, renderer, figure, controls, pmremGenerator;

        function init() {
           
            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight);
            camera.position.set(800,200,1000);

            scene = new THREE.Scene();
            
           /* pmremGenerator = new THREE.PMREMGenerator( renderer );
            pmremGenerator.compileEquirectangularShader();*/

            new RGBELoader()
            .load('royal_esplanade_1k.hdr', function (texture){

                texture.mapping = THREE.EquirectangularReflectionMapping;    
                //var envMap = pmremGenerator.fromEquirectangular(texture).texture;
                scene.background = texture;
                scene.enviroment = texture;

                /*texture.dispose();
                pmremGenerator.dispose();*/

                render();

                const loader = new GLTFLoader();

                loader.load('DamagedHelmet.gltf', function (gltf) {

                    gltf.scene.scale.set(200, 200, 200);
                    scene.add( gltf.scene);

                    render();
               
                }, undefined, function (error) {

                console.error(error);

                } );
            });

            renderer = new THREE.WebGLRenderer( { antialias : true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.toneMapping = THREE.ReinhardToneMapping;
            renderer.toneMappingExposure =1;
            //renderer.shadowMap.enabled = true;
            renderer.outputEncoding = THREE.sRGBEncoding;
            document.body.appendChild(renderer.domElement); 

            controls = new OrbitControls(camera, renderer.domElement);
            controls.addEventListener('change', render);
            controls.enableDamping = true;

            var hlight = new THREE.AmbientLight (0xffffff,2.8);
            scene.add(hlight);

           var directionalLight = new THREE.DirectionalLight(0xffffff,0.8);
            directionalLight.position.set(3000,1000, 1000);
            directionalLight.castShadow = true;
            scene.add(directionalLight);

            directionalLight.shadow.mapSize.width = 0;
            directionalLight.shadow.mapSize.height = 0; 
            directionalLight.shadow.camera.near = 1; 
            directionalLight.shadow.camera.far = 2000;
            directionalLight.shadow.camera.left = 50;
            directionalLight.shadow.camera.right = 50;
            directionalLight.shadow.camera.top = 50;
            directionalLight.shadow.camera.bottom = 50;

        }

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

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

        init();
        render();
   

Here´s the result:

And here’s what i want:

If you want to replicate the looks of the example, remove the ambient and directional light and try again.

BTW: The intensity of your ambient light is way too high.

Thanks for the reply.

Unfortunately, it still doesn’t work

I played a little with the ambient light but didn’t work, what I want to achieve is the enviroment’s “reflection” into my model.

I’d suggest turning off all other lights and shadows, focus on setting up the environment map first. If that’s still not working please share updated code or a demo!

You’ve commented this line out

It’s fine doing this. With recent three.js versions, it’s not necessary to work with PMREMGenerator on app level anymore if you want to apply an environment map.

1 Like

Thanks for the help guys. I discarded the old file and create a new one based in this: three.js webgl - GLTFloader

And it worked. The old file had an error I couldn’t find but with the example it worked.