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

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Wes*_*ley 5

Three.js 中的环境光是一个简单的间接光模型，它被材质漫反射。

在您的示例中，您已将材料metalness属性设置为 1；也就是说，您正在建模纯金属。纯金属不会漫反射光——它们只反射镜面光。

使用时MeshStandardMaterial，您应该始终指定环境贴图 ( material.envMap)，以便您的金属材料可以反射某些东西。

三.js r.89

归档时间：	7 年，11 月前
查看次数：	968 次
最近记录：	7 年，11 月前