CODEWITHSUNDEEP
three.js
Alexandr
Alexandr

Reputation: 123

Why doesn't the 3D model work with AmbientLight?

I add a 3D model in Three.js, but when I turn on AmbientLight, the model doesn't light up as it should. While other 3D models work fine. It's already clear to me that the problem is in the 3D model, but which parameter in textures or in general in the Blender application I broke, I can't understand. It looks like this: enter image description here

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>3D Model</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div class="container-model">
        <canvas id="myCanvas"></canvas>
    </div>

    <script src="js/three.js"></script>
    <script src="js/GLTFLoader.js"></script>
    <script src='https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js'></script>

    <script>
        var renderer,
        scene,
        camera,
        myCanvas = document.getElementById('myCanvas');

        //RENDERER
        renderer = new THREE.WebGLRenderer({
          canvas: myCanvas,
          antialias: true,
          alpha: true
        });
        renderer.setClearColor(0x000000, 0);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth-50, window.innerHeight-50);

        //CAMERA
        camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 1, 5000 );
        camera.position.set(-45, 5, 45);

        var controls = new THREE.OrbitControls(camera, myCanvas);

        controls.enableDamping = true;
        controls.target.set(0, 1, 0);
        controls.minPolarAngle = Math.PI / 3;
        controls.maxPolarAngle = Math.PI / 2;
        controls.enablePan = false;
        controls.enableZoom = false;
        
        //SCENE
        scene = new THREE.Scene();

        //LIGHTS
        var light = new THREE.AmbientLight(0x404040, 2);
        scene.add(light);

        // var light2 = new THREE.DirectionalLight(0xfffde1, 3);
        // light2.position.set(15, 7, 30);
        // light2.target.position.set(0, 0, 0);
        // scene.add(light2);
        // scene.add(light2.target);

        // const helper = new THREE.DirectionalLightHelper(light2);
        // scene.add(helper);


        // LOADER
        var gltfLoader = new THREE.GLTFLoader();
        var clock = new THREE.Clock();

        let mixer;

        gltfLoader.load( "model/scene.gltf", model =>  {
            console.log("Содержимое модели: ", model);
            mixer = new THREE.AnimationMixer(model.scene);
            const clips = model.animations;
            console.log("Список аннимаций: ", clips); // --> Анимации у модели

            const clip = THREE.AnimationClip.findByName( clips, 'mixamo.com' );
            const action = mixer.clipAction( clip );

            scene.add(model.scene);
        });

        //RENDER
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
            if ( mixer ) mixer.update( clock.getDelta() );
        }
        animate();
    </script>
</body>
</html>

Link to download the 3D model: Click

Upvotes: 2

Views: 804

Answers (1)

Mugen87
Mugen87

Reputation: 31076

All materials of your asset have a metalness value of 1. Ambient lights do not affect metallic surfaces.

Considering the type of your asset (a property), the current material parametrization does not make sense. Not everything on a house is metallic.

Since you are not using an environment map right now, you should set the metalness property to 0 anyway.

Upvotes: 4

Related Questions