Skip to content

Instantly share code, notes, and snippets.

@spite

spite/gist:9667071

Created March 20, 2014 15:57
Show Gist options
  • Save spite/9667071 to your computer and use it in GitHub Desktop.
Save spite/9667071 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!doctype html>
<html lang="en">
<head>
<title>Wagner - Minefield!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #ffffff;
font-family: 'roboto condensed', tahoma;
font-size:13px;
text-align: left;
font-weight: 100;
background-color: #111;
background-image: url( escheresque_ste.png );
margin: 0px;
overflow: hidden;
}
#container canvas{ width: 100%; height: 100%;}
#fullscreenBtn{ position: absolute; right: 10px; top: 10px; color :white; border: 1px solid white; border-radius: 4px; padding: 10px 20px; background-color: black; text-decoration: none;}
#fullscreenBtn:hover{ color: black; background-color: white;}
#about{ position: absolute; left: 10px; bottom: 10px; background-color: #000; padding: 10px;}
a{ color: #b70000;}
</style>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="ThreeJS"></div>
<script src="js/three.min.js"></script>
<!--<script src="js/OculusRiftEffect.js"></script>-->
<script src="http://spite.github.io/rstats/rStats.js" ></script>
<script src="Wagner.js"></script>
<script src="Wagner.experimental.js"></script>
<script src="ShaderLoader.js"></script>
<script>
'use strict'
// standard global variables
var threecontainer, scene, camera, renderer, controls, stats;
var clock = new THREE.Clock();
// particle emmiter (fireworks)
var emitterSettings;
var textMesh;
var particleGroup;
var fireworksActive;
// wagner related
var composer;
var zoomBlurPass;
var multiPassBloomPass;
//var dirtPass;
// custom global variables
var mesh;
init();
animate();
// FUNCTIONS
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,150,400);
camera.lookAt(scene.position);
// RENDERER
renderer = new THREE.WebGLRenderer( {antialias:true, alpha : false});
renderer.shadowMapEnabled = true;
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
threecontainer = document.getElementById( 'ThreeJS' );
threecontainer.appendChild( renderer.domElement );
composer = new WAGNER.Composer( renderer );
composer.setSize( window.innerWidth, window.innerHeight ); // or whatever resolution
zoomBlurPass = new WAGNER.ZoomBlurPass();
multiPassBloomPass = new WAGNER.MultiPassBloomPass();
//dirtPass = new WAGNER.DirtPass();
// CONTROLS
//controls = new THREE.OrbitControls( camera, renderer.domElement );
// STATS
/*stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
threecontainer.appendChild( stats.domElement );*/
// SUNLIGHT
var sunlight = new THREE.DirectionalLight();
sunlight.intensity = 1.0;
sunlight.position.set(100, 100, 100);
scene.add(sunlight);
sunlight.castShadow = true;
// // FLOOR
// var floorTexture = new THREE.ImageUtils.loadTexture( 'img/checkerboard.jpg' );
// floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
// floorTexture.repeat.set( 10, 10 );
// var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
// var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
// var floor = new THREE.Mesh(floorGeometry, floorMaterial);
// floor.position.y = -0.5;
// floor.rotation.x = Math.PI / 2;
// scene.add(floor);
// SKYBOX
var imagePrefix = "img/DarkSea-";
var directions = ["zneg", "zpos", "ypos", "yneg", "xpos", "xneg"];
var imageSuffix = ".jpg";
var skyGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
var materialArray = [];
for (var i = 0; i < 6; i++)
materialArray.push( new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
side: THREE.BackSide
}));
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
scene.add( skyBox );
////////////
// CUSTOM //
////////////
var jsonLoader = new THREE.JSONLoader();
var sphere = new THREE.Mesh( new THREE.SphereGeometry( 100, 10, 10 ), new THREE.MeshNormalMaterial() );
scene.add( sphere );
}
function addTextMesh(){
var materialFront = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var materialSide = new THREE.MeshBasicMaterial({
color: 0xffaa00,
wireframe: true
});
var materialArray = [ materialFront, materialSide ];
// add text geometry
var textGeom = new THREE.TextGeometry( "World Cup 2014", {
size: 30,
height: 4,
curveSegments: 3,
font: "helvetiker",
weight: "bold",
style: "normal",
bevelThickness: 1,
bevelSize: 2,
bevelEnabled: true,
material: 0,
extrudeMaterial: 1
});
var textMaterial = new THREE.MeshFaceMaterial(materialArray);
textMesh = new THREE.Mesh( textGeom, textMaterial );
textGeom.computeBoundingBox();
var textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
textMesh.position.set( -0.5 * textWidth, 50, 0 );
textMesh.rotation.x = -Math.PI / 4;
scene.add(textMesh);
}
function randomVector3(xMin, xMax, yMin, yMax, zMin, zMax)
{
return new THREE.Vector3( xMin + (xMax - xMin) * Math.random(),
yMin + (yMax - yMin) * Math.random(), zMin + (zMax - zMin) * Math.random() );
}
function addFireworks () {
emitterSettings = {
type: 'sphere',
positionSpread: new THREE.Vector3(10, 10, 10),
acceleration: new THREE.Vector3(0, -20, 0),
radius: 10,
speed: 40,
speedSpread: 20,
sizeStart: 30,
// sizeStartSpread: 30,
sizeEnd: 10,
opacityStart: 1,
opacityMiddle: 1,
opacityEnd: 0,
colorStart: new THREE.Color('white'),
colorStartSpread: new THREE.Vector3(0.5,0.5,0.5),
colorMiddle: new THREE.Color('red'),
colorEnd: new THREE.Color('red'),
particlesPerSecond: 2000,
alive: 0, // initially disabled, will be triggered later
emitterDuration: 0.1
};
// Create a particle group to add the emitter
particleGroup = new ShaderParticleGroup(
{
texture: THREE.ImageUtils.loadTexture('img/spark.png'),
maxAge: 2,
colorize: 1,
blending: THREE.AdditiveBlending,
});
var colors = ["red", "orange", "yellow", "green", "blue", "violet", "pink", "magenta", "cyan", "steelblue", "seagreen"];
for (var i = 0; i < colors.length; i++)
{
emitterSettings.colorMiddle = new THREE.Color( colors[i] );
emitterSettings.colorEnd = new THREE.Color( colors[i] );
particleGroup.addPool( 1, emitterSettings, false );
}
// Add the particle group to the scene so it can be drawn.
scene.add( particleGroup.mesh );
fireworksActive = true;
}
function animate()
{
requestAnimationFrame( animate );
render();
update();
}
function update()
{
if(fireworksActive){
var delta = clock.getDelta();
particleGroup.tick( delta );
if ( Math.random() < delta )
particleGroup.triggerPoolEmitter( 1, randomVector3(-200,200, 50,200, -200,-100) );
}
}
function render()
{
camera.lookAt( scene.position );
//renderer.render( scene, camera );
renderer.autoClearColor = true;
composer.reset();
composer.render( scene, camera );
if(multiPassBloomPass.isLoaded()){
composer.pass( multiPassBloomPass );
}
// if(zoomBlurPass.isLoaded){
// composer.pass( zoomBlurPass );
// }
//if(dirtPass.isLoaded()){
//composer.pass( dirtPass );
//}
composer.toScreen();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment