model

by Leoooo

HTML

<div id="info">
	  <a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader + MTLLoader
	  <br>Model:
		<input type="text" id="readModel" value="shark">
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/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://rawgit.com/mrdoob/three.js/master/examples/js/loaders/DDSLoader.js"></script-->
	<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/loaders/MTLLoader.js"></script>
	<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/loaders/OBJLoader.js"></script>


	
<script>

CSS

body {
	  font-family: Monospace;
	  background-color: #000;
	  color: #fff;
	  margin: 0px;
	  overflow: hidden;
	}
	#info {
	  color: #fff;
	  position: absolute;
	  top: 10px;
	  width: 100%;
	  text-align: center;
	  z-index: 100;
	  display: block;
	}

JavaScript

var camera, scene, renderer;
var theObject;
var mouseX = 0,
  mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var controls;
var bs;
var modelName;
var theModel;
$('#readModel').change( function() {
	modelName = $(this).val();
	console.log ('model: ' + modelName)
    scene.remove ( scene.getObjectByName ('OBJ') )
	readModel (modelName);
  	   
});
init();
animate();
function init() {
  container = document.createElement('div');
  document.body.appendChild(container);
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);
  renderer.setClearColor (0x888888);
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 2000);
  camera.position.z = 100;
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  // scene
  scene = new THREE.Scene();
  var ambient = new THREE.AmbientLight(0x444444);
  scene.add(ambient);
	
  gridxz = new THREE.GridHelper (200, 20,'red','white');
  scene.add (gridxz);
	
  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(0, 0, 1).normalize();
  scene.add(directionalLight);
  var pointLight = new THREE.PointLight (0xffffff);
  pointLight.position.set (100,200,-100);
  scene.add (pointLight);
	
  window.addEventListener('resize', onWindowResize, false);
 
  ///////////////////////////////////////////////////////////////////	
	function onWindowResize() 
    {
	  windowHalfX = window.innerWidth / 2;
	  windowHalfY = window.innerHeight / 2;
	  camera.aspect = window.innerWidth / window.innerHeight;
	  camera.updateProjectionMatrix();
	  renderer.setSize(window.innerWidth, window.innerHeight);
	}
  
}
function readModel (elephant, targetSize=40) {
  var onProgress = function(xhr) {
    if (xhr.lengthComputable) {
      var percentComplete = xhr.loaded / xhr.total * 100;
     ...