학습노트 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();

}

<!--
div#canvas-target{
border: none;
cursor: pointer;
width: 600px;
height: 600px;
background-color: #EEEEEE;
}
-->