Three.js会飞走飞回来的鸟

效果图

demo

import './index.css';


// stats
var stats;
(function(){
    stats = new Stats();
    document.body.appendChild( stats.dom );
})();

// gui
var gui;
(function(){
    gui = new dat.GUI();
    var fn = new function() {
        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03 ; 
    }
    gui.add(fn,'rotationSpeed', 0, 0.5); 
    gui.add(fn,'bouncingSpeed', 0, 0.5); 
})();

// renderer
var renderer;
(function(){
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.gammaInput = true;
	renderer.gammaOutput = true;
    document.body.appendChild(renderer.domElement);
})();

// scene
var scene;
(function(){
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xcce0ff );
    scene.fog = new THREE.Fog( 0xcce0ff, 500, 10000 );
})();

// 相机
var camera;
(function(){
    camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 1000, 50, 1500 );
    camera.updateMatrix();
})();

// controls

(function(){
    var controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.maxPolarAngle = Math.PI * 0.5;
    controls.minDistance = 1000;
    controls.maxDistance = 5000;

    window.addEventListener('resize', function(){
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }, false);
})();

// 设置光源
(function(){
    // 设置光源
    var light = new THREE.DirectionalLight( 0xbbbbff, 1.5 );

    light.position.set( -1000, 50, -1000 );
    light.position.multiplyScalar( 1.3 );
    light.castShadow = true;

    var textureLoader = new THREE.TextureLoader();

    var textureFlare0 = textureLoader.load( "./static/textures/lensflare/lensflare0.png" );
    var textureFlare1 = textureLoader.load( "./static/textures/lensflare/lensflare2.png" );
    var textureFlare2 = textureLoader.load( "./static/textures/lensflare/lensflare3.png" );

    var lensflare = new THREE.Lensflare();

    lensflare.addElement( new THREE.LensflareElement( textureFlare0, 512, 0 ) );
    lensflare.addElement( new THREE.LensflareElement( textureFlare1, 512, 0 ) );
    lensflare.addElement( new THREE.LensflareElement( textureFlare2, 60, 0.6 ) );

    light.add( lensflare );

    scene.add( light );

    var light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
    scene.add( light );
})();

// 加载模型
var mixers = [];
var clock = new THREE.Clock();
var birdmesh;
(function(){
    // 地面
    var loader = new THREE.TextureLoader();
    var groundTexture = loader.load( './static/textures/terrain/grasslight-big.jpg' );
    groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
    groundTexture.repeat.set( 25, 25 );
    groundTexture.anisotropy = 16;
    var groundMaterial = new THREE.MeshLambertMaterial( { map: groundTexture } );
    var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
    mesh.position.y = - 250;
    mesh.rotation.x = - Math.PI / 2;
    mesh.receiveShadow = true;
    mesh.name = "ground";
    scene.add( mesh );


    // 鸟

    var loader = new THREE.GLTFLoader();
    loader.load( './static/models/gltf/Flamingo.glb', function( gltf ) {
        birdmesh = gltf.scene.children[ 0 ];
        var s = 0.35;
        birdmesh.scale.set( s, s, s );
        birdmesh.position.y = 15;
        birdmesh.rotation.y = -1;
        birdmesh.castShadow = true;
        birdmesh.receiveShadow = true;
        scene.add( birdmesh );
        var mixer = new THREE.AnimationMixer( birdmesh );
        mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
        mixers.push( mixer );
    } );
    
})();

// var rotateY = new THREE.Matrix4().makeRotationY( 0.005 );
var step = -2;
var flag = true;
var animate = function () {
    requestAnimationFrame(animate);

    // camera.applyMatrix( rotateY );
    // camera.updateMatrixWorld();

    var delta = clock.getDelta();
    for ( var i = 0; i < mixers.length; i ++ ) {
        mixers[ i ].update( delta );
    }

    if(birdmesh != null) {
        if(birdmesh.position.x == -1000) {
            flag = false;
        }

        if(birdmesh.position.x == 1000) {
            flag = true;
        }

        if(flag){
            birdmesh.rotation.y = -1;
            birdmesh.position.x += step;
            birdmesh.position.z -= (step+0.2);
        }else {
            birdmesh.rotation.y = 2.3;
            birdmesh.position.x -= step;
            birdmesh.position.z += (step+0.2);
        }

    }

    stats.begin();
    renderer.render( scene, camera );
    stats.end();
};
animate();