TweenMax特效

更多有趣示例 尽在小红砖社区

示例

HTML

<div id="container"></div>
<!-- Dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/Detector.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/libs/stats.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/TrackballControls.js"></script>

CSS

*{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

JS

console.clear();

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

var w = window.innerWidth;
var h = window.innerHeight;
var container, stats;
var camera, controls, scene, renderer, boxes = [];

init();
animate();

function init() {
    // renderer
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( w, h );
    container = document.getElementById( 'container' );
    container.appendChild( renderer.domElement );
    stats = new Stats();
    container.appendChild( stats.dom );
    stats.dom.style.position = 'absolute';

    // camera
    camera = new THREE.PerspectiveCamera( 60, w / h, 1, 1000 );
    camera.animAngle = 0;
    camera.position.x = Math.cos( camera.animAngle ) * 400;
    camera.position.y = 180;
    camera.position.z = Math.sin( camera.animAngle ) * 400;

    // world
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2( 0xFFD700, 0.002 );
    renderer.setClearColor( scene.fog.color );

    // helpers
    var gridXZ = new THREE.GridHelper( 600, 10 );
    scene.add( gridXZ );

    // lights
    var light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 1, 1, 1 );
    scene.add( light );
    light = new THREE.DirectionalLight( 0x002288 );
    light.position.set( -1, -1, -1 );
    scene.add( light );
    light = new THREE.AmbientLight( 0x222222 );
    scene.add( light );

    // Dome
    var domeGeometry = new THREE.IcosahedronGeometry( 700, 1 );
    var domeMaterial =  new THREE.MeshPhongMaterial( {
        color: 0xfb3550,
        shading: THREE.FlatShading,
        side: THREE.BackSide
    } );
    var dome = new THREE.Mesh( domeGeometry, domeMaterial );
    scene.add( dome );


    var planeGeometry = new THREE.PlaneGeometry( 600, 600 );
    var planeMaterial =  new THREE.MeshPhongMaterial( {
        color: 0x222A38,
        transparent: true,
        opacity: 0.8,
        shading: THREE.FlatShading,
        side: THREE.DoubleSide
    } );
    var plane = new THREE.Mesh( planeGeometry, planeMaterial );
    plane.rotation.x = Math.PI / 2;
    scene.add(plane);
    
    // box
    // BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
    var geometry = new THREE.BoxGeometry( 10, 10, 10 );
    for( var i = 0; i < 100; i ++ ){
        var material = new THREE.MeshPhongMaterial({
            color: [0xfb3550,0xffffff,0x000000][Math.random()*3
|0],
            shading: THREE.FlatShading
        });
        boxes.push( new THREE.Mesh( geometry, material ) );
        scene.add( boxes[ i ] );
    }
    
    window.addEventListener( 'resize', onWindowResize, false );
    
    ( function grow(){
        boxes.forEach( box => {
            var t = Math.random() * 0.6 + 0.3;
            TweenMax.to( box.scale, t, {
                x: 1 + Math.random() * 3,
                y: 1 + Math.random() * 20 + ( Math.random() < 0.1 ? 15 : 0 ),
                z: 1 + Math.random() * 3,
                ease: Power2.easeInOut
            } );
            TweenMax.to( box.position, t, {
                x: -200 + Math.random() * 400,
                z: -200 + Math.random() * 400,
                ease: Power2.easeInOut
            } );
        } );
        
        TweenMax.to( camera, 1.5, {
            animAngle: camera.animAngle + ( 2 * Math.random() - 1 ) * Math.PI,
            ease: Power1.easeInOut,
            onUpdate: function(){
                camera.position.x = Math.cos( camera.animAngle ) * 440;
                camera.position.z = Math.sin( camera.animAngle ) * 440;
                
                camera.updateProjectionMatrix();
                camera.lookAt( scene.position );                
            }
        } );
        
        TweenMax.to( window, 3.5, {
           onComplete: grow 
        } );
    } )();
}

function onWindowResize() {
    w = window.innerWidth;
    h = window.innerHeight;
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
    renderer.setSize( w, h );
}

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    stats.update();
}