Homework 5

by Millieyan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js">
</script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

CSS

body {
  overflow: hidden;
}

JavaScript

var renderer, scene, camera, controls;

init();
animate();

function init(){

	renderer=new THREE.WebGLRenderer();
  document.body.appendChild(renderer.domElement);
  var width=window.innerWidth;
  var height=window.innerHeight; 
  renderer.setSize(width,height);
  renderer.setClearColor(0x8888888);
  
  scene = new THREE.Scene();
  var grid=new THREE.GridHelper(100,100,0x222222,0x111111);
  scene.add(grid);
  var axes=new THREE.AxisHelper(5);
  scene.add(axes);
  
  camera=new THREE.PerspectiveCamera(35,width/height,1,1000);
  camera.position.y=16;
   camera.position.x=40;
   camera.lookAt(new THREE.Vector3(0,0,0));
 
   controls=new THREE.OrbitControls(camera,renderer.domElement);
   var tank=CreateTank();
   scene.add(tank);
}

function CreateTank(){
  var met=new THREE.MeshNormalMaterial();
  var boxGeometry=new THREE.BoxGeometry(10,2,8);
  var cylinderGeometry=new THREE.CylinderGeometry(2,2,4,20);
  var box=new THREE.Mesh(boxGeometry,met);
  var cylinder=new THREE.Mesh(cylinderGeometry,met);
  box.position.copy(new THREE.Vector3(5,1,0));
  cylinder.position.copy(new THREE.Vector3(8,4,0));
  var tank=new THREE.Object3D();
  tank.add(box);
  tank.add(cylinder);
  return tank;
}

function animate() {
controls.update();
	requestAnimationFrame(animate);
	render();
}
function render(){
	renderer.render(scene,camera);
}