Three.js　sample

by Yoshiharu Kamata

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:#ffff00; width:300px; height:300px;margin:0 auto;"></div>
    <a href="javascript:void(0);" id="btn">start</a>
</div>
<canvas id="c1" width="100" height="100" >
</canvas>

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(){
    
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillRect(20, 20, 80, 40);
    
    scene = new THREE.Scene();
 
    camera = new THREE.PerspectiveCamera( 50, 1, 1, 1000 );
    camera.position.z = 300;
 
    plane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200, 3, 3 ),
                                       new THREE.MeshBasicMaterial(
   //                                         { map:THREE.ImageUtils.loadTexture( 'http://pyro.jp/dev/images/pyrojp.png' ),
                                           { map:THREE.ImageUtils.loadTexture( canvas.toDataURL() ),
                                             overdraw: true } )
                                   );
    

    
    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 );
}