b0VIM 8.0pZLA!angus17Anguss-MacBook-Pro.local~angus17/Dropbox/MAMP_htdocs/ccl_UCSC/courses/cmpm163/code/week4/w4_heightMap.htmlment.htmlutf-8 3210#"! UtpowadQqqa{Z9+_= a G F   u Z A    _ - *  f e  V R Q < : 9 "  p[UT/.|CBhEDFwzy@4-$4%renderer.setSizrrenderer.srenderer.rendererendererenderenderer.setSize(window.innerWidth, window.innerHeight);addGround();addLights();setupCamera();var controls = new THREE.OrbitControls( camera, renderer.domElement );var renderer = new THREE.WebGLRenderer();var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);var scene = new THREE.Scene();} renderer.render(scene, camera); requestAnimationFrame(render);function render() {} scene.add(plane) plane.quaternion.multiplyQuaternions( q, plane.quaternion ); q.setFromAxisAngle( new THREE.Vector3(-1,0,0), 90 * Math.PI / 180 ); var q = new THREE.Quaternion(); // rotate the plane so up is where y is growing.. plane.position = new THREE.Vector3(0,0,0); var plane = new THREE.Mesh(geometry, material); geometry.computeVertexNormals(); geometry.computeFaceNormals(); } geometry.vertices[i].z = geometry.vertices[i].z + terrainValue * 200 ; var terrainValue = terrain[i] / 255; { for (var i = 0, l = geometry.vertices.length; i < l; i++) console.log("length: " + terrain.length + ", vertices length: " + geometry.vertices.length); // to check uncomment the next line, numbers should be equal // "skewing the landscape" then.. // The simplest is, if like here you have 100 segments, the image to have 101 pixels. You don't have to worry about // there's 10 segments, there's 11 vertices, and so forth. // keep in mind, that the plane has more vertices than segments. If there's one segment, there's two vertices, if terrain = getTerrainPixelData(); }); wireframe: false color: 0xccccff, var material = new THREE.MeshLambertMaterial({ var geometry = new THREE.PlaneGeometry(400, 400, numSegments-1, numSegments-1); var numSegments = 256;function addGround() {} return normPixels; } normPixels.push(255 - ((data[i] + data[i+1] + data[i+2]) / 3)); // get the average value of R, G and B. for (var i = 0, n = data.length; i < n; i += 4) { var normPixels = [] var data = canvas.getContext('2d').getImageData(0,0, img.height, img.width).data; canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); console.log(" w h = " + canvas.width + " / " + canvas.height); canvas.height = img.height; canvas.width = img.width; var canvas = document.getElementById("canvas"); var img = document.getElementById("landscape-image");{function getTerrainPixelData()//To get the pixels, draw the image onto a canvas. From the canvas get the Pixel (R,G,B,A)} camera.lookAt(new THREE.Vector3(0,0,0)); camera.position.x = 0; camera.position.y = 240; camera.position.z = 1000;function setupCamera() {} scene.add(directionalLight); directionalLight.position.set(900, 400, 0000).normalize(); var directionalLight = new THREE.DirectionalLight(0xffffff); scene.add(ambientLight); ambientLight.intensity = 0.0; var ambientLight = new THREE.AmbientLight(0x444444); function addLights() {
#assets { display: none; } #adn render();document.body.appendChild(renderer.domElement);ad\4onM? yH;6 m l 4    } { z  u W   x b a -  p o  zyQ-,OK"[Z-k {nm432h[renrendererrendererrrrrrrenderer.setSize(window.innerWidth, window.innerHeigrrenrenderer.setSize(window.innerWidthrenderer.setSize(window.innerWidth, window.innerHeight);addGround();rendererrenderer.setSize(window.innerWidtrrrenderer.setSize(window.innerWidth, window.innerHeight);addGround();addLights();setupCamera();var controls = new THREE.OrbitControls( camera, renderer.domElement );var renderer = new THREE.WebGLRenderer();var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);var scene = new THREE.Scene();} renderer.render(scene, camera); controls.update(); requestAnimationFrame(render);function render() {} scene.add(plane) plane.rotateX(-Math.PI/3); plane.position = new THREE.Vector3(0,0,0); var plane = new THREE.Mesh(geometry, material); geometry.computeVertexNormals(); geometry.computeFaceNormals(); } geometry.vertices[i].z = geometry.vertices[i].z + terrainValue * 200 ; var terrainValue = terrain[i] / 255; { for (var i = 0, l = geometry.vertices.length; i < l; i++) //console.log("length: " + terrain.length + ", vertices length: " + geometry.vertices.length); // to check uncomment the next line, numbers should be equal // "skewing the landscape" then.. // The simplest is, if like here you have 100 segments, the image to have 101 pixels. You don't have to worry about // there's 10 segments, there's 11 vertices, and so forth. // keep in mind, that the plane has more vertices than segments. If there's one segment, there's two vertices, if terrain = getTerrainPixelData(); }); side: THREE.DoubleSide wireframe: false, color: 0xccccff, var material = new THREE.MeshLambertMaterial({ var geometry = new THREE.PlaneGeometry(400, 400, numSegments-1, numSegments-1); var numSegments = 256;function addGround() {} return normPixels; } normPixels.push(255 - ((data[i] + data[i+1] + data[i+2]) / 3)); // get the average value of R, G and B. for (var i = 0, n = data.length; i < n; i += 4) { var normPixels = [] var data = canvas.getContext('2d').getImageData(0,0, img.height, img.width).data; canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); console.log(" w h = " + canvas.width + " / " + canvas.height); canvas.height = img.height; canvas.width = img.width; var canvas = document.getElementById("canvas"); var img = document.getElementById("landscape-image");{function getTerrainPixelData()//To get the pixels, draw the image onto a canvas. From the canvas get the Pixel (R,G,B,A)} camera.lookAt(new THREE.Vector3(0,0,0)); camera.position.x = 0; camera.position.y = 240; camera.position.z = 100;function setupCamera() {} scene.add(directionalLight); directionalLight.position.set(0, 1000, 0).normalize(); var directionalLight = new THREE.DirectionalLight(0xffffff); scene.add(ambientLight); ambientLight.intensity = 0.0; var ambientLight = new THREE.AmbientLight(0x444444); function addLights() {
#assets { display: none; } #canvas { display: none; } body { margin: 0; font-family: Verdana; }