为什么 3D 模型不能使用 AmbientLight？

Question

我在 Three.js 中添加了一个 3D 模型，但是当我打开 AmbientLight 时，模型没有按预期点亮。而其他 3D 模型工作正常。我已经很清楚问题出在 3D 模型中，但我无法理解纹理中的哪个参数或一般情况下我破坏了 Blender 应用程序中的哪个参数。它看起来像这样：

代码：

<!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/three@0.99.0/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下载3D模型：Click

Answer 1

您的所有 material 资产的 metalness 值为 1。环境光不影响金属表面。

考虑到您的资产类型 (a 属性)，当前的 material 参数化没有意义。不是房子上的所有东西都是金属的。

由于您现在没有使用环境贴图，无论如何您都应该将 metalness 属性设置为 0。

为什么 3D 模型不能使用 AmbientLight？

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

three.js