hw5-2

terrain

by jmchen

HTML

<div id="info">Terrain
<br><a href="javascript:wireframe()">toggle wireframe</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}
body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, terrain, light, controls;
var clock = new THREE.Clock();
var pickPlane;
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var pickables = [];

init();	
animate();

function wireframe() {
	wireframe.status = wireframe.status === undefined ? false : wireframe.status;
  wireframe.status = !(wireframe.status);
  if (wireframe.status) {
  	terrain.material.wireframe = true;
  } else {
  	terrain.material.wireframe = false;
  }
  
}
function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;

  light = new THREE.PointLight(0xffffff);
  light.position.set(100, 300, 200);
  scene.add(light);

  var axis = new THREE.AxisHelper(20);
  scene.add(axis);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  document.body.appendChild(renderer.domElement);
  document.addEventListener('mousedown', onDocumentMouseDown, false);
	
  //////////////////////////////////////////////////////////////
  var meshFunc = function(u0, v0) {
    return new THREE.Vector3(-100 + 200 * u0, 0, -100 + 200 * v0);
  };
  // [x,z] = [-100,100]x[-100,100]
 	pickPlane = new THREE.Mesh (new THREE.PlaneGeometry (200,200), new THREE.MeshBasicMaterial());
	pickPlane.rotation.x = -Math.PI/2;
	scene.add (pickPlane);
	pickables.push (pickPlane);
  pickPlane.visible = false;
  
  var geometry = new THREE.ParametricGeometry(meshFunc, 40, 40);
  // these two are not required: already done so in constructor
 	// geometry.computeFaceNormals();
 	// geometry.computeVertexNormals();

	THREE.ImageUtils.crossOrigin = '';
  texture = THREE.ImageUtils.loadTexture('https://i.imgur.com/p8CRm9W.jpg');
	texture.repeat.set (2,2);
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
	
  var...