학습노트 Webgl Three.js (1)

3735 단어 three.js
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;
}
-->

좋은 웹페이지 즐겨찾기