hw4_2

by omgazero

HTML

<div id="info">
  hw4_2
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.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: #ff0000;
}

body {
  overflow: hidden;
}

JavaScript

var frame, scene, light, camera, renderer, controls;
var treadtexture = 'images/tread.jpg';
var tiretexture = 'images/tire.png';

init();
animate();


function init() {
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
//  camera.position.y = 200;
  camera.position.z = 200;

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


  light = new THREE.SpotLight(0xffffff, 1, 400);
  light.position.set(0, 0, 300);
  scene.add(light);
  
  var ambientLight = new THREE.AmbientLight(0x444444);
  scene.add(ambientLight);
  
  
/*  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);*/

	var plane = new THREE.Mesh( new THREE.PlaneGeometry(200, 200), new THREE.MeshPhongMaterial() );
  plane.position.z -= 20;
	scene.add(plane);
  
  frame = createCar();
  scene.add(frame);
  
}

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

function render() {
				
  renderer.render(scene, camera);
}

function createCar(){

	let car = new THREE.Object3D();
  
  let body = new THREE.Mesh(new THREE.BoxGeometry(50, 20, 30), new THREE.MeshPhongMaterial());
  
  car.add(body);
  
  let wheel1 = createWheel();
	let wheel2 = createWheel();
	let wheel3 = createWheel();
	let wheel4 = createWheel();
	
	wheel1.position.y -= 5;
	wheel1.position.z -= 6;
	wheel1.position.x -= 5;
	wheel1.rotation.x = -Math.PI / 2;
	car.add(wheel1);

	wheel2.position.y -= 5;
	wheel2.position.z -= 6;
	wheel2.position.x += 5;
	wheel2.rotation.x = -Math.PI / 2;
	car.add(wheel2);

	wheel3.position.y -= 5;
	wheel3.position.z += 6;
	wheel3.position.x -= 5;
	wheel3.rotation.x = -Math.PI / 2;
	car.add(wheel3);

	wheel4.position.y -= 5;
	wheel4.position.z += 6;
	wheel4.position.x += 5;
	wheel4.rotation.x =...