THREE.js Whats the best way to add lighting from blender exported gltf
Asked Answered
I

1

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 );

        }
    
    );
}
Ironwork answered 2/9, 2020 at 3:50 Comment(2)
Test your glTF model on a viewer first, like gltf-viewer.donmccurdy.com or 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. threejs.org/docs/#examples/en/loaders/GLTFLoaderHypermetropia
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.Hypermetropia
W
0

you have to export it as gltf and take it to the https://threejs.org/editor/ and adject the values for the shadows you have to code it by traversing the object and getting what cast shadows and what receive shadows

Wittie answered 31/8 at 14:44 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.