Question

我试图通过使用点光源点亮我的Three.js场景中立方体的每一面。然而，似乎我添加到场景中的6个灯中只有4个实际上被渲染为立方体的顶面和底面保持黑暗。如果我取下前后灯，那么顶部和底部的灯突然会起作用。

Three.js是否有可能在场景中同时支持4个点光源或者我做错了什么？

Answer 1

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

three.js point lights demo

以下是完整的参考代码：

<!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阵列添加更多颜色并测试最大光量。

很难说出你的设置是什么，但先检查是否：

你的灯光在你的模型的合理距离/位置范围内（不要到最小影响或不关闭（例如在模型内），这样它们就无法发光）
你的灯光有足够的强度照耀。

具有Three.js的最大点光源数

1 个答案: