Three.js　学習(1)

by seijitakagi

HTML

<script src="http://pyro.jp/dev/lib/js/Three.js"></script>
<div id="container" style="background:#ccc; width:300px; height:300px;margin:0 auto;"></div>

JavaScript

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 } ) );
    scene.add( plane );
    
    renderer = new THREE.CanvasRenderer();
    renderer.setSize( 300, 300 );
    
    var container = document.getElementById("container");
    container.appendChild( renderer.domElement );
    
    renderer.render( scene, camera );
}