Tween.js　学習(2)

by seijitakagi

HTML

<script src="http://pyro.jp/dev/lib/js/Three.js"></script>
<script src="http://pyro.jp/dev/lib/js/tween.js"></script>
<script src="http://pyro.jp/dev/lib/js/RequestAnimationFrame.js"></script>
<div id="container">
    
</div>

CSS

#container {
    background: #fff100;
    height: 300px;
    margin:0 auto;
    text-align: center;
}

JavaScript

var container, stage, camera, scene, light, cube, renderer;

window.onload = init;
window.onresize = reisize;

function init() { alert( 1 );
    var img;
    
    container = document.getElementById("container");
    camera = new THREE.PerspectiveCamera( 50, 1, 1, 1000 );
    camera.position.z = 500;
    
    scene = new THREE.Scene();
    
    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 0, 1 );
    light.position.normalize();
    scene.add( light );
    
    var materials = [];
    for ( var i = 0; i < 6; i ++ ) {
        materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
    }
    cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1 ), materials );
    cube.position.y = 0;
    cube.overdraw = true;
    scene.add( cube );

    renderer = new THREE.CanvasRenderer( { antialias: true } );
    renderer.setSize( 400, 400 );

    container.appendChild( renderer.domElement );
    
    animate();
}

function imgLoaded(e) { 
    var initX;
    var img = e.target;
    var data = { "animations": {"off":0, "on":1}, 
                    "frames": {"regY": 0, "regX": 0, "count": 2, "width": 110, "height": 187}, 
                    "images": [img]
                   };
    var spriteSheet  = new SpriteSheet(data);
    var bmp = new BitmapAnimation(spriteSheet);
    bmp.x = initX = canvas.clientWidth - data.frames.width - 100;
    bmp.y = canvas.clientHeight * 0.5 - data.frames.height * 0.5;
    bmp.gotoAndStop("off");
    stage.addChild( bmp );
    
    Tween.get( bmp , { loop : true } )
        .wait( 1000 )
        .to( { x : 100 } , 1000 , Ease.quartIn )
        .call( bmp.gotoAndStop, [ "on" ] )
        .to( { x : 50 } , 2000 )
        .call( bmp.gotoAndStop, [ "off" ] )
        .to( { x : initX } , 1000 , Ease.sineOut )
        .wait( 1000 );
        
    Ticker.setInterval( 20 );
    Ticker.addListener( stage, false );
}

function reisize() {
    stageWidth = container.clientWidth;
   ...