From ae0e6d987781d2fbf225611e2f8df37380a2bbcd Mon Sep 17 00:00:00 2001
From: yo mama <pepper@scannerjammer.com>
Date: Thu, 12 Feb 2015 18:29:27 -0800
Subject: first

---
 js/3D_Landscape.js | 197 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 197 insertions(+)
 create mode 100644 js/3D_Landscape.js

(limited to 'js/3D_Landscape.js')

diff --git a/js/3D_Landscape.js b/js/3D_Landscape.js
new file mode 100644
index 0000000..6871786
--- /dev/null
+++ b/js/3D_Landscape.js
@@ -0,0 +1,197 @@
+var container, stats;
+var camera, controls, scene, renderer;
+var mesh, texture, material;
+var worldWidth = 256, worldDepth = 256, worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
+var textureURL, heightmapURL;
+var textureFile = 'img/test2.gif'; //texture doesn't need resizing
+var heightmapFile = 'img/testnew.png';
+var pos_x, pos_y, pos_z, rot_x, rot_y, rot_z;
+var wf = false;
+
+
+function runWebGLSimulation(){
+	//Detect WebGL
+	if (!Detector.webgl) {
+		Detector.addGetWebGLMessage();
+		document.getElementById('container').innerHTML = "";
+	}
+
+	//Start Graphics
+	initGraphics(function(){ animate() });
+	//Start Scene Animation
+}
+
+function initGraphics(cb) {
+
+	container = document.getElementById('container');
+	
+	//Set camera
+	camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 20000);
+	
+	//Set scene
+	scene = new THREE.Scene();
+	
+	//Get heightmap data
+	//Generates the heightmap data from the heightmap image
+	var size = worldWidth * worldDepth, data = new Float32Array(size);
+
+	var canvas = document.createElement('canvas');
+	canvas.width = worldWidth;
+	canvas.height = worldDepth;
+	context = canvas.getContext('2d');
+	context.fillStyle = '#000';
+	context.fillRect(0, 0, worldWidth, worldDepth);
+
+	var img = new Image();
+	img.src = heightmapFile;
+
+//FIXME
+  img.onload = function(){
+    context.drawImage(img, 0, 0);
+    image = context.getImageData(0, 0, worldWidth, worldDepth);
+    var imageData = image.data;
+    var pixels = size;
+    for (var i=0; i<pixels; i++){
+      // Get RGB
+      red = imageData[4 * i + 0];
+      green = imageData[4 * i + 1];
+      blue = imageData[4 * i + 2];
+      // Get grayscale
+      gray = (red + green + blue) / 3;
+      // Put heightmap value
+      data[i] = gray;
+    }
+
+    //Set camera position
+    camera.position.y = data[worldHalfWidth + worldHalfDepth * worldWidth] + 500;
+    scene.add(camera);
+    
+    //Create geometry data used for mesh
+    var geometry = new THREE.PlaneGeometry(7500, 7500, worldWidth - 1,	worldDepth - 1);
+    for ( var i = 0, l = geometry.vertices.length; i < l; i++) {
+      geometry.vertices[i].position.z = data[i] * 3;
+    }
+    
+    //Load texture
+    texture = THREE.ImageUtils.loadTexture(textureFile, {}, function() {
+      renderer.render(scene, camera);
+    });
+    texture.needsUpdate = true;
+    
+    //Create mesh from heightmap and texture
+    material = new THREE.MeshBasicMaterial({
+      map : texture,
+      wireframe: wf
+    });
+    mesh = new THREE.Mesh(geometry, material);
+    mesh.rotation.x = -90 * Math.PI / 180;
+    scene.add(mesh);
+
+    //Create renderer
+    renderer = new THREE.WebGLRenderer({
+      preserveDrawingBuffer : true // required to support .toDataURL()
+    }); 
+    renderer.setSize(window.innerWidth, window.innerHeight - 150); //FIXME, add height of the controls
+    container.innerHTML = "";
+    container.appendChild(renderer.domElement);
+
+  //	//Add FPS statistics
+  //	stats = new Stats();
+  //	stats.domElement.style.position = 'absolute';
+  //	stats.domElement.style.top = '0px';
+  //	container.appendChild(stats.domElement);
+
+    //Get default values
+    pos_x = mesh.position.x;
+    pos_y = mesh.position.y;
+    pos_z = mesh.position.z;
+    rot_x = mesh.rotation.x;
+    rot_y = mesh.rotation.y;
+    rot_z = mesh.rotation.z;
+  //{{{init controls
+    //Controls 
+    
+
+    //Toggle wire-frame
+    shortcut.add("Space",function() {
+      wf = !wf;
+      material.wireframe = wf;
+    });
+
+    //Rotate Up
+    shortcut.add("Shift+Up",function() {
+      mesh.rotation.x += 0.1;
+    });
+    
+    //Rotate Down
+    shortcut.add("Shift+Down",function() {
+      mesh.rotation.x -= 0.1;
+    });
+    
+    //Rotate Left
+    shortcut.add("Shift+Left",function() {
+      mesh.rotation.z += 0.1;
+    });
+    
+    //Rotate Right
+    shortcut.add("Shift+Right",function() {
+      mesh.rotation.z -= 0.1;
+    });
+
+    //Zoom In
+    shortcut.add("Page_up",function() {
+      mesh.position.z += 150;
+    });
+
+    //Zoom Out
+    shortcut.add("Page_down",function() {
+      mesh.position.z -= 150;
+    });
+
+    //Up
+    shortcut.add("Up",function() {
+      mesh.position.y += 150;
+    });
+
+    //Down
+    shortcut.add("Down",function() {
+      mesh.position.y -= 150;
+    });
+    
+    //Left
+    shortcut.add("Left",function() {
+      mesh.position.x -= 150;
+    });
+
+    //Right
+    shortcut.add("Right",function() {
+      mesh.position.x += 150;
+    });
+    //Reset
+    shortcut.add("Delete",function() {
+      mesh.position.x = pos_x;
+      mesh.position.y = pos_y;
+      mesh.position.z = pos_z;
+      mesh.rotation.x = rot_x;
+      mesh.rotation.y = rot_y;
+      mesh.rotation.z = rot_z;
+      
+    });
+  //}}}
+  cb();
+  };
+}
+
+
+function animate() {
+	render();
+	requestAnimationFrame(animate);
+}
+
+function render() {
+	renderer.render(scene, camera);
+}
+
+window.onload= function(e){
+	initGraphics(function(){ animate() });
+}
-- 
cgit v1.2.3-70-g09d2