Three.js 的最大点光源数答案

【问题标题】：Maximum number of point lights with Three.jsThree.js 的最大点光源数
【发布时间】：2011-12-23 01:09:42
【问题描述】：

我正在尝试使用点光源照亮我的 Three.js 场景中立方体的每一面。然而，我添加到场景中的 6 盏灯中似乎只有 4 盏实际上被渲染了，因为立方体的顶面和底面仍然是黑暗的。如果我去掉正面和背面的灯，顶部和底部的灯会突然起作用。

是否可能 Three.js 在一个场景中同时只支持 4 个点光源，还是我做错了什么？

【问题讨论】：

【解决方案1】：

我可以确认 three.js 支持超过 4 个灯。我通过修改画布灯示例做了一个简单的测试，它可以工作：

这是完整的代码供参考：

<!doctype html>
<html lang="en">
    <head>
        <title>three.js canvas - point light</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                background-color: #000;
                margin: 0px;
                overflow: hidden;
            }

            #info {
                position: absolute;
                top: 0px; width: 100%;
                color: #ffffff;
                padding: 5px;
                font-family: Monospace;
                font-size: 13px;
                text-align: center;
            }

            a {
                color: #ff0080;
                text-decoration: none;
            }

            a:hover {
                color: #0080ff;
            }
        </style>
    </head>
    <body>

        <div id="container"></div>
        <div id="info">
            based on <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - point lights demo.<br />
        </div>

        <script src="../build/Three.js"></script>

        <script src="js/RequestAnimationFrame.js"></script>

        <script>

            var camera, scene, renderer,
            mesh,sphere;

            init();
            animate();

            function init() {

                var container = document.getElementById( 'container' );

                camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 100;

                scene = new THREE.Scene();

                var lc = [0xFF0000,0x00FF00,0x0000FF,0xFFFF00,0x00FFFF,0xFF00FF];

                var PI2 = Math.PI * 2;
                var program = function ( context ) {

                    context.beginPath();
                    context.arc( 0, 0, 1, 0, PI2, true );
                    context.closePath();
                    context.fill();

                }

                var nl = lc.length;
                var ai = PI2/nl;
                for(var i = 0; i < nl ; i++){
                    var light = new THREE.PointLight( lc[i], 2, 50 );
                    scene.add(light);
                    light.position.x = Math.cos(ai*i) * 40;
                    light.position.y = Math.sin(ai*i) * 40;

                    var p = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: lc[i], program: program } ) );
                    p.position.copy(light.position);
                    p.scale.multiplyScalar(0.5);
                    scene.add( p );
                }

                sphere = new THREE.SphereGeometry( 20, 12, 6, false );
                mesh = new THREE.Mesh( sphere, new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ) );
                mesh.overdraw = true;
                scene.add( mesh );

                renderer = new THREE.CanvasRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

            }

            //

            function animate() {

                requestAnimationFrame( animate );
                render();

            }

            function render() {

                mesh.rotation.y -= 0.01;
                renderer.render( scene, camera );

            }

        </script>
    </body>
</html>

您需要的大部分内容都在 init 中：

var lc = [0xFF0000,0x00FF00,0x0000FF,0xFFFF00,0x00FFFF,0xFF00FF];

                var PI2 = Math.PI * 2;
                var program = function ( context ) {

                    context.beginPath();
                    context.arc( 0, 0, 1, 0, PI2, true );
                    context.closePath();
                    context.fill();

                }

                var nl = lc.length;
                var ai = PI2/nl;
                for(var i = 0; i < nl ; i++){
                    var light = new THREE.PointLight( lc[i], 2, 50 );
                    scene.add(light);
                    light.position.x = Math.cos(ai*i) * 40;
                    light.position.y = Math.sin(ai*i) * 40;

                    var p = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: lc[i], program: program } ) );
                    p.position.copy(light.position);
                    p.scale.multiplyScalar(0.5);
                    scene.add( p );
                }

随意为 lc 阵列添加更多颜色并测试最大数量的灯光。

很难判断您的设置是什么，但请先检查是否：

您的灯与您的模型处于合理的距离/位置（不要太远以产生最小的影响或不要关闭（例如在模型内部），因此它们将无法发光）
您的灯有足够的强度来发光。

【讨论】：

这适用于画布渲染器，但不适用于 webgl 渲染器。要增加灯光的数量，您需要像这样初始化渲染器：renderer = new THREE.WebGLRenderer({ maxLights: 6 }); 这可能不适用于某些硬件。