HW5

by jason870509

HTML

<div id="info">Using Object3D (part 1)</div>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

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

JavaScript

var camera, scene, renderer, light, controls;
var frame;
init();
animate();

function init() {

  renderer = new THREE.WebGLRenderer();
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  renderer.setClearColor(0xcccccc);

  document.body.appendChild(renderer.domElement);


  scene = new THREE.Scene();
  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'gray');
  scene.add(gridXZ);

  camera = new THREE.PerspectiveCamera(50, width / height, 1, 10000);
  camera.position.z = 500;

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  var terrain_geometry = makeTile(0.1, 40);
var terrain_material = new THREE.MeshLambertMaterial({color: new THREE.Color(0.9, 0.55, 0.4)});
var terrain = new THREE.Mesh(terrain_geometry, terrain_material);
terrain.position.x = -2;
terrain.position.z = -2;
terrain.updateMatrixWorld(true);
scene.add(terrain);


}
////////////////////////////////////////////////////////////
var angle = 0;

function animate() {
 
  requestAnimationFrame(animate);
  render();
}

function render() {
  //frame.rotation.y += 0.05;
  renderer.render(scene, camera);
}