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.



경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

<!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>














본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED