diff options
Diffstat (limited to 'js/3D_Landscape.js')
| -rw-r--r-- | js/3D_Landscape.js | 197 |
1 files changed, 197 insertions, 0 deletions
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() });
+}
|