GLTFLoader and RGBELoader - Adding HDR texture to enviroment

Questions
, ,
1

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:

image
image1919×1033 96.3 KB

And here’s what i want:

image
image1911×925 117 KB

2

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.

3

Thanks for the reply.

Unfortunately, it still doesn’t work

image
image1920×1034 81.1 KB

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.

4

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!

5

You’ve commented this line out

6

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
7

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.