6

I would like to find the best way to add lights from a blender scene into a THREE.js project. I can not find an explanation of how to import the lighting from blender to THREE.js anywhere. You are expected to already have lighting in your THREE.js project. This is not very efficient when working with large scenes.

THREE.js output from blender import using gltf format output from blender import using gltf format

Scene Render From Blender the output im looking for

This is my import statement

initGLTFLoader(){

    this.gltfLoader = new THREE.GLTFLoader();



}

loadCTF(){


    // Load a glTF resource
    this.gltfLoader.load(
        // resource URL
        'ctf.gltf',
        // called when the resource is loaded
        function ( gltf ) {

            // this console.log indicates that the light are actually in the import, 
            // but dont get added to the scene
            console.log(gltf);

            this.scene.add( gltf.scene );


        }.bind(this),
        // called while loading is progressing
        function ( xhr ) {

            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

        },
        // called when loading has errors
        function ( error ) {

            console.log( 'An error happened', error );

        }
    
    );
}
David Clews
  • 795
  • 6
  • 14
  • 5
    Test your glTF model on a viewer first, like https://gltf-viewer.donmccurdy.com/ or https://sandbox.babylonjs.com/. Are your lights there? If not, make sure lights are enabled in your export settings. If so, note that the GLTFLoader docs mention `physicallyCorrectLights` must be enabled on your renderer for the lights to behave according to the glTF spec. https://threejs.org/docs/#examples/en/loaders/GLTFLoader – Don McCurdy Sep 02 '20 at 05:23
  • Also note that having many lights is very expensive in forward rendering – even large scenes are usually lit with only a few simple lights, or baked lighting. – Don McCurdy Sep 02 '20 at 05:25

0 Answers0