JSON from Clara.io

load a scene

by yi hom

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>

CSS

body {
  overflow: hidden
}

JavaScript

var clock = new THREE.Clock();
var scene, renderer, camera;
var controls;
var toytrain;
var bumpMap;
var angle = 0, turn = true;

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, 1, 10000);
	camera.position.y = 48;
	camera.position.z = 120;
	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);

////////////////////////////////////////////////////////////////////
	// load the clara.io toytrain
   THREE.ImageUtils.crossOrigin = '';  // no space between a pair of single quotes

	bumpMap = THREE.ImageUtils.loadTexture("https://jyunming-chen.github.io/tutsplus/images/wood_oak_002_bump.jpg");
	var loader = new THREE.ObjectLoader();
	loader.load("https://jyunming-chen.github.io/tutsplus/models/toy-train.json",function ( obj ) {
		obj.traverse (function (mesh)
			{
				if (mesh instanceof THREE.Mesh) {
					mesh.material.bumpMap = bumpMap;
					mesh.material.bumpScale = 0.2;
          // every mesh in this Object3D are rendered with bumpMap
				}
			});
		
		obj.scale.set (10,10,10);
    toytrain = obj;
		scene.add( obj );
	});

}

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

	if (toytrain !== undefined && turn) { 
		toytrain.position.set (50*Math.cos(angle),0,- 50*Math.sin(angle));
		toytrain.rotation.y = angle + Math.PI;
		angle += dt;
	}
	
 ...