-
-
Save neilus/1938871 to your computer and use it in GitHub Desktop.
index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>learningthree.js boiler plate for three.js</title> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-lalala | |
<script src="vendor/threex/THREEx.screenshot.js"></script> | |
<script src="vendor/threex/THREEx.FullScreen.js"></script> | |
<script src="vendor/threex/THREEx.WindowResize.js"></script> | |
<script src="vendor/threex.dragpancontrols.js"></script> | |
<link href="css/main.css" rel="stylesheet"/> | |
</head> | |
<body> | |
<!-- three.js container --> | |
<div id="container"></div> | |
<!-- info on screen display --> | |
<div id="info"> | |
<div class="top"> | |
<a href="http://learningthreejs.com/blog/2011/12/20/boilerplate-for-three-js/" target="_blank">LearningThree.js</a> | |
boiler plate for | |
<a href="https://github.com/mrdoob/three.js/" target="_blank">three.js</a> | |
</div> | |
<div class="bottom" id="inlineDoc" > | |
- <i>p</i> for screenshot | |
</div> | |
</div> | |
<script type="text/javascript"> | |
var stats, scene, renderer, composer; | |
var camera, cameraControl; | |
if( !init() ) animate(); | |
// init the scene | |
function init(){ | |
if( Detector.webgl ){ | |
renderer = new THREE.WebGLRenderer({ | |
antialias : true, // to get smoother output | |
preserveDrawingBuffer : true // to allow screenshot | |
}); | |
renderer.setClearColorHex( 0xBBBBBB, 1 ); | |
}else{ | |
renderer = new THREE.CanvasRenderer(); | |
} | |
renderer.setSize( window.innerWidth, window.innerHeight ); | |
document.getElementById('container').appendChild(renderer.domElement); | |
// add Stats.js - https://github.com/mrdoob/stats.js | |
stats = new Stats(); | |
stats.domElement.style.position = 'absolute'; | |
stats.domElement.style.bottom = '0px'; | |
document.body.appendChild( stats.domElement ); | |
// create a scene | |
scene = new THREE.Scene(); | |
// put a camera in the scene | |
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 ); | |
camera.position.set(0, 0, 5); | |
scene.add(camera); | |
// create a camera contol | |
cameraControls = new THREE.TrackballControls( camera ) | |
// transparently support window resize | |
THREEx.WindowResize.bind(renderer, camera); | |
// allow 'p' to make screenshot | |
THREEx.Screenshot.bindKey(renderer); | |
// allow 'f' to go fullscreen where this feature is supported | |
if( THREEx.FullScreen.available() ){ | |
THREEx.FullScreen.bindKey(); | |
document.getElementById('inlineDoc').innerHTML += "- <i>f</i> for fullscreen"; | |
} | |
// here you add your objects | |
// - you will most likely replace this part by your own | |
var light = new THREE.AmbientLight( Math.random() * 0xffffff ); | |
scene.add( light ); | |
var light = new THREE.DirectionalLight( Math.random() * 0xffffff ); | |
light.position.set( Math.random(), Math.random(), Math.random() ).normalize(); | |
scene.add( light ); | |
var light = new THREE.DirectionalLight( Math.random() * 0xffffff ); | |
light.position.set( Math.random(), Math.random(), Math.random() ).normalize(); | |
scene.add( light ); | |
var light = new THREE.DirectionalLight( Math.random() * 0xffffff ); | |
light.position.set( Math.random(), Math.random(), Math.random() ).normalize(); | |
scene.add( light ); | |
var geometry = new THREE.TorusGeometry( 1, 0.42, 16, 16 ); | |
var material = new THREE.MeshLambertMaterial({ambient: 0x808080, color: Math.random() * 0xffffff}); | |
var mesh = new THREE.Mesh( geometry, material ); | |
scene.add( mesh ); | |
} | |
// animation loop | |
function animate() { | |
// loop on request animation loop | |
// - it has to be at the begining of the function | |
// - see details at http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating | |
requestAnimationFrame( animate ); | |
// do the render | |
render(); | |
// update stats | |
stats.update(); | |
} | |
// render the scene | |
function render() { | |
// variable which is increase by Math.PI every seconds - usefull for animation | |
var PIseconds = Date.now() * Math.PI; | |
// update camera controls | |
cameraControls.update(); | |
// animation of all objects | |
for( var i = 0; i < scene.objects.length; i ++ ){ | |
scene.objects[ i ].rotation.y = PIseconds*0.0003 * (i % 2 ? 1 : -1); | |
scene.objects[ i ].rotation.x = PIseconds*0.0002 * (i % 2 ? 1 : -1); | |
} | |
// animate DirectionalLight | |
scene.lights.forEach(function(light, idx){ | |
if( light instanceof THREE.DirectionalLight === false ) return; | |
var ang = 0.0005 * PIseconds * (idx % 2 ? 1 : -1); | |
light.position.set(Math.cos(ang), Math.sin(ang), Math.cos(ang*2)).normalize(); | |
}); | |
// actually render the scene | |
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
nemtom