OBJMTL loader

by Millieyan

HTML

<script src="https://threejs.org/build/three.min.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
	</script>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
	<!--script src="https://rawgit.com/mrdoob/three.js/master/examples/js/loaders/DDSLoader.js"></script-->
	<script src="https://raw.githack.com/mrdoob/three.js/dev/examples/js/loaders/MTLLoader.js"></script>
	<script src="https://raw.githack.com/mrdoob/three.js/dev/examples/js/loaders/OBJLoader.js"></script>

CSS

body {
  overflow: hidden
}

JavaScript

var clock = new THREE.Clock();
var scene, renderer, camera;
var controls;

var angle = 0;
var turn = 1;
var toycar;

init();
animate();

function init() {
  var width = window.innerWidth;
  var height = window.innerHeight;

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setClearColor(0x888888);
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera.position.y = 160;
  camera.position.z = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

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

  var gridXZ = new THREE.GridHelper(100, 10);
  gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  scene.add(gridXZ);

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

  var ambientLight = new THREE.AmbientLight(0x111111);
  scene.add(ambientLight);

  ///////////////////////////////////////////////
  var loader = new THREE.OBJMTLLoader();
  loader.load('https://jyunming-chen.github.io/tutsplus/models/toycar.obj', 'https://jyunming-chen.github.io/tutsplus/models/toycar.mtl',
    function(object) {
      toycar = object;
      scene.add(toycar);
    	toycar.scale.set(.5, .5, .5);
    });

}

function animate() {
  var dt = clock.getDelta();

  var x = 50 * Math.cos(angle);
  var z = 50 * Math.sin(angle);

  //if (turn) {  // this is error-prone
  if (toycar !== undefined && turn) {
    toycar.position.set(x, 0, z);
    toycar.rotation.y = -(angle + Math.PI);
    angle -= dt;
  }

  controls.update();

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}