Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Map

By: a guest on Jul 17th, 2012  |  syntax: JavaScript  |  size: 5.22 KB  |  views: 79  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. function Map(selector)
  2. {
  3.         this.stats = new Stats();
  4.  
  5.         // Align top-left
  6.         this.stats.domElement.style.position = 'fixed';
  7.         this.stats.domElement.style.left = '0';
  8.         this.stats.domElement.style.top = '0';
  9.         this.stats.domElement.style.zIndex = '10000';
  10.  
  11.         document.body.appendChild( this.stats.domElement );
  12.        
  13.         this.container = $(selector);
  14.        
  15.         this.container.width(this.container.parent().width());
  16.         this.container.height(this.container.parent().parent().height() - 61);
  17.        
  18.         this.windowHalfX = this.container.width() / 2;
  19.         this.windowHalfY = this.container.height() / 2;
  20.        
  21.         this.mouseX = this.windowHalfX;
  22.         this.mouseY = this.windowHalfY;
  23.        
  24.         this.generateScene();
  25.         this.generatePlane();
  26.         this.generateBuildings();
  27.         this.generateLights();
  28.         this.addToDOM();
  29.        
  30.         this.animate();
  31.        
  32.         var t = this;
  33.        
  34.         this.container.click(function(e)
  35.         {
  36.                 //t.click(e);
  37.         });
  38.        
  39.         this.container.mousemove(function(e)
  40.         {
  41.                 t.mouseMove(e);
  42.         });
  43.        
  44.         this.container.mousedown(function(e)
  45.         {
  46.                 t.mouseDown(e);
  47.         });
  48.        
  49.         this.container.mouseup(function(e)
  50.         {
  51.                 t.mouseUp(e);
  52.         });
  53. }
  54.  
  55. Map.prototype.generateScene = function()
  56. {
  57.         this.projector = new THREE.Projector();
  58.        
  59.         this.scene = new THREE.Scene();
  60.         this.scene2 = new THREE.Scene();
  61.        
  62.         this.camera = new THREE.PerspectiveCamera(75, this.container.innerWidth() / this.container.innerHeight(), 1, 10000);
  63.         this.camera.position.x = -500;
  64.         this.camera.position.y = 100;
  65.         this.camera.position.z = 300;
  66.        
  67.         this.camera.lookAt({x: -300, y: 0, z: 0});
  68.        
  69.         this.scene2.add(this.camera);
  70. }
  71.  
  72. Map.prototype.generatePlane = function()
  73. {      
  74.         var img = new THREE.MeshBasicMaterial({
  75.                 color: 0xCCCCCC,
  76.                 map: THREE.ImageUtils.loadTexture('images/map.jpg'),
  77.                 overdraw: true
  78.         });
  79.        
  80.         img.map.needsUpdate = true;
  81.        
  82.         this.plane = new THREE.Mesh(new THREE.PlaneGeometry(2048, 2048, 16, 16), img);
  83.        
  84.         this.scene.add(this.plane);
  85. }
  86.  
  87. Map.prototype.generateBuildings = function()
  88. {
  89.         //this._addCube(10, 10, 10, 0, 0, 0);
  90. }
  91.  
  92. Map.prototype._addCube = function(w, h, d, x, y, z)
  93. {
  94.         var geometry = new THREE.CubeGeometry(w, h, d);
  95.         var material = new THREE.MeshLambertMaterial({
  96.                 color: 0xffffff,
  97.                 shading: THREE.FlatShading,
  98.                 overdraw: true
  99.         });
  100.        
  101.         var cube = new THREE.Mesh(geometry, material);
  102.        
  103.         cube.position.x = x;
  104.         cube.position.y = y + (h / 2);
  105.         cube.position.z = z;
  106.        
  107.         this.scene2.add(cube);
  108. }
  109.  
  110. Map.prototype.generateLights = function()
  111. {
  112.         var ambientLight = new THREE.AmbientLight(Math.random() * 0x10);
  113.        
  114.         this.scene2.add(ambientLight);
  115.        
  116.         var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
  117.         directionalLight.position.x = Math.random() - 0.5;
  118.         directionalLight.position.y = Math.random() - 0.5;
  119.         directionalLight.position.z = Math.random() - 0.5;
  120.         directionalLight.position.normalize();
  121.        
  122.         this.scene2.add(directionalLight);
  123.        
  124.         var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
  125.         directionalLight.position.x = Math.random() - 0.5;
  126.         directionalLight.position.y = Math.random() - 0.5;
  127.         directionalLight.position.z = Math.random() - 0.5;
  128.         directionalLight.position.normalize();
  129.        
  130.         this.scene2.add(directionalLight);
  131. }
  132.  
  133. Map.prototype.addToDOM = function(selector)
  134. {
  135.         //this.renderer = new THREE.WebGLRenderer();
  136.         this.renderer = new THREE.CanvasRenderer();
  137.         this.renderer.setSize(this.container.innerWidth(), this.container.innerHeight());
  138.        
  139.         this.renderer.autoClear = false;
  140.        
  141.         this.container.append(this.renderer.domElement);
  142. }
  143.  
  144. Map.prototype.getMousePosition = function(event)
  145. {
  146.         var parentOffset = this.container.offset();
  147.         var clickX = event.pageX - parentOffset.left;
  148.         var clickY = event.pageY - parentOffset.top;
  149.        
  150.         var vector = new THREE.Vector3((clickX / this.container.innerWidth()) * 2 - 1, - (clickY / this.container.innerHeight()) * 2 + 1, 1);
  151.         this.projector.unprojectVector(vector, this.camera);
  152.        
  153.         var ray = new THREE.Ray(this.camera.position, vector.subSelf(this.camera.position).normalize());
  154.        
  155.         var intersect = ray.intersectObject(this.plane);
  156.        
  157.         return intersect[0].point;
  158. }
  159.  
  160. Map.prototype.mouseDown = function(event)
  161. {
  162.         this.mouseStartPosition = this.getMousePosition(event);
  163. }
  164.  
  165. Map.prototype.mouseUp = function(event)
  166. {
  167.         var pos = this.getMousePosition(event);
  168.        
  169.         var width = Math.abs(this.mouseStartPosition.x - pos.x);
  170.         var depth = Math.abs(this.mouseStartPosition.z - pos.z);
  171.        
  172.         var middleX = (pos.x + this.mouseStartPosition.x) / 2;
  173.         var middleZ = (pos.z + this.mouseStartPosition.z) / 2;
  174.        
  175.         this._addCube(width, 10, depth, middleX, 0, middleZ);
  176. }
  177.  
  178. Map.prototype.mouseMove = function(event)
  179. {
  180.         var parentOffset = this.container.offset();
  181.        
  182.         var clickX = event.pageX - parentOffset.left;
  183.         var clickY = event.pageY - parentOffset.top;
  184.        
  185.         this.mouseX = clickX - this.windowHalfX;
  186.         this.mouseY = clickY - this.windowHalfY;
  187. }
  188.  
  189. Map.prototype.animate = function()
  190. {
  191.         this.stats.begin();
  192.         this.render();
  193.         this.stats.end();
  194. }
  195.  
  196. Map.prototype.render = function()
  197. {
  198.         this.camera.position.x += (this.mouseX - this.camera.position.x) * 0.05;
  199.         this.camera.position.y += ((-this.mouseY - this.camera.position.y) * 0.05);
  200.        
  201.         this.camera.lookAt(this.scene.position);
  202.        
  203.         this.renderer.clear();
  204.        
  205.         this.renderer.render(this.scene, this.camera);
  206.         this.renderer.render(this.scene2, this.camera);
  207. }