Question

我正在使用飞鸟物体的示例脚本。但是我如何改变鸟类的颜色呢？我尝试在这条实例化鸟类的线路上进行更改：
bird = birds[ i ] = new THREE.Mesh( new Bird(), new THREE.MeshBasicMaterial( { color:/*Math.random() *0xffffff*/ 0x54A1D8, side: THREE.DoubleSide } ) );

但它没有改变......

Bird.js

 var Bird = function () {

var scope = this;

THREE.Geometry.call( this );

v(   5,   0,   0 );
v( - 5, - 2,   1 );
v( - 5,   0,   0 );
v( - 5, - 2, - 1 );

v(   0,   2, - 6 );
v(   0,   2,   6 );
v(   2,   0,   0 );
v( - 3,   0,   0 );

f3( 0, 2, 1 );
// f3( 0, 3, 2 );

f3( 4, 7, 6 );
f3( 5, 6, 7 );

this.computeCentroids();
this.computeFaceNormals();




function v( x, y, z ) {

    scope.vertices.push( new THREE.Vector3( x, y, z ) );

}

function f3( a, b, c ) {


    scope.faces.push( new THREE.Face3( a, b, c ) );

}

}


Bird.prototype = Object.create( THREE.Geometry.prototype );

主要脚本

        <script>

        var SCREEN_WIDTH = window.innerWidth,
        SCREEN_HEIGHT = window.innerHeight,
        SCREEN_WIDTH_HALF = SCREEN_WIDTH  / 2,
        SCREEN_HEIGHT_HALF = SCREEN_HEIGHT / 2;

        var camera, scene, renderer,
        birds, bird;

        var boid, boids;

        var stats;

        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
            camera.position.z = 450;

            scene = new THREE.Scene();

            birds = [];
            boids = [];

            for ( var i = 0; i < 200; i ++ ) {

                boid = boids[ i ] = new Boid();
                boid.position.x = Math.random() * 400 - 200;
                boid.position.y = Math.random() * 400 - 200;
                boid.position.z = Math.random() * 400 - 200;
                boid.velocity.x = Math.random() * 2 - 1;
                boid.velocity.y = Math.random() * 2 - 1;
                boid.velocity.z = Math.random() * 2 - 1;
                boid.setAvoidWalls( true );
                boid.setWorldSize( 500, 500, 400 );

                bird = birds[ i ] = new THREE.Mesh( new Bird(), new THREE.MeshBasicMaterial( { color:/*Math.random() *0xffffff*/ 0x54A1D8, side: THREE.DoubleSide } ) );
                bird.phase = Math.floor( Math.random() * 62.83 );
                bird.position = boids[ i ].position;
                scene.add( bird );


            }

            renderer = new THREE.CanvasRenderer();
            // renderer.autoClear = false;
            renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
            document.addEventListener('click', triggerPlay, false);
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.body.appendChild( renderer.domElement );

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

            document.getElementById( 'container' ).appendChild(stats.domElement);

            //

            window.addEventListener( 'resize', onWindowResize, false );
            */
        }

        function onWindowResize() {

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

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

        }

        function onDocumentMouseMove( event ) {

            var vector = new THREE.Vector3( event.clientX - SCREEN_WIDTH_HALF, - event.clientY + SCREEN_HEIGHT_HALF, 0 );

            for ( var i = 0, il = boids.length; i < il; i++ ) {

                boid = boids[ i ];

                vector.z = boid.position.z;

                boid.repulse( vector );

            }

        }

        //

        function animate() {

            requestAnimationFrame( animate );

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

        }

        function render() {

            for ( var i = 0, il = birds.length; i < il; i++ ) {

                boid = boids[ i ];
                boid.run( boids );

                bird = birds[ i ];

                color = bird.material.color;
                color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;

                bird.rotation.y = Math.atan2( - boid.velocity.z, boid.velocity.x );
                bird.rotation.z = Math.asin( boid.velocity.y / boid.velocity.length() );

                bird.phase = ( bird.phase + ( Math.max( 0, bird.rotation.z ) + 0.1 )  ) % 62.83;
                bird.geometry.vertices[ 5 ].y = bird.geometry.vertices[ 4 ].y = Math.sin( bird.phase ) * 5;

            }

            renderer.render( scene, camera );

        }

    </script>

Answer 1

在渲染循环中设置颜色以模拟雾。

color = bird.material.color;
color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;

如何改变这三个面部的颜色？

1 个答案: