dmjio
8/26/2011 - 1:41 PM

WebGL BoilerPlate Code

WebGL BoilerPlate Code

3JWebGL
content_copyfile_download
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
 <div id="container">
    </div>
</body>
 <script src="Three.js" type="text/javascript"></script>
 <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script>
//Paul Irish Style -- https://gist.github.com/838785
	if ( !window.requestAnimationFrame ) {

	window.requestAnimationFrame = ( function() {

		return window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

			window.setTimeout( callback, 1000 / 60 );

		};

	} )();

}
 var camera, scene, renderer,
    geometry, material, mesh;

    init();
    animate();

    function init() {

        camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        geometry = new THREE.CubeGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.addObject( mesh );

        renderer = new THREE.CanvasRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
			
		var container = $('#container');
        container.append( renderer.domElement );

    }

    function animate() {

        // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
        requestAnimationFrame( animate );
        render();

    }

    function render() {

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }
</script>
</html>