Question

在以下示例中，环境光不起作用（一切都是黑色）。为什么会这样？我该如何解决？如果我放置聚光灯，它可以工作，所以它必须是环境光线有问题，但我按照文档... =：O

<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            var geometry = new THREE.BoxGeometry( 1, 1, 1 );

            material = new THREE.MeshStandardMaterial( {
                color: 0x0c79bf,
                    roughness: 0.71,
                    metalness: 1,
                    normalScale: new THREE.Vector2( 1, - 1 ), // why does the normal map require negation in this case?
                    side: THREE.DoubleSide
                } );


            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            var alight = new THREE.AmbientLight( 0x404040);
            scene.add( alight );

            camera.position.z = 5;

            var animate = function () {
                requestAnimationFrame( animate );

                cube.rotation.x += 0.01;                
                cube.rotation.y += 0.01;

                renderer.render(scene, camera);
            };

            animate();
        </script>
    </body>
</html>

Answer 1

three.js中的环境光是一种简单的间接光模型，它被材料漫反射。

在您的示例中，您已将材料metalness属性设置为1;也就是说，你正在塑造一种纯金属。纯金属不会漫反射光 - 它们只是镜面反射光。

使用MeshStandardMaterial时，您应始终指定环境地图（material.envMap），以便您的金属材料可以反映出来。

three.js r.89

为什么环境光在这个例子中不起作用？

1 个答案: