在 Three.js 中，灯光不起作用

Question

我一直在用 Three.js 胡闹一段时间，但我似乎无法让任何类型的灯工作。场景使用 0xFFFFFF 环境光照正常渲染，但添加光照没有任何效果。我直接从示例中复制了代码，灯光列在场景的子节点中，只是没有显示出来......

        var camera;
        var scene;
        var renderer;

        $(document).ready(function() {
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
            camera.position.z = 600;

            scene = new THREE.Scene();
            scene.add(new THREE.PointLight(0xFF0000, 3.0, 1000));

            renderer = new THREE.WebGLRenderer();
            //renderer = new THREE.CanvasRenderer();
            renderer.domElement.id = "canvas";
            renderer.setSize(window.innerWidth, window.innerHeight);

            $(window).resize(function() {
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
            $("#container").get(0).appendChild(renderer.domElement);

            function Animate() {
                requestAnimationFrame(Animate);
                renderer.render(scene, camera);
            }

            Animate();
        });

Answer 1

您的代码并没有提供太多可使用的功能，但要检查的一件事是您的材质是否支持灯光。这意味着您应该使用MeshLambertMaterial 或MeshPhongMaterial。另请注意，如果您使用自定义 ShaderMaterial，它不会神奇地获得场景照明。