JSON Loader

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<div id="info">JSON Loader
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/OrbitControls.js"></script>

CSS

#info {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera;
var controls;
var jsonModel;

init();
animate();

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

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

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
  camera.position.set (0,32,80);
  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 jsonLoader = new THREE.JSONLoader();
  var url = "http://threejs.org/examples/obj/Suzanne.js";
  var url = "http://jyunming-chen.github.io/tutsplus/models/teapot.json";
  jsonLoader.load(url, function(geometry, materials) {
    var material = new THREE.MeshFaceMaterial(materials);
    jsonModel = new THREE.Mesh(geometry, material);
    jsonModel.scale.set(4, 4, 4);
    scene.add(jsonModel);

  });

}

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