学习笔记Webgl之Three.js （1）

var canvasWidth = 0, canvasHeight = 0;
var renderer, camera, scene, light;
var cube;


function initThreeJS()
{
　　//获取大小
canvasWidth = document.getElementById( 'canvas-target' ).clientWidth;
canvasHeight = document.getElementById( 'canvas-target' ).clientHeight; 　　
　　//创建render
　　renderer = new THREE.WebGLRenderer( {antialias:true} );
　　renderer.setSize( canvasWidth, canvasHeight );
　　document.getElementById('canvas-target').appendChild( renderer.domElement );
　　renderer.setClearColor( 0xFFFFFF, 1.0 );
}

function initCamera()
{
　　//视角， 宽高比， 视体积近端， 远端
　　camera = new THREE.PerspectiveCamera( 45, canvasWidth/canvasHeight, 1, 10000 );
　　camera.position.set( 300, 200, 0 );
　　camera.up.set( 0, 0, 1 );
　　camera.lookAt( {x:0, y:0, z:0 } );
}

function initScene()
{
　　//场景
　　scene = new THREE.Scene();
　　//灯光
　　light = new THREE.DirectionalLight( 0x22FF00, 1.0, 0 );
　　light.position.set( 100, 100, 200 );
　　scene.add( light );
　　//方块
　　cube = new THREE.Mesh(new THREE.CubeGeometry( 40, 40, 40 ),
　　　　　　　　new THREE.MeshLambertMaterial( {color:0xFFFF00} ) );

　　scene.add( cube );
　　cube.position.set( 0, 0, 0 );
}

var time = 0;
var Pi2 = Math.PI*2;
function renderLoop()
{
　　time += 0.05;
　　cube.rotation.set( time % Pi2, 0, 0 );
　　renderer.clear();
　　renderer.render(scene, camera);
　　window.requestAnimationFrame(renderLoop);
}

function main()
{
initThreeJS();
initCamera();
initScene();
renderLoop();
}