Skip to content

Instantly share code, notes, and snippets.

@dmjio

dmjio/3JWebGL

Created August 26, 2011 13:41
Show Gist options
  • Save dmjio/1173426 to your computer and use it in GitHub Desktop.
Save dmjio/1173426 to your computer and use it in GitHub Desktop.
Download ZIP
WebGL BoilerPlate Code
Raw
3JWebGL
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment