/client/scripts/modules/gamefield.module.js
JavaScript | 311 lines | 189 code | 90 blank | 32 comment | 14 complexity | 4e75d80db778364b107729a8af82986b MD5 | raw file
Possible License(s): GPL-2.0, WTFPL, MIT, BSD-3-Clause, Apache-2.0, 0BSD
- define([
- 'jquery',
- 'underscore',
- 'backbone',
- 'three', // THREE JS
- 'util/Stats', // THREE JS STATS HELPER
- 'util/PRNG', // Pseudo Random Number Generator
- 'util/SimplexNoise', // Simplex Noise
- 'util/THREE-window-resize', // helps resizing the canvas on window changes
- 'libs/Tween',
- 'views/avatar.view',
- 'models/avatar.model',
- 'views/tinyworld.view',
- 'models/tinyworld.model',
- 'models/faction.model',
- 'models/actions/select.action'
- ], function($, _, Backbone, three, stats, PRNG, SimplexNoise,
- resize, TWEEN, avatarView, avatarModel, tileView, tinyworldModel, factionModel, selectAction){
- var container, stats;
- var camera, scene, projector, renderer;
- var objects = [], plane;
- var MARKER = null;
- var mouse = new THREE.Vector2(),
- offset = new THREE.Vector3(),
- INTERSECTED, SELECTED, SELECTEDn;
-
- var gamefield = Backbone.Collection.extend({
- description: "gamefield - holds objects we draw on the canvas",
- model: tinyworldModel,
- hapticObjects: [], // all pickable objects
- activeSelection: null, // the currently active object
- ActionPrimary: null, // the currently active action
- ActionSecondary: null, // currently active primary action
- initialize: function(items, options){
- _.extend(this, Backbone.Events);
- var self = this;
- this.ludare = options.ludare;
- this.socket = options.socket;
- this.cinematic = options.cinematic;
- this.ui = options.ui;
- this.controls = options.controls;
-
- this.on("add", function(item) {
- // on adding items to this module perform a check for event capability and add them to the scene (field)
- // console.log("FUCK ADDING HAPTICS");
- if(item.view.hapticNode){
- // console.log("HAPTICS", self.hapticObjects.length, item.view.hapticNode);
- self.hapticObjects.push(item.view.hapticNode); // objects will be queried for mouse ray intersections later on
- }
- self.field.add(item.view.node);
- });
-
- //assign a primary action, will be triggered via UI
- this.ActionPrimary = selectAction;
- this.field = new THREE.Object3D();
- this.avatar = new avatarModel({world:{x:1, y:1, z:1}});
- //this.add(this.avatar);
-
- //assign active Selection, will be affected by actions
- this.activeSelection = this.avatar;
-
- container = document.createElement('div');
- document.body.appendChild( container );
- var prng = new PRNG("sapd3");
- this.simplexNoise = new SimplexNoise(prng);
- scene = new THREE.Scene();
-
- this.cinematic.target = this.avatar.view.node;
- scene.add( this.cinematic.camera );
- // add Axis helper
- var axis = new THREE.AxisHelper();
- //scene.add(axis);
- //scene.add( new THREE.AmbientLight( 0x131313 ) );
- var light = new THREE.SpotLight( 0xffffff, 1.5 );
- light.position.set( 0, 500, 2000 );
- light.castShadow = true;
- light.shadowCameraNear = 200;
- light.shadowCameraFar = this.cinematic.camera.far;
- light.shadowCameraFov = 90;
- light.shadowBias = -0.00022;
- light.shadowDarkness = 0.5;
- light.shadowMapWidth = 1024;
- light.shadowMapHeight = 1024;
- this.light = light;
- //scene.add( light );
- var field_width = 1;
- var padding = 0.2;
- var tilesize = 20;
- var geometry = new THREE.PlaneGeometry( tilesize, tilesize );
- var mergedGeo = new THREE.Geometry();
- var j = 0;
- var noise_x, noise_y;
- // create the particle variables
- var particles = new THREE.Geometry(),
- pMaterial =
- new THREE.ParticleBasicMaterial({
- color: 0xFFFFFF,
- size: tilesize
- });
- // create the particle system
- var particleSystem =
- new THREE.ParticleSystem(
- particles,
- pMaterial);
- // add it to the scene
- //field.add(particleSystem);
- //field.position.x = field_width *(tilesize +(tilesize *padding)) / -2;
- //field.position.z = field_width *(tilesize +(tilesize *padding)) / -2;
- scene.add(this.field);
- plane = new THREE.Mesh( new THREE.PlaneGeometry( 9000, 9000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xFF0000, opacity: 0.9, transparent: false, wireframe: true } ) );
- //plane.lookAt( this.cinematic.camera.position );
- plane.visible = false;
- scene.add( plane );
- projector = new THREE.Projector();
- renderer = new THREE.WebGLRenderer( { antialias: true } );
- renderer.sortObjects = false;
- renderer.setSize( window.innerWidth, window.innerHeight );
- //renderer.shadowMapEnabled = true;
- //renderer.shadowMapSoft = true;
- container.appendChild( renderer.domElement );
- stats = new Stats();
- stats.domElement.style.position = 'absolute';
- stats.domElement.style.top = '0px';
- container.appendChild( stats.domElement );
-
- //closure scope
- var self = this;
- camera = this.cinematic.camera;
- renderer.domElement.addEventListener( 'mousemove', function(event){self.onDocumentMouseMove(event);}, false );
- renderer.domElement.addEventListener( 'mousedown', function(event){self.onDocumentMouseDown(event);}, false );
- renderer.domElement.addEventListener( 'mouseup', function(event){self.onDocumentMouseUp(event);}, false );
- this.scene = scene;
- this.animate();
- },
- // Update Models with new data from sever
- //
- //
- updateModels: function(models){
- var self = this;
- var clientModel = null;
- _.each(models, function(item){
- // console.log("MAP::UPDATE::MODEL::", item);
- clientModel = self.get(item.id);
- if(clientModel){
- clientModel.set(item);
- clientModel.trigger("change");
- }
-
- });
- },
- //
- animate: function(){
- var self = this;
- requestAnimationFrame( function(){ self.animate();});
- this.render();
- this.controls.controls.update();
- this.cinematic.update();
-
- this.ludare.update();
- stats.update();
- },
- render: function(){
- var timer = new Date().getTime() * 0.0001;
- //this.light.position = (this.cinematic.camera.position);
- //update all tweens
- TWEEN.update();
- renderer.render( scene, this.cinematic.camera );
- },
- onDocumentMouseMove: function(event){
- mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
- mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
- event.preventDefault();
- var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
- projector.unprojectVector( vector, camera );
- var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
- var intersects = ray.intersectObjects( this.hapticObjects );
- //console.log("EVENT::Move", intersects.length);
-
- if ( intersects.length != 0 ) {
- SELECTED = intersects[ 0 ].object;
- if(SELECTEDn && (SELECTED != SELECTEDn)){
- // console.log("MOVER", SELECTED.view);
- SELECTED.view.trigger("mouseover");
- container.style.cursor = 'pointer';
- SELECTEDn.view.trigger("mouseout");
- } else {
- SELECTED.view.trigger("mouseover");
- container.style.cursor = 'pointer';
- }
-
- } else {
- if(SELECTEDn){
- //console.log("SELECTEDn", SELECTEDn);
- SELECTEDn.view.trigger("mouseout");
- }
- SELECTED = false;
- container.style.cursor = 'auto';
- }
- SELECTEDn = SELECTED;
- return false; // kill dragging for now
-
- },
- onDocumentMouseDown: function(event){
- event.preventDefault();
- var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
- projector.unprojectVector( vector, camera );
- var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
- var intersects = ray.intersectObjects( this.hapticObjects );
-
- if ( intersects.length > 0 ) {
- // console.log("CL");
- SELECTED.view.trigger("click");// not really a click but a mouseDown
- }
- },
- onDocumentMouseUp: function(event){
- event.preventDefault();
- var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
- projector.unprojectVector( vector, camera );
- var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
- var intersects = ray.intersectObjects( this.hapticObjects );
-
- if ( intersects.length > 0 ) {
- //console.log("mouseup");
- SELECTED.view.trigger("mouseUp");
- }
- if(this.ActionSecondary){
- this.ActionSecondary.trigger("click", {target: SELECTED, selection: this.activeSelection});
- }
- if(this.ActionPrimary){
- this.ActionPrimary.trigger("click", {target: SELECTED, selection: this.activeSelection});
- }
- }
- });
- return gamefield;
- });
-