Максимальное количество точечных источников света с Three.js - PullRequest
Новая
       55

Максимальное количество точечных источников света с Three.js

3 голосов
/ 06 ноября 2011

Я пытаюсь осветить каждую сторону куба в моей сцене Three.js, используя точечные источники света. Однако кажется, что только 4 из 6 источников света, которые я добавляю в сцену, фактически визуализируются, поскольку верхняя и нижняя грани куба остаются темными. Если я уберу передний и задний фонарь, то верхний и нижний свет вдруг сработают.

Возможно ли, что Three.js одновременно поддерживает только 4 точечные источники света в сцене или я делаю что-то не так?

1 Ответ

5 голосов
/ 06 ноября 2011

Я могу подтвердить, что 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 и проверять максимальное количество источников света.

Трудно сказать, какие у вас настройки, носначала проверьте, если:

  1. ваши огни находятся в пределах разумного расстояния / позиции от вашей модели (не слишком далеко, чтобы иметь минимальное влияние или не закрываться (например, внутри модели), чтобы они не моглисиять)
  2. ваши огни имеют достаточную интенсивность, чтобы сиять.
...