WebGL WebGL BOX Test 2013-10-08 first 첫번째
2013.10.08 23:36
WebGL BOX Test 2013-10-08
WebGL은 파이어폭스, 구글 크롬 브라우저에서 구현되어 있습니다.
곧 출시되는 Internet Explorer 11에서도 구현된답니다.
WebGL을 사용하면 PC의 3D 가속을 위해서 CS환경의 프로그램(C++)를 사용하지 않고서도
HTTP WEB 환경에서도 고성능의 3D 경험을 하실 수 있습니다.
Code Examples for Tony Parisi's Book, WebGL Up and Running.
<!DOCTYPE html> <html> <head> <title>Welcome to WebGL</title> <link rel="stylesheet" href="../css/webglbook.css" /> <script src="../libs/Three.js"></script> <script src="../libs/RequestAnimationFrame.js"></script> <script> var renderer = null, scene = null, camera = null, cube = null, animating = false; function onLoad() { // Grab our container div var container = document.getElementById("container"); // Create the Three.js renderer, add it to our div renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize(container.offsetWidth, container.offsetHeight); container.appendChild( renderer.domElement ); // Create a new Three.js scene scene = new THREE.Scene(); // Put in a camera camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 ); camera.position.set( 0, 0, 3 ); // Create a directional light to show off the object var light = new THREE.DirectionalLight( 0xffffff, 1.5); light.position.set(0, 0, 1); scene.add( light ); // Create a shaded, texture-mapped cube and add it to the scene // First, create the texture map var mapUrl = "../images/molumen_small_funny_angry_monster.jpg"; var map = THREE.ImageUtils.loadTexture(mapUrl); // Now, create a Phong material to show shading; pass in the map var material = new THREE.MeshPhongMaterial({ map: map }); // Create the cube geometry var geometry = new THREE.CubeGeometry(1, 1, 1); // And put the geometry and material together into a mesh cube = new THREE.Mesh(geometry, material); // Turn it toward the scene, or we won't see the cube shape! cube.rotation.x = Math.PI / 5; cube.rotation.y = Math.PI / 5; // Add the cube to our scene scene.add( cube ); // Add a mouse up handler to toggle the animation addMouseHandler(); // Run our render loop run(); } function run() { // Render the scene renderer.render( scene, camera ); // Spin the cube for next frame if (animating) { cube.rotation.y -= 0.01; } // Ask for another frame requestAnimationFrame(run); } function addMouseHandler() { var dom = renderer.domElement; dom.addEventListener( 'mouseup', onMouseUp, false); } function onMouseUp (event) { event.preventDefault(); animating = !animating; } </script> </head> <body onLoad="onLoad();" style=""> <center><h1>Welcome to WebGL!</h1></center> <div id="container" style="width:95%; height:80%; position:absolute;"></div> <div id="prompt" style="width:95%; height:6%; bottom:0; text-align:center; position:absolute;">Click to animate the cube</div> </body> </html> |
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.