javascript - 三.js奇怪的灯光行为

Question

我在我的 colladaLoader 中使用threejs，我的模型显示很好，除了环境光或相关的东西有时会使它变暗.. 光来来去去。使用以下代码，我如何禁用此行为并使照明恒定且明亮？

代码：

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container, stats;
var camera, scene, renderer, objects;
var particleLight, pointLight;
var skin;

function load_model(el,model_url,type) {

            window.loader = new THREE.ColladaLoader();
            window.loader.options.convertUpAxis = true;

            window.imageReplace = [{"name":"stock.jpg","new_image":"colors/generated_color.png"}];

            window.loader.load( model_url, imageReplace, function ( collada ) {
                //console.log(collada);
                dae = collada.scene;
                skin = collada.skins[ 0 ];

                dae.scale.x = dae.scale.y = dae.scale.z = 0.040;
                dae.updateMatrix();

                //setMaterial(dae, new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "/media/images/stock.jpg") } ));
                window.init(el);
                window.animate();

            } );

            window.init = function(el) {

                container = document.createElement( 'div' );
                el.append( container );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.set( 2, 2, 3 );

                scene = new THREE.Scene();

                // Add the COLLADA

                scene.add( dae );

                particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
                scene.add( particleLight );

                // Lights

              //  scene.add( new THREE.AmbientLight( 0xFFFFFF ) );

                var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xeeeeee );
                directionalLight.position.x = Math.random() - 0.5;
                directionalLight.position.y = Math.random() - 0.5;
                directionalLight.position.z = Math.random() - 0.5;
                directionalLight.position.normalize();
                scene.add( directionalLight );

                // pointLight = new THREE.PointLight( 0xffffff, 4 );
                // pointLight.position = particleLight.position;
                // scene.add( pointLight );

                renderer = new THREE.WebGLRenderer();
                if ( type =='edit')
                    renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
                else
                    renderer.setSize( window.innerWidth/3, window.innerHeight/3 );

                container.appendChild( renderer.domElement );

                // stats = new Stats();
                // stats.domElement.style.position = 'absolute';
                // stats.domElement.style.top = '0px';
                // container.appendChild( stats.domElement );

                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                if ( type =='edit')
                    renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
                else
                    renderer.setSize( window.innerWidth/3, window.innerHeight/3 );

            }

            //

            var t = 0;
            var clock = new THREE.Clock();

            window.animate = function() {

                var delta = clock.getDelta();

                requestAnimationFrame( animate );

                if ( t > 1 ) t = 0;

                if ( skin ) {

                    // guess this can be done smarter...

                    // (Indeed, there are way more frames than needed and interpolation is not used at all
                    //  could be something like - one morph per each skinning pose keyframe, or even less,
                    //  animation could be resampled, morphing interpolation handles sparse keyframes quite well.
                    //  Simple animation cycles like this look ok with 10-15 frames instead of 100 ;)

                    for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {

                        skin.morphTargetInfluences[ i ] = 0;

                    }

                    skin.morphTargetInfluences[ Math.floor( t * 30 ) ] = 1;

                    t += delta;

                }

                window.render();
                //stats.update();

            }

            window.render = function() {

                var timer = Date.now() * 0.0005;

                camera.position.x = Math.cos( timer ) * 10;
                camera.position.y = 2;
                camera.position.z = Math.sin( timer ) * 10;

                camera.lookAt( scene.position );

                particleLight.position.x = Math.sin( timer * 4 ) * 3009;
                particleLight.position.y = Math.cos( timer * 5 ) * 4000;
                particleLight.position.z = Math.cos( timer * 4 ) * 3009;

                renderer.render( scene, camera );

            }


}

Answer 1

您的主要（？）灯光位置定义为随机的，如下所示：

            directionalLight.position.x = Math.random() - 0.5;
            directionalLight.position.y = Math.random() - 0.5;
            directionalLight.position.z = Math.random() - 0.5;

只需在那里使用硬编码的恒定位置。

您也可以使用环境光，根本不需要位置。如果需要，您可以从代码中取消注释。