Search code examples
javascriptmodelthree.js3dlight

Why 3d models are visible in Three.js without using any light sources?

What I have

As shown in the figure below i use Three.js library to create a WEBGL canvas and load a .gltf model in the scene using GLTFLoader.js.

Demo Image

The Code I use

//Add THREE Renderer
renderer_Main = new THREE.WebGLRenderer({ antialias: true });
renderer_Main.setSize(canvasWidth, canvasHeight); //Set Renderer Size

//Add THREE Scene
scene_Main = new THREE.Scene();

//Add First THREE Camera
camera_Main = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 10000);
camera_Main.position.set(-2000, 500, 500); //Set camera position

//Add THREE Grid Helper
var size = 1000; //Value of Each Square Size 
var divisions = 60; //Value of Grid Divisions 
gridHelper = new THREE.GridHelper(size, divisions);
gridHelper.material.opacity = 0.045;
gridHelper.material.transparent = false;
scene_Main.add(gridHelper); //Add Grid in the Scene

//Add THREE Orbit Controller for the first camera
//Activate mouse events (L_Click, Scroll, R_Click) for moving around in 3D scene
orbitController_Main = new THREE.OrbitControls(camera_Main, renderer_Main.domElement);
orbitController_Main.maxPolarAngle = Math.PI / 2;  
orbitController_Main.saveState();

//Add Lights
//var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
//scene_Main.add( directionalLight );

//Add a model (.gltf file)
var loader = new THREE.GLTFLoader();
loader.load( 'models/model_environment/scene.gltf', 
    function ( gltf ) {
        //Add 3d model - file types : .gltf, .bin and (.png materials)
        selectedModel = gltf.scene; 
        selectedModel.scale.set(3,3,3);
        selectedModel.position.y = 45;
        scene_Main.add(selectedModel);
    }, 
    ...
);

The Issue

The issue is that when the objects are loaded are visible. Notice that I don't use any kind of Lights (commented). Also when lights are added, nothing changes. I tried using THREE.DirectionalLight and THREE.PointLight, but no luck. In case you wonder about the materials I use for this example is:

1) Cube: 

camera_RT_Holder = new THREE.Mesh(
   new THREE.BoxGeometry(20, 20, 30),
   new THREE.MeshNormalMaterial()
);

2) .gltf model:

Link of the model

Question If you have an idea what is going on please let me know.

Solution

  • The materials in your glTF file use the KHR_materials_unlit extension. Materials using this extensions are mapped to THREE.MeshBasicMaterial which is an unlit material. That means it does not react on lights so it is visible even without any light sources in your scene.