文章/答案/技术大牛

发布

社区首页 >问答首页 >具有Three.js的最大点光源数量

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

Stack Overflow用户

提问于 2011-11-06 20:51:11

回答 1查看 3.7K关注 0票数 3

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

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

lighting

three.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-11-06 21:57:43

我可以确认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 );
                }

请随意添加更多的颜色到液晶阵列，并测试出最大数量的光。

很难说你的设置是什么，但首先检查一下：

你的灯与你的模型的距离/位置是合理的(不是太远，影响最小，也不是太近(例如，在模型内部)，这样他们就不会发光)
你的灯有足够的强度来发光。

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8027093

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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