123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514 |
- // nikatlas -- Solar System
- (function() {
- var MAX_CAM = 300;
- PouchDB.debug.disable('*');
- var ZEROVECTOR = new THREE.Vector2(0,0);
- var X_AXIS = new THREE.Vector3(1,0,0);
- var Y_AXIS = new THREE.Vector3(0,1,0);
- var Z_AXIS = new THREE.Vector3(0,0,1);
- var ZERO_ROT_QUAT = new THREE.Quaternion(0,0,0,1);
- var controls;
- var manager;
- var loader;
- var _textures = {};
- var Game = window.GameInstance = new window.Game();
- var GameBox = new window.GameBox(5,14,5);
-
- var moveVector = new THREE.Vector2(0,0);
- var lookVector = new THREE.Vector3(0,0,1);
- var paused = false;
- var db = new PouchDB('tetris3d');
- window.remoteDB = new PouchDB('http://tetrisuser:[email protected]:80/tetris3d');
- function init() {
- Game.init();
-
- addLights(Game.scene);
-
- window.scene = Game.scene; // DEBUG
- manager = new THREE.LoadingManager();
- loader = new THREE.TextureLoader(manager);
-
- createScene(Game.scene);
- // controls
- controls = new THREE.OrbitControls(Game.camera, Game.renderer.domElement);
- controls.minPolarAngle = Math.PI * 0.28;
- controls.maxPolarAngle = Math.PI * 0.48;
- controls.minDistance = 30;
- controls.maxDistance = MAX_CAM;
- controls.target.copy(new THREE.Vector3(0,5.5,0));
- Game.camera.lookAt(new THREE.Vector3(0,5.5,0));
- GameBox.init(Game.scene);
- GameBox.drop(new window.Shapes.Box(0x00ff20));
-
- Game.animate();
- var lasttime = 0,movelasttime=0;
- var oldLookVector = new THREE.Vector3(0,0,1);
- Game.addLoopFn(function(time){
- if(time - lasttime > GameBox.getSpeed() && !paused ){ //////////////////////////////////////////////// TIME .....
- GameBox.progress();
- lasttime = time;
- }
- if(time - movelasttime > 0.05){
- if(!moveVector.equals(ZEROVECTOR) || !lookVector.equals(oldLookVector)){
- var move = rotateToCamera(moveVector);
- var look = rotateToCamera(lookVector);
- look = vectorToLook(look);
- GameBox.move(move.x,move.z, look.axis, look.degrees);
- oldLookVector.copy(lookVector);
- movelasttime = time;
- }
- }
- restoreUI();
- });
- function fixData(){
- db.allDocs({
- include_docs: true,
- descending : true,
- limit : 5
- }).then(function(res){
- var data = res.rows;
- var s = "";
- for(var i=0;i< data.length;i++){
- s += ' \
- <div class="row">\
- <div class="col-xs-6">'+data[i].doc.name+'</div>\
- <div class="col-xs-6">'+data[i].doc.score+'</div>\
- </div>';
- }
- var scores = getit("scores");
- scores.innerHTML = s;
- });
- }
- window.getFromDB = function(){
- db.changes().on('change', function() {
- fixData();
- });
- remoteDB.login('nikatlas', 'Nikos0349').then(function (user) {
- db.info();
- })
- .then(function (info) {
- console.log(info);
- db.sync(remoteDB);
- });
- };
- getFromDB();
- window.saveToDB = function(){
- var name = getit("name").value;
- if(!name)return;
- var mid = pad(GameBox.score,100) + name;
- db.put({
- _id : mid,
- name : name,
- score : GameBox.score
- }).then(function (result) {
- console.log(result);
- fixData();
- }).catch(function (err) {
- console.log(err);
- });;
- };
- }
- function pad(num, size) {var s = num+"";while (s.length < size) s = "0" + s;return s;}
- function getit(id){return document.getElementById(id);};
- function restoreUI(){
- var score = getit("highscore");
- score.innerHTML = GameBox.score || 0;
- if(GameBox.finished){
- var lost = getit("lost");
- lost.style.display = "block";
- var mscore = getit("myscore");
- mscore.innerHTML = GameBox.score || 0;
- }
- };
- window.restartGame = function(){
- if(GameBox.finished){
- var lost = getit("lost");
- lost.style.display = "none";
- GameBox.restart();
- }
- }
- function rotateToCamera(v){
- var mat4 = new THREE.Matrix4();
- mat4.makeRotationFromQuaternion(Game.camera);
- var rot;
- if(v.z == undefined){
- rot = new THREE.Vector3(v.x,0,v.y);
- }
- else{
- rot = new THREE.Vector3(v.x,v.y,v.z);
- }
- rot.applyQuaternion(Game.camera.getWorldQuaternion());
- var x = rot.x;
- var y = rot.y;
- var z = rot.z;
- var ax = Math.abs(x) > Math.abs(z) && Math.abs(x) > Math.abs(y);
- var ay = Math.abs(y) > Math.abs(x) && Math.abs(y) > Math.abs(z);
- var az = Math.abs(z) > Math.abs(x) && Math.abs(z) > Math.abs(y);
- var sx = x > 0 ? 1 : -1;
- var sy = y > 0 ? 1 : -1;
- var sz = z > 0 ? 1 : -1;
- rot.set(sx * ax, sy * ay,sz * az);
- return rot;
- }
- function getRotationOf(u, v)
- {
- if( u.equals(v) )return ZERO_ROT_QUAT;
- // It is important that the inputs are of equal length when
- // calculating the half-way vector.
- u = u.clone().normalize();
- v = v.clone().normalize();
- var k_cos_theta = u.clone().dot(v);
- var k = Math.sqrt(u.length() * v.length());
- // Unfortunately, we have to check for when u == -v, as u + v
- // in this case will be (0, 0, 0), which cannot be normalized.
- // if (u.equals(v.clone().multiplyScalar(-1)))
- if (k_cos_theta / k == -1)
- {
- // 180 degree rotation around any orthogonal vector
- var orthv = Y_AXIS;
- orthv.normalize();
- return new THREE.Quaternion(orthv.x , orthv.y , orthv.z , 0);
- }
- var cross = u.cross(v);
- return new THREE.Quaternion(cross.x , cross.y , cross.z , k_cos_theta + k ).normalize();
- }
- function vectorToLook(v){
- var q = getRotationOf(Z_AXIS, v);
- var qw = q.w;
- var angle = 2 * Math.acos(qw)
- var x = q.x / Math.sqrt(1-qw*qw)
- var y = q.y / Math.sqrt(1-qw*qw)
- var z = q.z / Math.sqrt(1-qw*qw)
- var look = {
- axis : new THREE.Vector3(x,y,z),
- degrees : angle
- };
- return look;
- }
- // Create Scene
- function createScene(scene){
- box = createBox(5,5,5,0x11ff20);
- box.receiveShadow = true;
- box.castShadow = true;
- box.position.copy(new THREE.Vector3( -4 , 7 , 4 ));
- //console.log(box.position);
- //scene.add(box);
- box = createBox(4,1,4,0x00ff20);
- box.receiveShadow = true;
- box.castShadow = true;
- box.position.copy(new THREE.Vector3( 1 , 4 , 0 ));
- //console.log(box.position);
- //scene.add(box);
- plane = createTerrain(2025,2025,0x7f8f6f);
- plane.rotation.x = Math.PI / 2;
- plane.receiveShadow = true;
- scene.add(plane);
- target = scene;
- createSkybox(scene);
- }
- // Lights
- function createDLight(color, intensity) {
- var l = new THREE.DirectionalLight( color, intensity );
- l.castShadow = true;
- l.shadowCameraRight = 30;
- l.shadowCameraLeft = -30;
- l.shadowCameraTop = 30;
- l.shadowCameraBottom = -30;
- l.shadow.mapSize.width = 1024;
- l.shadow.mapSize.height = 1024;
- l.shadow.map = null;
- return l;
- }
- function addLights(scene) {
- scene.add(new THREE.AmbientLight(0x111111)); // Ambient light
- // White directional light at half intensity shining from the top.
- var directionalLight = createDLight( 0xffffff, 0.55 );
- directionalLight.position.copy(new THREE.Vector3( 0 , 50, 0));
- directionalLight.castShadow = true;
- // var directionalLight2 = createDLight( 0xffffff, 0.15 );
- // directionalLight2.position.copy(new THREE.Vector3( -100 , 100, -45 ));
- // directionalLight2.castShadow = true;
- // var directionalLight3 = createDLight( 0xffffff, 0.15 );
- // directionalLight3.position.copy(new THREE.Vector3( 0 , 100 , 65 ));
- // directionalLight3.castShadow = true;
- //scene.add( directionalLight );
- // scene.add( directionalLight2 );
- // scene.add( directionalLight3 );
- }
- function load(k,path) {
- _textures[k] = loader.load(path, THREE.SphericalRefractionMapping);
- }
- function loadTextures() {
- manager.onProgress = function () {
- console.log("Progress");
- }
- manager.onLoad = function(){
- console.log("[-] Textures Loaded!")
- computeGraph();
- }
- //load('sun','textures/planets/sun.jpg');
- }
-
- ////////////////////////////////////////////////////////////////////////////////////////////////////////////
- var earth,moon,sun,europa;
- function computeGraph() {
- return true;
- }
- // Input Handling
- var axis = X_AXIS;
- var degrees = 0;
- window.onkeydown = function (e) {
- if(e.keyCode == 65){ // a
- moveVector.x = -1;
- }
- else if(e.keyCode == 87){ // w
- moveVector.y = -1;
- }
- else if(e.keyCode == 68){ // d
- moveVector.x = 1;
- }
- else if(e.keyCode == 83){ // s
- moveVector.y = 1;
- }
- if(e.keyCode == 73){
- lookVector.z = -1;
- lookVector.x = 0;
- lookVector.y = 0;
- }
- else if(e.keyCode == 75){
- lookVector.z = 1;
- lookVector.x = 0;
- lookVector.y = 0;
- }
- if(e.keyCode == 74){
- lookVector.x = -1;
- lookVector.y = 0;
- lookVector.z = 0;
- }
- else if(e.keyCode == 76){
- lookVector.x = 1;
- lookVector.y = 0;
- lookVector.z = 0;
- }
-
- if(e.keyCode == 79){ //o
- lookVector.y = 1;
- lookVector.z = 0;
- lookVector.x = 0;
- }
- else if(e.keyCode == 85){ //u
- lookVector.y = -1;
- lookVector.z = 0;
- lookVector.x = 0;
- }
- if(e.keyCode == 32){
- GameBox.progressToNext();
- }
- console.log(e.keyCode);
- };
- window.onkeyup = function (e) {
- if(e.keyCode == 65){ // a
- moveVector.x = 0;
- }
- else if(e.keyCode == 87){ // w
- moveVector.y = 0;
- }
- else if(e.keyCode == 68){ // d
- moveVector.x = 0;
- }
- else if(e.keyCode == 83){ // s
- moveVector.y = 0;
- }
- // if(e.keyCode == 73){
- // lookVector.y = 0;
- // }
- // else if(e.keyCode == 75){
- // lookVector.y = 0;
- // }
- // if(e.keyCode == 74){
- // lookVector.x = 0;
- // }
- // else if(e.keyCode == 76){
- // lookVector.x = 0;
- // }
- if(e.keyCode == 80){
- paused = !paused;
- }
- };
- var raycaster = new THREE.Raycaster();
- var dragging = false;
- window.onmousedown = function (event) {
- // var mx = ( event.clientX / window.innerWidth ) * 2 - 1;
- // var my = - ( event.clientY / window.innerHeight ) * 2 + 1;
- // var mouse = new THREE.Vector2(mx,my);
- // // update the picking ray with the camera and mouse position
- // raycaster.setFromCamera( mouse, Game.camera );
- // // calculate objects intersecting the picking ray
- // var intersects = raycaster.intersectObjects( Game.scene.children, true );
- // if(intersects.length){
- // dragging = intersects[0].object;
- // }
- };
- window.onmouseup = function (event) {
- dragging = false;
- };
- var lastmx=0,lastmy=0;
- window.onmousemove = function (event) {
- if(dragging){
- var mx = ( event.clientX / window.innerWidth ) * 2 - 1;
- var my = - ( event.clientY / window.innerHeight ) * 2 + 1;
- var dx = (mx - lastmx)*30;
- var dy = (my - lastmy)*30;
- lastmx = mx;
- lastmy = my;
- if(typeof dx != "number" || typeof dy != "number" )return;
- switch(axis){
- case 1 :
- dragging.position.x += dx;
- break;
- case 2 :
- dragging.position.y += dy;
- break;
- case 3 :
- dragging.position.z += dx;
- break;
- }
- }
- };
- ///////////////////////// HELPERS /////////////////////////////////
- function createSkybox(scene) {
- /////////////////////////////////////////////////////////////////////
- ///// SKYBOX
- var urlPrefix = "textures/skybox/Daylight Box_";
- var urls = [ "Left.bmp", "Right.bmp",
- "Top.bmp", "Bottom.bmp",
- "Back.bmp", "Front.bmp" ];
- scene.background = new THREE.CubeTextureLoader()
- .setPath( urlPrefix )
- .load(urls);
- return;
-
- }
- function createBox(x,y,z,color){
- // This is where introtowebgl uses CubeGeometry
- var geometry = new THREE.BoxGeometry(x,y,z);
- //var material = new THREE.MeshBasicMaterial({ color: color, shading : THREE.SmoothShading });
- var material = new THREE.MeshPhongMaterial( {
- color: color,
- specular: 0x050505,
- shininess: 100
- } );
- var cube = new THREE.Mesh(geometry,material);
- return cube;
- }
- function generateHeight( width, height ) {
- var size = width * height, data = new Uint8Array( size ),
- perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
- for ( var j = 0; j < 4; j ++ ) {
- for ( var i = 0; i < size; i ++ ) {
- var x = i % width, y = ~~ ( i / width );
- data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * quality * 1.75 );
- }
- quality *= 5;
- }
- return data;
- }
- function createTerrain(w,h,color){
- var geometry = new THREE.PlaneGeometry( w, h, w/8, h/8);
- var vertices = geometry.vertices;
- var NOISE = generateHeight(w/8+1,h/8+1);
- for ( var i = 0, l = vertices.length; i < l; i ++) {
- vertices[ i ].z = NOISE[ i ] + 10;
- }
- var texture = new THREE.TextureLoader().load( "textures/terrains/desertrock.jpg" );
- texture.wrapS = THREE.RepeatWrapping;
- texture.wrapT = THREE.RepeatWrapping;
- texture.repeat.set( w/64, w/64 );
- //var material = new THREE.MeshBasicMaterial( {color: color, side: THREE.DoubleSide} );
- var material = new THREE.MeshPhongMaterial({
- specular: 0x030303,
- map : texture,
- color : color,
- alphaTest: 0.8,
- shininess: 2,
- side: THREE.DoubleSide,
- shading : THREE.SmoothShading
- });
- var plane = new THREE.Mesh( geometry, material );
- return plane;
- }
- init();
- })();
|