Three.js　学習(1) アニメーション

by seijitakagi

HTML

<script src="http://pyro.jp/dev/lib/js/RequestAnimationFrame.js"></script>
<script src="http://pyro.jp/dev/lib/js/Three.js"></script>
<div style="margin:0 auto; text-align:center;">
    <div id="container" style="background:#ccc; width:300px; height:300px;margin:0 auto;"></div>
    <a href="javascript:void(0);" id="btn">start</a>
</div>

CSS

#btn {
    display: block;
    background: #ff0000;
    padding: 15px;
    margin: 10px auto;
    text-align: center;
    width: 8em;
    font-size: 12px;
    font-family: arial;
    color: #fff;
    text-decoration: none;
}

JavaScript

var rendering = false;
var camera, scene, renderer, plane;

window.onload = function(){
    scene = new THREE.Scene();
 
    camera = new THREE.PerspectiveCamera( 50, 1, 1, 1000 );
    camera.position.z = 400;
 
    plane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200 ),
                                       new THREE.MeshBasicMaterial( { color: 0xFF0000 } ) );
    plane.doubleSided = true;
    scene.add( plane );
 
    renderer = new THREE.CanvasRenderer();
    renderer.setSize( 300, 300 );
 
    var container = document.getElementById("container");
    container.appendChild( renderer.domElement );
 
    renderer.render( scene, camera );
    
    var btn = document.getElementById( "btn" );
    btn.onclick = function(e){
        if( rendering ) {
            rendering = false;
            this.innerText = "start";
        } else {
            rendering = true;
            animate();
            this.innerText = "stop";
        }
    };
}
    
function animate() {
    if( !rendering ) return;
    requestAnimationFrame( animate );
    plane.rotation.y += 0.02;
    if( plane.rotation.y >= 360 ) plane.rotation.y = 0;
    renderer.render( scene, camera );
}