如何改变这三张.js脸的颜色

How to change the color of these three.js faces?

本文关键字:js 三张 颜色 何改变 改变      更新时间:2023-09-26

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

但它没有改变...

鸟.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>

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

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