Skip to content

Instantly share code, notes, and snippets.

@theo-armour

theo-armour/index.html

Last active August 31, 2015 05:46
Show Gist options
  • Save theo-armour/cdb341c08f98a4698504 to your computer and use it in GitHub Desktop.
Save theo-armour/cdb341c08f98a4698504 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html lang=en >
<head>
<title>Template Three.js Basic R1</title>
<meta charset=utf-8 />
<meta name=viewport content='width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0' />
</head>
<body>
<script src=http://mrdoob.github.io/three.js/build/three.min.js ></script>
<script src=http://mrdoob.github.io/three.js/examples/js/controls/OrbitControls.js ></script>
<script src=http://mrdoob.github.io/three.js/examples/js/libs/stats.min.js ></script>
<script>
var css, menu, stats, renderer, scene, camera, controls;
var geometry, material, mesh;
init();
animate();
function init() {
css = document.head.appendChild( document.createElement( 'style' ) );
css.innerHTML ='body { font: 600 12pt monospace; margin: 0; overflow: hidden; }' +
'#i {text-decoration: none; }' +
'';
menu = document.body.appendChild( document.createElement( 'div' ) );
menu.style.cssText = 'margin: 0 20px; position: absolute; ';
menu.innerHTML = '<h2 style=margin:0; ><a href="" >' + document.title + '</a> ' +
'<a id=i href=http://jaanga.github.io/ >&#x24D8;</a></h2>' +
'<div id=info ></div>' +
'';
stats = new Stats();
stats.domElement.style.cssText = 'position: absolute; right: 0; top: 0; z-index: 100; ';
document.body.appendChild( stats.domElement );
renderer = new THREE.WebGLRenderer( { alpha: 1, antialias: true, clearColor: 0xffffff } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 100, 100, 100 );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.maxDistance = 800;
scene = new THREE.Scene();
window.addEventListener( 'resize', onWindowResize, false );
// assets
geometry = new THREE.BoxGeometry( 100, 2, 100 );
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, -10, 0 );
scene.add( mesh );
mesh = new THREE.GridHelper( 50, 10 );
mesh.position.set( 0, -9, 0 );
scene.add( mesh );
var axisHelper = new THREE.AxisHelper( 50 );
scene.add( axisHelper );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
stats.update();
renderer.render( scene, camera );
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment