Three.js-如何消除对象上闪烁的红灯_Three.js

Three.js-如何消除对象上闪烁的红灯

three.js

Three.js-如何消除对象上闪烁的红灯,three.js,Three.js,我刚开始使用Three.js，我用它来学习，希望这不是一个荒谬的问题我的网格对象上有一个奇怪的过渡红色，它将图像/纹理变成红色，但我不知道它来自哪里。我试过移动摄像机的角度，但没有成功感谢您的帮助代码如下： <body> <div id="container"></div> <script src="http://threejs.org/build/three.min.js"></script> &l

我刚开始使用Three.js，我用它来学习，希望这不是一个荒谬的问题

我的网格对象上有一个奇怪的过渡红色，它将图像/纹理变成红色，但我不知道它来自哪里。我试过移动摄像机的角度，但没有成功

感谢您的帮助

代码如下：

<body>

    <div id="container"></div>

    <script src="http://threejs.org/build/three.min.js"></script>

    <script src="http://threejs.org/examples/js/controls/FirstPersonControls.js"></script>

    <script src="http://threejs.org/examples/js/Detector.js"></script>

    <script>

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

        var container;
        var camera, controls, scene, renderer;
        var light, pointLight;

        var mesh, mesh1, mesh2, mesh3, mesh4, mesh5;
        var material_sphere1, material_sphere2, material_sphere3, material_sphere4, material_sphere5;

        var clock = new THREE.Clock();

        init();
        animate();

        function init() {

            container = document.getElementById( 'container' );

            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 500 );
            camera.position.set( 0, 25, 0 );

            var listener = new THREE.AudioListener();
            camera.add( listener );

            controls = new THREE.FirstPersonControls( camera );

            controls.movementSpeed = 160;
            controls.lookSpeed = 0.08;
            controls.noFly = true;
            controls.lookVertical = false;

            scene = new THREE.Scene();


var texture = THREE.ImageUtils.loadTexture( 'http://tam.outbrain.com/anita/vr-module-rec-by-nytimes.png', {}, function(){ 
// use to test when image gets loaded if it does
// alert('texture loaded') 
}, 
function(){ 
    alert('error') 
});

var texture2 = THREE.ImageUtils.loadTexture( 'http://tam.outbrain.com/anita/vr-module-rec-by-snl.png', {}, function(){ 
// use to test when image gets loaded if it does
// alert('texture loaded') 
}, 
function(){ 
    alert('error') 
});

var texture3 = THREE.ImageUtils.loadTexture( 'http://tam.outbrain.com/anita/vr-module-rec-by-toms.png', {}, function(){ 
// use to test when image gets loaded if it does
// alert('texture loaded') 
}, 
function(){ 
    alert('error') 
});

var texture4 = THREE.ImageUtils.loadTexture( 'http://tam.outbrain.com/anita/vr-module-rec-by-verse.png', {}, function(){ 
// use to test when image gets loaded if it does
// alert('texture loaded') 
}, 
function(){ 
    alert('error') 
});

var texture5 = THREE.ImageUtils.loadTexture( 'http://tam.outbrain.com/anita/vr-module-rec-by-whats-happening.png', {}, function(){ 
// use to test when image gets loaded if it does
// alert('texture loaded') 
}, 
function(){ 
    alert('error') 
});




            var sphere = new THREE.BoxGeometry( 1, 30, 30 );
            var sphere2 = new THREE.BoxGeometry( 1, 30, 30 );
            var sphere3 = new THREE.BoxGeometry( 1, 30, 30 );
            var sphere4 = new THREE.BoxGeometry( 1, 30, 30 );
            var sphere5 = new THREE.BoxGeometry( 1, 30, 30 );


            material_sphere1 = new THREE.MeshBasicMaterial( { map: texture, color: 0x000000} );
            material_sphere2 = new THREE.MeshBasicMaterial( { map: texture2, color: 0x000000} );
            material_sphere3 = new THREE.MeshBasicMaterial( { map: texture3, color: 0x000000} );
            material_sphere4 = new THREE.MeshBasicMaterial( { map: texture4, color: 0x000000} );
            material_sphere5 = new THREE.MeshBasicMaterial( { map: texture5, color: 0x000000} );



            // sound spheres

            var mesh1 = new THREE.Mesh( sphere, material_sphere1 );
            mesh1.position.set( 42, 25, 0 );
            scene.add( mesh1 );


            //

            var mesh2 = new THREE.Mesh( sphere2, material_sphere2 );
            mesh2.position.set( 30, 25, 35 );
            mesh2.rotation.y = -Math.PI / 4;
            scene.add( mesh2 );

            //
            var mesh3 = new THREE.Mesh( sphere3, material_sphere3 );
            mesh3.position.set( -5, 25, 50 );
            mesh3.rotation.y = -Math.PI / 2;
            scene.add( mesh3 );


            //
            var mesh4 = new THREE.Mesh( sphere4, material_sphere4 );
            mesh4.position.set( 30, 25, -35 );
            mesh4.rotation.y = -Math.PI / -4;
            scene.add( mesh4 );


            //
            var mesh5 = new THREE.Mesh( sphere5, material_sphere5 );
            mesh5.position.set( -5, 25, -50 );
            mesh5.rotation.y = -Math.PI / -2;
            scene.add( mesh5 );






            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );

            container.innerHTML = "";
            container.appendChild( renderer.domElement );

            //

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

        }

        function onWindowResize() {

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

            renderer.setSize( window.innerWidth, window.innerHeight );

            controls.handleResize();

        }

        function animate() {

            requestAnimationFrame( animate );
            render();

        }


        function render() {

            var delta = clock.getDelta(),
                time = clock.getElapsedTime() * 5;

            controls.update( delta );

            material_sphere1.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );
            material_sphere2.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );
            material_sphere3.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );
            material_sphere4.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );
            material_sphere5.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );



            renderer.render( scene, camera );

        }

    </script>

</body>


如果（！Detector.webgl）Detector.addGetWebGLMessage（）；
var容器；
摄像机、控件、场景、渲染器；
变光灯、点光源；
var网格，网格1，网格2，网格3，网格4，网格5；
变量材料球1、材料球2、材料球3、材料球4、材料球5；
var clock=新的三个时钟（）；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'container'）；
摄像头=新的三个透视摄像头（50，window.innerWidth/window.innerHeight，1500）；
摄像机位置设置（0,25,0）；
var listener=new THREE.AudioListener（）；
添加（侦听器）；
控件=新的三个。第一个人控件（摄像头）；
controls.movementSpeed=160；
控件。lookSpeed=0.08；
controls.noFly=true；
controls.lookVertical=false；
场景=新的三个。场景（）；
var texture=THREE.ImageUtils.loadTexture（'http://tam.outbrain.com/anita/vr-module-rec-by-nytimes.png“，{}，函数（）{
//用于测试图像何时加载（如果加载）
//警报（'纹理已加载'）
}, 
函数（）{
警报（'错误'）
});
var texture2=THREE.ImageUtils.loadTexture（'http://tam.outbrain.com/anita/vr-module-rec-by-snl.png“，{}，函数（）{
//用于测试图像何时加载（如果加载）
//警报（'纹理已加载'）
}, 
函数（）{
警报（'错误'）
});
var texture3=3.ImageUtils.loadTexture（'http://tam.outbrain.com/anita/vr-module-rec-by-toms.png“，{}，函数（）{
//用于测试图像何时加载（如果加载）
//警报（'纹理已加载'）
}, 
函数（）{
警报（'错误'）
});
var texture4=THREE.ImageUtils.loadTexture（'http://tam.outbrain.com/anita/vr-module-rec-by-verse.png“，{}，函数（）{
//用于测试图像何时加载（如果加载）
//警报（'纹理已加载'）
}, 
函数（）{
警报（'错误'）
});
var texture5=3.ImageUtils.loadTexture（'http://tam.outbrain.com/anita/vr-module-rec-by-whats-happening.png“，{}，函数（）{
//用于测试图像何时加载（如果加载）
//警报（'纹理已加载'）
}, 
函数（）{
警报（'错误'）
});
var sphere=新的3.BoxGeometry（1,30,30）；
var sphere2=新的三盒几何体（1,30,30）；
var sphere3=新的三盒几何体（1,30,30）；
var sphere4=新的三盒几何体（1,30,30）；
var sphere5=新的三盒几何体（1,30,30）；
material_sphere1=新的三个.MeshBasicMaterial（{map:texture，color:0x000000}）；
material_sphere2=新的三个.MeshBasicMaterial（{map:texture2，color:0x000000}）；
material_sphere3=新的三个.MeshBasicMaterial（{map:texture3，color:0x000000}）；
material_sphere4=新的三个.MeshBasicMaterial（{map:texture4，color:0x000000}）；
material_sphere5=新的三网格基本材质（{map:texture5，color:0x000000}）；
//声球
var mesh1=新的三个网格（球体、材质和球体1）；
网格1.位置.集合（42,25,0）；
场景。添加（网格1）；
//
var mesh2=新的三个网格（sphere2，材质为sphere2）；
网格2.位置设置（30、25、35）；
mesh2.rotation.y=-Math.PI/4；
场景。添加（网格2）；
//
var mesh3=新的三个网格（球体3，材质为球体3）；
网格3.位置设置（-5,25,50）；
mesh3.rotation.y=-Math.PI/2；
场景。添加（网格3）；
//
var mesh4=新的三个网格（球体4，材质为球体4）；
网格4。位置。设置（30，25，-35）；
mesh4.rotation.y=-Math.PI/-4；
场景。添加（网格4）；
//
var mesh5=新的三个网格（球体5，材质为球体5）；
网格5。位置。设置（-5，25，-50）；
mesh5.rotation.y=-Math.PI/-2；
场景。添加（网格5）；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.innerHTML=“”；
container.appendChild（renderer.doElement）；
//
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
controls.handleResize（）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
var delta=clock.getDelta（），
time=clock.getElapsedTime（）*5；
控制。更新（增量）；
材料1.color.setHSL（0.0,0.3+0.7*（1+数学cos（时间））/2,0.5）；
材料2.color.setHSL（0.0,0.3+0.7*（1+数学cos（时间））/2,0.5）；
材料3.color.setHSL（0.0,0.3+0.7*（1+Math.cos（时间））/2,0.5）；
材料4.color.setHSL（0.0,0.3+0.7*（1+Math.cos（时间））/2,0.5）；
材质5.color.setHSL（0.0,0.3+0.7*（1+Math.cos（时间））/2,0.5）；
渲染器。渲染（场景、摄影机）；
}

在

渲染

方法中有这些行

        material_sphere1.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );
        material_sphere2.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );
        material_sphere3.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );
        material_sphere4.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );
        material_sphere5.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );

        material_sphere1 = new THREE.MeshBasicMaterial( { map: texture, color: 0xFFFFFF} );
        material_sphere2 = new THREE.MeshBasicMaterial( { map: texture2, color: 0xFFFFFF} );
        material_sphere3 = new THREE.MeshBasicMaterial( { map: texture3, color: 0xFFFFFF} );
        material_sphere4 = new THREE.MeshBasicMaterial( { map: texture4, color: 0xFFFFFF} );
        material_sphere5 = new THREE.MeshBasicMaterial( { map: texture5, color: 0xFFFFFF} );