Homework 5-2

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(50,width/height,1,1000);
  camera.position.y=40;
   camera.position.x=100;
   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,20,10);
  var boxGeometry2=new THREE.BoxGeometry(10,10,40);
  var boxGeometry3=new THREE.BoxGeometry(10,20,10);
  var box=new THREE.Mesh(boxGeometry,met);
  var box2=new THREE.Mesh(boxGeometry2,met);
  var box3=new THREE.Mesh(boxGeometry3,met);
  box.position.copy(new THREE.Vector3(0,20,15));
  box2.position.copy(new THREE.Vector3(0,5,0));
  box3.position.copy(new THREE.Vector3(0,20,-15));
  var tank=new THREE.Object3D();
  tank.add(box);
  tank.add(box2);
  tank.add(box3);
  return tank;
}

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