Skip to content

Instantly share code, notes, and snippets.

@connerbrooks

connerbrooks/crossed.html

Created October 22, 2015 22:27
Show Gist options
  • Save connerbrooks/b337ef0ba376247bcea8 to your computer and use it in GitHub Desktop.
Save connerbrooks/b337ef0ba376247bcea8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
crossed.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.js"></script>
<script src="libs/threex.keyboardstate.js"></script>
<script src="libs/physi.js"></script>
<script src="libs/OrbitControls.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<script>
var camera, controls, scene, renderer;
var ballsize = 2;
var score = 0;
var textureCube;
var groundplane;
var cannon;
var ball;
var keyboard;
var balllaunched = false;
// explosion settings
var movementSpeed = 80;
var totalObjects = 1000;
var objectSize = 10;
var sizeRandomness = 4000;
var colors = [0xFF0FFF, 0xCCFF00, 0xFF000F, 0x996600, 0xFFFFFF];
var dirs = [];
var parts = [];
Physijs.scripts.worker = 'physijs_worker.js';
Physijs.scripts.ammo = 'libs/ammo.js';
function GenerateGroundPlane()
{
var pixeldata = new Uint8Array( 200 * 200 * 3 );
for( var i=0; i<200*200*3; i++ )
{
pixeldata[i] = Math.random() * 255;
}
var texture = new THREE.DataTexture( pixeldata, 200, 200, THREE.RGBFormat ); // THREE.ImageUtils.loadTexture('images/groundterrain.jpg');
texture.needsUpdate = true;
var planeMaterial = new Physijs.createMaterial(new THREE.MeshLambertMaterial({map:texture}), .4, .8 );
var planeGeometry = new THREE.BoxGeometry( 200, 200, 6 );
plane = new Physijs.BoxMesh( planeGeometry, planeMaterial, 0 );
plane.name = "GroundPlane";
plane.collisions = 0;
plane.addEventListener( 'collision', function( other_object )
{
if( other_object.name == 'CannonBall' )
{
two.play();
}
else if( other_object.name == 'TargetBall' )
{
explode.play();
}
});
scene.add( plane );
addPlatformUFO(0,0,0)
}
function addPlatformUFO(x, y, z)
{
//var platformMaterial = new Physijs.createMaterial(new THREE.MeshPhongMaterial({color: 0xffffff, specular: 0xffaaaa, envMap: textureCube }), .4, .8 );
var platformMaterial = new Physijs.createMaterial(new THREE.MeshPhongMaterial({shininess: 50, color: 0xffffff, specular: 0x999999 }), .4, .8 );
var platformGeometry = new THREE.CylinderGeometry( 40, 50, 6, 50, 40);
platform = new Physijs.CylinderMesh( platformGeometry, platformMaterial, 0 );
platform.name = "platform";
platform.collisions = 0;
platform.addEventListener( 'collision', function( other_object )
{
if( other_object.name == 'CannonBall' )
{
two.play();
parts.push(new ExplodeAnimation(ball.position.x, ball.position.y, ball.position.z));
}
else if( other_object.name == 'TargetBall' )
{
explode.play();
parts.push(new ExplodeAnimation(other_object.position.x, other_object.position.y, other_object.position.z + 10));
$('#score').text(score++);
}
});
platform.position.set(x, y, z);
platform.rotation.x = 0.5*Math.PI;
scene.add( platform );
GenerateTarget(x, y, z);
}
function GenerateCannon()
{
var cylinderGeometry = new THREE.CylinderGeometry( 2, 2, 10, 60 );
var cylinderMaterial = new THREE.MeshLambertMaterial({color:'lightgray'});
var can = new THREE.Mesh( cylinderGeometry, cylinderMaterial );
can.position.y = -5;
cannon = new THREE.Object3D();
cannon.add( can );
cannon.rotation.z = Math.PI / 2;
cannon.position.x -= 84;
cannon.position.z += 20;
cannon.name = "CannonBall";
scene.add( cannon );
}
function GenerateCannonBall()
{
//var texture = THREE.ImageUtils.loadTexture('images/balltexture.jpg');
var ballGeometry = new THREE.SphereGeometry( ballsize );
//var ballMaterial = Physijs.createMaterial( new THREE.MeshLambertMaterial({map:texture}), .95, .95 );
var ballMaterial = Physijs.createMaterial( new THREE.MeshNormalMaterial(), .95, .95 );
ball = new Physijs.SphereMesh( ballGeometry, ballMaterial );
ball.position.x = cannon.position.x + 10;
ball.position.y = cannon.position.y ;
ball.position.z = cannon.position.z;
ball.name = 'CannonBall';
}
var targetlist;
function GenerateTarget(x, y, z)
{
targetlist = [];
for( var i=0; i<4; i++ )
{
var geo = new THREE.CubeGeometry( 4, 4, 12 );
var mat = Physijs.createMaterial( new THREE.MeshLambertMaterial({color: 0xf76700}), .95, .95 );
var msh = new Physijs.BoxMesh( geo, mat );
switch( i )
{
case 0: msh.position.x = x; msh.position.y = y; break;
case 1: msh.position.x = x + 5; msh.position.y = y + 5; break;
case 2: msh.position.x = x + 10; msh.position.y = y; break;
case 3: msh.position.x = x + 5; msh.position.y = y - 5; break;
}
msh.position.z = z + 10;
targetlist.push( msh );
scene.add( msh );
}
var sg = new THREE.SphereGeometry( 5 );
var sm = new Physijs.createMaterial( new THREE.MeshLambertMaterial({color: 0x00FF34}), .95, .95 );
var smsh = new Physijs.SphereMesh( sg, sm );
smsh.position.x = x + 5;
smsh.position.y = y;
smsh.position.z = z + 20;
smsh.name = "TargetBall";
targetlist.push( smsh );
scene.add( smsh );
}
function addSkyDome()
{
var path = "textures/cube/MilkyWay/";
var format = '.jpg';
var urls = [
path + 'dark-s_px' + format, path + 'dark-s_nx' + format,
path + 'dark-s_py' + format, path + 'dark-s_ny' + format,
path + 'dark-s_pz' + format, path + 'dark-s_nz' + format
];
textureCube = THREE.ImageUtils.loadTextureCube( urls, THREE.CubeRefractionMapping );
// var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
} ),
mesh = new THREE.Mesh( new THREE.BoxGeometry( 1000, 1000, 1000 ), material );
scene.add( mesh );
}
function ExplodeAnimation(x,y,z)
{
var geometry = new THREE.Geometry();
for (i = 0; i < totalObjects; i ++)
{
var vertex = new THREE.Vector3();
vertex.x = x;
vertex.y = y;
vertex.z = z;
geometry.vertices.push( vertex );
dirs.push({x:(Math.random() * movementSpeed)-(movementSpeed/2),y:(Math.random() * movementSpeed)-(movementSpeed/2),z:(Math.random() * movementSpeed)-(movementSpeed/2)});
}
var material = new THREE.PointCloudMaterial( { size: objectSize, color: colors[Math.round(Math.random() * colors.length)] });
var particles = new THREE.PointCloud( geometry, material );
this.object = particles;
this.status = true;
this.xDir = (Math.random() * movementSpeed)-(movementSpeed/2);
this.yDir = (Math.random() * movementSpeed)-(movementSpeed/2);
this.zDir = (Math.random() * movementSpeed)-(movementSpeed/2);
scene.add( this.object );
this.update = function(){
if (this.status == true){
var pCount = totalObjects;
while(pCount--) {
var particle = this.object.geometry.vertices[pCount]
particle.y += dirs[pCount].y;
particle.x += dirs[pCount].x;
particle.z += dirs[pCount].z;
}
this.object.geometry.verticesNeedUpdate = true;
}
}
}
var explode, one, two, three, four, five, music;
function loadSounds()
{
explode = new Audio("sounds/Explosion.mp3");
one = new Audio("sounds/1.mp3");
two = new Audio("sounds/2.mp3");
three = new Audio("sounds/3.mp3");
four = new Audio("sounds/4.mp3");
five = new Audio("sounds/5.mp3");
// start music
music = new Audio("sounds/synth.wav");
music.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
music.play();
}
function init()
{
$('#myModal').modal();
keyboard = new THREEx.KeyboardState();
loadSounds();
scene = new Physijs.Scene();
scene.setGravity(new THREE.Vector3( 0, 0, -30 ));
scene.addEventListener('update', function()
{
scene.simulate(undefined, 1 );
});
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 30;
camera.position.x = -90;
camera.rotation.z = -( Math.PI / 2 );
camera.rotation.y = -( Math.PI / 2 );
camera.up = new THREE.Vector3( 0, 0, 1 );
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x000000, 1.0 );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapEnabled = true;
controls = new THREE.OrbitControls( camera, renderer.domElement );
//controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
addSkyDome();
// 1. Drop in ground plane
//GenerateGroundPlane();
addPlatformUFO(125, 0,0);
addPlatformUFO(45, 100,-20);
addPlatformUFO(45, -100,20);
addPlatformUFO(100, -100,70);
// Generate cannon
GenerateCannon();
// Generate cannon ball
GenerateCannonBall();
var extra_geometry = [
[ new THREE.IcosahedronGeometry( 100, 4 ), 50 ],
[ new THREE.IcosahedronGeometry( 100, 3 ), 300 ],
[ new THREE.IcosahedronGeometry( 100, 2 ), 1000 ],
[ new THREE.IcosahedronGeometry( 100, 1 ), 2000 ],
[ new THREE.IcosahedronGeometry( 100, 0 ), 8000 ]
];
var extra_material = new THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: true } );
var i, j, mesh, lod;
for ( j = 0; j < 1000; j ++ ) {
lod = new THREE.LOD();
for ( i = 0; i < extra_geometry.length; i ++ ) {
mesh = new THREE.Mesh( extra_geometry[ i ][ 0 ], extra_material );
mesh.scale.set( 1.5, 1.5, 1.5 );
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
lod.addLevel( mesh, extra_geometry[ i ][ 1 ] );
}
lod.position.x = 10000 * ( 0.5 - Math.random() );
lod.position.y = 7500 * ( 0.5 - Math.random() );
lod.position.z = 10000 * ( 0.5 - Math.random() );
lod.updateMatrix();
lod.matrixAutoUpdate = false;
scene.add( lod );
}
// Generate target
//GenerateTarget();
// add cool dome
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 0, 0, 200 );
spotLight.shadowCameraNear = 10;
spotLight.shadowCameraFar = 100;
spotLight.castShadow = true;
spotLight.intensity = 4;
scene.add(spotLight);
var light = new THREE.PointLight( 0x0057f7 );
light.position.set( 0, 0, 0 );
scene.add( light );
scene.simulate();
document.body.appendChild( renderer.domElement );
render();
}
function render()
{
scene.traverse( function ( object ) {
if ( object instanceof THREE.LOD ) {
object.update( camera );
}
} );
var pCount = parts.length;
while(pCount--) {
parts[pCount].update();
}
controls.update();
if(keyboard.pressed("H"))
{
$('#myModal').modal();
}
if( keyboard.pressed("1") )
{
ballsize = 1;
}
if( keyboard.pressed("2") )
{
ballsize = 2;
}
if( keyboard.pressed("3") )
{
ballsize = 3;
}
else if( keyboard.pressed("A") )
{
cannon.rotation.z += 0.01;
//camera.rotation.z += 0.01;
}
else if( keyboard.pressed("D") )
{
cannon.rotation.z -= 0.01;
//camera.rotation.z -= 0.01;
}
else if( keyboard.pressed("W") )
{
var oldy = camera.rotation.y;
cannon.rotation.y -= 0.01;
//camera.rotation.y -= 0.01;
if( cannon.rotation.y < -( Math.PI / 3 ) )
{
cannon.rotation.y = -( Math.PI / 3 );
//camera.rotation.y = oldy;
}
}
else if( keyboard.pressed("S") )
{
var oldy = camera.rotation.y;
cannon.rotation.y += 0.01;
//camera.rotation.y += 0.01;
if( cannon.rotation.y > 0 )
{
cannon.rotation.y = 0;
//camera.rotation.y = oldy;
}
}
else if( !balllaunched && keyboard.pressed("F") )
{
balllaunched = true;
scene.add( ball );
ball.applyCentralImpulse( new THREE.Vector3( 8000, -( Math.PI / 2 - cannon.rotation.z ) * 10000, -cannon.rotation.y * 10000 ).normalize().multiplyScalar( 8000 / ballsize ) );
//ball.applyCentralImpulse( new THREE.Vector3( new THREE.Vector3(100, 100, 100) ));
}
else if( balllaunched && keyboard.pressed("R") )
{
balllaunched = false;
scene.remove( ball );
GenerateCannonBall();
}
if( balllaunched )
{
if( ball.position.z < -30 )
{
balllaunched = false;
scene.remove( ball );
GenerateCannonBall();
}
camera.lookAt( ball.position );
}
requestAnimationFrame( render );
renderer.render( scene, camera );
}
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
window.onload = init;
</script>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h2 class="modal-title">Crossed Canaries: IN SPACE!</h2>
<h3>Conner Brooks</h3>
</div>
<div class="modal-body">
<p>Welcome to the game, these canaries are p crossed you should like do something.</p>
<h3>Controls</h3>
<ul class="list-unstyled">
<li><kbd>W</kbd> - up</li>
<li><kbd>S</kbd> - down</li>
<li><kbd>A</kbd> - left</li>
<li><kbd>D</kbd> - right</li>
<li><kbd>F</kbd> - fire</li>
<li><kbd>R</kbd> - Reset</li>
<li><kbd>H</kbd> - Display Help</li>
<li><kbd>1</kbd> - change to ball 1</li>
<li><kbd>2</kbd> - change to ball 2</li>
<li><kbd>3</kbd> - change to ball 3</li>
</ul>
<p>You can use your mouse to change your perspective. You can scroll in and out with the scroll wheel.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<h3>Score: <span id="score">0</span></h3>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment