Question

我是初次使用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>

Answer 1

render方法中有这些行：

        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 );

您需要将其删除才能消除红色闪烁。

但是当你的基本材料是黑色时，你根本看不到你的图像。因此，您需要在材质创建中将材料颜色从0x000000更改为0xFFFFFF：

        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} );

Three.js - 如何摆脱物体上闪烁的红灯

1 个答案: