initial commit

98f15eac · 王进波 · 98f15eac · 98f15eac · 98f15eac · 98f15eac
Commit 98f15eac authored Dec 20, 2018 by 王进波
125 changed files
--- a/ch01/index.html
+++ b/ch01/index.html
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <title>Example 01.06 - Screen size change</title>
+    <script type="text/javascript" src="../libs/three.js"></script>
+    <script type="text/javascript" src="../libs/stats.js"></script>
+    <script type="text/javascript" src="../libs/dat.gui.js"></script>
+    <style>
+        body {
+            /* set margin to 0 and overflow to hidden, to go fullscreen */
+            margin: 0;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+
+<div id="Stats-output">
+</div>
+<!-- Div which will hold the Output -->
+<div id="WebGL-output">
+</div>
+
+<!-- Javascript code that runs our Three.js examples -->
+<script type="text/javascript">
+
+    var camera;
+    var scene;
+    var renderer;
+
+    // once everything is loaded, we run our Three.js stuff.
+    function init() {
+
+        var stats = initStats();
+
+        // create a scene, that will hold all our elements such as objects, cameras and lights.
+        scene = new THREE.Scene();
+
+        // create a camera, which defines where we're looking at.
+        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+        // create a render and set the size
+        renderer = new THREE.WebGLRenderer();
+
+        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMapEnabled = true;
+
+        // create the ground plane
+        var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
+        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
+        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
+        plane.receiveShadow = true;
+
+        // rotate and position the plane
+        plane.rotation.x = -0.5 * Math.PI;
+        plane.position.x = 15;
+        plane.position.y = 0;
+        plane.position.z = 0;
+
+        // add the plane to the scene
+        scene.add(plane);
+
+        // create a cube
+        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
+        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
+        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+        cube.castShadow = true;
+
+        // position the cube
+        cube.position.x = -4;
+        cube.position.y = 3;
+        cube.position.z = 0;
+
+        // add the cube to the scene
+        scene.add(cube);
+
+        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
+        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
+        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
+
+        // position the sphere
+        sphere.position.x = 20;
+        sphere.position.y = 0;
+        sphere.position.z = 2;
+        sphere.castShadow = true;
+
+        // add the sphere to the scene
+        scene.add(sphere);
+
+        // position and point the camera to the center of the scene
+        camera.position.x = -30;
+        camera.position.y = 40;
+        camera.position.z = 30;
+        camera.lookAt(scene.position);
+
+        // add subtle ambient lighting
+        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
+        scene.add(ambientLight);
+
+        // add spotlight for the shadows
+        var spotLight = new THREE.SpotLight(0xffffff);
+        spotLight.position.set(-40, 60, -10);
+        spotLight.castShadow = true;
+        scene.add(spotLight);
+
+        // add the output of the renderer to the html element
+        document.getElementById("WebGL-output").appendChild(renderer.domElement);
+
+        // call the render function
+        var step = 0;
+
+        var controls = new function () {
+            this.rotationSpeed = 0.02;
+            this.bouncingSpeed = 0.03;
+        };
+
+        var gui = new dat.GUI();
+        gui.add(controls, 'rotationSpeed', 0, 0.5);
+        gui.add(controls, 'bouncingSpeed', 0, 0.5);
+
+        render();
+
+        function render() {
+            stats.update();
+            // rotate the cube around its axes
+            cube.rotation.x += controls.rotationSpeed;
+            cube.rotation.y += controls.rotationSpeed;
+            cube.rotation.z += controls.rotationSpeed;
+
+            // bounce the sphere up and down
+            step += controls.bouncingSpeed;
+            sphere.position.x = 20 + ( 10 * (Math.cos(step)));
+            sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
+
+            // render using requestAnimationFrame
+            requestAnimationFrame(render);
+            renderer.render(scene, camera);
+        }
+
+        function initStats() {
+
+            var stats = new Stats();
+
+            stats.setMode(0); // 0: fps, 1: ms
+
+            // Align top-left
+            stats.domElement.style.position = 'absolute';
+            stats.domElement.style.left = '0px';
+            stats.domElement.style.top = '0px';
+
+            document.getElementById("Stats-output").appendChild(stats.domElement);
+
+            return stats;
+        }
+    }
+    function onResize() {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
+
+    window.onload = init;
+
+    // listen to the resize events
+    window.addEventListener('resize', onResize, false);
+
+</script>
+</body>
+</html>
\ No newline at end of file
--- a/libs/AWDLoader.js
+++ b/libs/AWDLoader.js
--- a/libs/AsciiEffect.js
+++ b/libs/AsciiEffect.js
+/*
+ * @author zz85 / https://github.com/zz85
+ *
+ * Ascii generation is based on http://www.nihilogic.dk/labs/jsascii/
+ * Maybe more about this later with a blog post at http://lab4games.net/zz85/blog
+ *
+ * 16 April 2012 - @blurspline
+ */
+
+THREE.AsciiEffect = function ( renderer, charSet, options ) {
+
+    // its fun to create one your own!
+
+    charSet = ( charSet === undefined ) ? ' .:-=+*#%@' : charSet;
+
+    // ' .,:;=|iI+hHOE#`$';
+    // darker bolder character set from https://github.com/saw/Canvas-ASCII-Art/
+    // ' .\'`^",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$'.split('');
+
+    if ( !options ) options = {};
+
+    // Some ASCII settings
+
+    var bResolution = !options['resolution'] ? 0.15 : options['resolution']; // Higher for more details
+    var iScale = !options['scale'] ? 1 : options['scale'];
+    var bColor = !options['color'] ? false : options['color']; // nice but slows down rendering!
+    var bAlpha = !options['alpha'] ? false : options['alpha']; // Transparency
+    var bBlock = !options['block'] ? false : options['block']; // blocked characters. like good O dos
+    var bInvert = !options['invert'] ? false : options['invert']; // black is white, white is black
+
+    var strResolution = 'low';
+
+    var width, height;
+
+    var domElement = document.createElement('div');
+    domElement.style.cursor = 'default';
+
+    var oAscii = document.createElement("table");
+    domElement.appendChild( oAscii );
+
+    var iWidth, iHeight;
+    var oImg;
+
+    this.setSize = function ( w, h ) {
+
+        width = w;
+        height = h;
+
+        renderer.setSize( w, h );
+
+        initAsciiSize();
+
+    };
+
+
+    this.render = function ( scene, camera ) {
+
+        renderer.render( scene, camera );
+        asciifyImage( renderer, oAscii );
+
+    };
+
+    this.domElement = domElement;
+
+
+    // Throw in ascii library from http://www.nihilogic.dk/labs/jsascii/jsascii.js
+
+    /*
+     * jsAscii 0.1
+     * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
+     * MIT License [http://www.nihilogic.dk/licenses/mit-license.txt]
+     */
+
+    function initAsciiSize() {
+
+        iWidth = Math.round( width * fResolution );
+        iHeight = Math.round( height * fResolution );
+
+        oCanvas.width = iWidth;
+        oCanvas.height = iHeight;
+        // oCanvas.style.display = "none";
+        // oCanvas.style.width = iWidth;
+        // oCanvas.style.height = iHeight;
+
+        oImg = renderer.domElement;
+
+        if ( oImg.style.backgroundColor ) {
+
+            oAscii.rows[0].cells[0].style.backgroundColor = oImg.style.backgroundColor;
+            oAscii.rows[0].cells[0].style.color = oImg.style.color;
+
+        }
+
+        oAscii.cellSpacing = 0;
+        oAscii.cellPadding = 0;
+
+        var oStyle = oAscii.style;
+        oStyle.display = "inline";
+        oStyle.width = Math.round(iWidth/fResolution*iScale) + "px";
+        oStyle.height = Math.round(iHeight/fResolution*iScale) + "px";
+        oStyle.whiteSpace = "pre";
+        oStyle.margin = "0px";
+        oStyle.padding = "0px";
+        oStyle.letterSpacing = fLetterSpacing + "px";
+        oStyle.fontFamily = strFont;
+        oStyle.fontSize = fFontSize + "px";
+        oStyle.lineHeight = fLineHeight + "px";
+        oStyle.textAlign = "left";
+        oStyle.textDecoration = "none";
+    }
+
+
+    var aDefaultCharList = (" .,:;i1tfLCG08@").split("");
+    var aDefaultColorCharList = (" CGO08@").split("");
+    var strFont = "courier new, monospace";
+
+    var oCanvasImg = renderer.domElement;
+
+    var oCanvas = document.createElement("canvas");
+    if (!oCanvas.getContext) {
+        return;
+    }
+
+    var oCtx = oCanvas.getContext("2d");
+    if (!oCtx.getImageData) {
+        return;
+    }
+
+    var aCharList = (bColor ? aDefaultColorCharList : aDefaultCharList);
+
+    if (charSet) aCharList = charSet;
+
+    var fResolution = 0.5;
+
+    switch ( strResolution ) {
+
+        case "low" : 	fResolution = 0.25; break;
+        case "medium" : fResolution = 0.5; break;
+        case "high" : 	fResolution = 1; break;
+
+    }
+
+    if ( bResolution ) fResolution = bResolution;
+
+    // Setup dom
+
+    var fFontSize = (2/fResolution)*iScale;
+    var fLineHeight = (2/fResolution)*iScale;
+
+    // adjust letter-spacing for all combinations of scale and resolution to get it to fit the image width.
+
+    var fLetterSpacing = 0;
+
+    if ( strResolution == "low" ) {
+
+        switch (iScale) {
+            case 1 : fLetterSpacing = -1; break;
+            case 2 :
+            case 3 : fLetterSpacing = -2.1; break;
+            case 4 : fLetterSpacing = -3.1; break;
+            case 5 : fLetterSpacing = -4.15; break;
+        }
+
+    }
+
+    if ( strResolution == "medium" ) {
+
+        switch (iScale) {
+            case 1 : fLetterSpacing = 0; break;
+            case 2 : fLetterSpacing = -1; break;
+            case 3 : fLetterSpacing = -1.04; break;
+            case 4 :
+            case 5 : fLetterSpacing = -2.1; break;
+        }
+
+    }
+
+    if ( strResolution == "high" ) {
+
+        switch (iScale) {
+            case 1 :
+            case 2 : fLetterSpacing = 0; break;
+            case 3 :
+            case 4 :
+            case 5 : fLetterSpacing = -1; break;
+        }
+
+    }
+
+
+    // can't get a span or div to flow like an img element, but a table works?
+
+
+    // convert img element to ascii
+
+    function asciifyImage( canvasRenderer, oAscii ) {
+
+        oCtx.clearRect( 0, 0, iWidth, iHeight );
+        oCtx.drawImage( oCanvasImg, 0, 0, iWidth, iHeight );
+        var oImgData = oCtx.getImageData(0, 0, iWidth, iHeight).data;
+
+        // Coloring loop starts now
+        var strChars = "";
+
+        // console.time('rendering');
+
+        for (var y=0;y<iHeight;y+=2) {
+            for (var x=0;x<iWidth;x++) {
+                var iOffset = (y*iWidth + x) * 4;
+
+                var iRed = oImgData[iOffset];
+                var iGreen = oImgData[iOffset + 1];
+                var iBlue = oImgData[iOffset + 2];
+                var iAlpha = oImgData[iOffset + 3];
+                var iCharIdx;
+
+                var fBrightness;
+
+                fBrightness = (0.3*iRed + 0.59*iGreen + 0.11*iBlue) / 255;
+                // fBrightness = (0.3*iRed + 0.5*iGreen + 0.3*iBlue) / 255;
+
+                if (iAlpha == 0) {
+                    // should calculate alpha instead, but quick hack :)
+                    //fBrightness *= (iAlpha / 255);
+                    fBrightness = 1;
+
+                }
+
+                iCharIdx = Math.floor((1-fBrightness) * (aCharList.length-1));
+
+                if (bInvert) {
+                    iCharIdx = aCharList.length - iCharIdx - 1;
+                }
+
+                // good for debugging
+                //fBrightness = Math.floor(fBrightness * 10);
+                //strThisChar = fBrightness;
+
+                var strThisChar = aCharList[iCharIdx];
+
+                if (strThisChar===undefined || strThisChar == " ")
+                    strThisChar = "&nbsp;";
+
+                if (bColor) {
+                    strChars += "<span style='"
+                        + "color:rgb("+iRed+","+iGreen+","+iBlue+");"
+                        + (bBlock ? "background-color:rgb("+iRed+","+iGreen+","+iBlue+");" : "")
+                        + (bAlpha ? "opacity:" + (iAlpha/255) + ";" : "")
+                        + "'>" + strThisChar + "</span>";
+                } else {
+                    strChars += strThisChar;
+                }
+            }
+            strChars += "<br/>";
+        }
+
+        oAscii.innerHTML = "<tr><td>" + strChars + "</td></tr>";
+
+        // console.timeEnd('rendering');
+
+        // return oAscii;
+    }
+
+    // end modified asciifyImage block
+
+};
--- a/libs/AssimpJSONLoader.js
+++ b/libs/AssimpJSONLoader.js
+/**
+ * @author Alexander Gessler / http://www.greentoken.de/
+ * https://github.com/acgessler
+ *
+ * Loader for models imported with Open Asset Import Library (http://assimp.sf.net)
+ * through assimp2json (https://github.com/acgessler/assimp2json).
+ *
+ * Supports any input format that assimp supports, including 3ds, obj, dae, blend,
+ * fbx, x, ms3d, lwo (and many more).
+ *
+ * See webgl_loader_assimp2json example.
+ */
+
+THREE.AssimpJSONLoader = function ( manager ) {
+
+	this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
+};
+
+THREE.AssimpJSONLoader.prototype = {
+
+	constructor: THREE.AssimpJSONLoader,
+
+	texturePath : '',
+
+	load: function ( url, onLoad, onProgress, onError, texturePath ) {
+
+		var scope = this;
+
+		this.texturePath = texturePath && ( typeof texturePath === "string" ) ? texturePath : this.extractUrlBase( url );
+
+		var loader = new THREE.XHRLoader( this.manager );
+		loader.setCrossOrigin( this.crossOrigin );
+		loader.load( url, function ( text ) {
+			var json = JSON.parse( text ), scene, metadata;
+
+			// Check __metadata__ meta header if present
+			// This header is used to disambiguate between
+			// different JSON-based file formats.
+			metadata = json.__metadata__;
+			if ( typeof metadata !== 'undefined' )
+			{
+				// Check if assimp2json at all
+				if ( metadata.format !== 'assimp2json' ) {
+					onError('Not an assimp2json scene');
+					return;
+				}
+				// Check major format version
+				else if ( metadata.version < 100 && metadata.version >= 200 ) {
+					onError('Unsupported assimp2json file format version');
+					return;
+				}
+			}
+
+			scene = scope.parse( json );
+			onLoad( scene );
+		}, onProgress, onError );
+	},
+
+	setCrossOrigin: function ( value ) {
+		this.crossOrigin = value;
+	},
+
+	extractUrlBase: function ( url ) { // from three/src/loaders/Loader.js
+		var parts = url.split( '/' );
+		parts.pop();
+		return ( parts.length < 1 ? '.' : parts.join( '/' ) ) + '/';
+	},
+
+	parse: function ( json ) {
+		var meshes = this.parseList ( json.meshes, this.parseMesh );
+		var materials = this.parseList ( json.materials, this.parseMaterial );
+		return this.parseObject( json, json.rootnode, meshes, materials );
+	},
+
+	parseList : function(json, handler) {
+		var meshes = new Array(json.length);
+		for(var i = 0; i < json.length; ++i) {
+			meshes[i] = handler.call(this, json[i]);
+		}
+		return meshes;
+	},
+
+	parseMesh : function(json) {
+		var vertex, geometry, i, e, in_data, src;
+
+
+		geometry = new THREE.Geometry();
+
+		// read vertex positions
+		for(in_data = json.vertices, i = 0, e = in_data.length; i < e; ) {
+			geometry.vertices.push( new THREE.Vector3( in_data[ i++ ], in_data[ i++ ], in_data[ i++ ] ) );
+		}
+
+		// read faces
+		var cnt = 0;
+		for(in_data = json.faces, i = 0, e = in_data.length; i < e; ++i) {
+			face = new THREE.Face3();
+			src = in_data[i];
+			face.a = src[0];
+			face.b = src[1];
+			face.c = src[2];
+
+			face.materialIndex = 0; //json.materialindex;
+			geometry.faces.push(face);
+		}
+
+		// read texture coordinates - three.js attaches them to its faces
+		json.texturecoords = json.texturecoords || [];
+		for(i = 0, e = json.texturecoords.length; i < e; ++i) {
+
+			function convertTextureCoords(in_uv, out_faces, out_vertex_uvs) {
+				var i, e, face, a, b, c;
+
+				for(i = 0, e = out_faces.length; i < e; ++i) {
+					face = out_faces[i];
+					a = face.a * 2;
+					b = face.b * 2;
+					c = face.c * 2;
+					out_vertex_uvs.push([
+						new THREE.Vector2( in_uv[ a ], in_uv[ a + 1 ] ),
+						new THREE.Vector2( in_uv[ b ], in_uv[ b + 1 ] ),
+						new THREE.Vector2( in_uv[ c ], in_uv[ c + 1 ] )
+					]);
+				}
+			}
+
+			convertTextureCoords(json.texturecoords[i], geometry.faces, geometry.faceVertexUvs[i]);
+		}
+
+		// read normals - three.js also attaches them to its faces
+		if(json.normals) {
+
+			function convertNormals(in_nor, out_faces) {
+				var i, e, face, a, b, c;
+
+				for(i = 0, e = out_faces.length; i < e; ++i) {
+					face = out_faces[i];
+					a = face.a * 3;
+					b = face.b * 3;
+					c = face.c * 3;
+					face.vertexNormals = [
+						new THREE.Vector3( in_nor[ a ], in_nor[ a + 1 ], in_nor[ a + 2 ] ),
+						new THREE.Vector3( in_nor[ b ], in_nor[ b + 1 ], in_nor[ b + 2 ] ),
+						new THREE.Vector3( in_nor[ c ], in_nor[ c + 1 ], in_nor[ c + 2 ] )
+					];
+				}
+			}
+
+			convertNormals(json.normals, geometry.faces);
+		}
+
+		// read vertex colors - three.js also attaches them to its faces
+		if(json.colors && json.colors[0]) {
+
+			function convertColors(in_color, out_faces) {
+				var i, e, face, a, b, c;
+
+				function makeColor(start) {
+					var col = new THREE.Color( );
+					col.setRGB( arr[0], arr[1], arr[2] );
+					// TODO: what about alpha?
+					return col;
+				}
+
+				for(i = 0, e = out_faces.length; i < e; ++i) {
+					face = out_faces[i];
+					a = face.a * 4;
+					b = face.b * 4;
+					c = face.c * 4;
+					face.vertexColors = [
+						makeColor( a ),
+						makeColor( b ),
+						makeColor( c )
+					];
+				}
+			}
+
+			convertColors(json.colors[0], geometry.faces);
+		}
+
+
+		//geometry.computeFaceNormals();
+		//geometry.computeVertexNormals();
+		//geometry.computeTangents();
+		geometry.computeBoundingSphere();
+
+		// TODO: tangents
+		return geometry;
+	},
+
+	parseMaterial : function(json) {
+		var mat = null, 
+		scope = this, i, prop, has_textures = [],
+
+		init_props = {
+			shading : THREE.SmoothShading
+		};
+
+		function toColor(value_arr) {
+			var col = new THREE.Color();
+			col.setRGB(value_arr[0],value_arr[1],value_arr[2]);
+			return col;
+		}
+
+		function defaultTexture() {
+			var im = new Image();
+			im.width = 1;
+			im.height = 1;
+			return new THREE.Texture(im);
+		}
+
+		for (var i in json.properties) {
+			prop = json.properties[i];
+
+			if(prop.key === '$tex.file') {
+				// prop.semantic gives the type of the texture
+				// 1: diffuse
+				// 2: specular mao
+				// 5: height map (bumps)
+				// 6: normal map
+				// more values (i.e. emissive, environment) are known by assimp and may be relevant
+				if(prop.semantic === 1 || prop.semantic === 5 || prop.semantic === 6 || prop.semantic === 2) {
+					(function(semantic) {
+						var loader = new THREE.TextureLoader(scope.manager),
+						keyname;
+
+						if(semantic === 1) {
+							keyname = 'map';
+						}
+						else if(semantic === 5) {
+							keyname = 'bumpMap';
+						}
+						else if(semantic === 6) {
+							keyname = 'normalMap';
+						}
+						else if(semantic === 2) {
+							keyname = 'specularMap';
+						}
+
+						has_textures.push(keyname);
+
+						loader.setCrossOrigin(this.crossOrigin);
+						var material_url = scope.texturePath + '/' + prop.value
+						material_url = material_url.replace(/\\/g, '/');
+						loader.load(material_url, function(tex) {
+							if(tex) {
+								// TODO: read texture settings from assimp.
+								// Wrapping is the default, though.
+								tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+
+								mat[keyname] = tex;
+								mat.needsUpdate = true;
+							}
+						});
+					})(prop.semantic);
+				}
+			}
+			else if(prop.key === '?mat.name') {
+				init_props.name = prop.value;
+			}
+			else if(prop.key === '$clr.diffuse') {
+				init_props.color = toColor(prop.value);
+			}
+			else if(prop.key === '$clr.specular') {
+				init_props.specular = toColor(prop.value);
+			}
+			else if(prop.key === '$clr.ambient') {
+				init_props.ambient = toColor(prop.value);
+			}
+			else if(prop.key === '$clr.emissive') {
+				init_props.emissive = toColor(prop.value);
+			}
+			else if(prop.key === '$mat.shadingm') {
+				// aiShadingMode_Flat
+				if (prop.value === 1) {
+					init_props.shading = THREE.FlatShading;
+				}
+			}
+			else if (prop.key === '$mat.shininess') {
+				init_props.shininess = prop.value;
+			}
+		}
+
+		if(!init_props.ambient) {
+			init_props.ambient = init_props.color;
+		}
+
+		// note: three.js does not like it when a texture is added after the geometry
+		// has been rendered once, see http://stackoverflow.com/questions/16531759/.
+		// for this reason we fill all slots upfront with default textures
+		if(has_textures.length) {
+			for(i = has_textures.length-1; i >= 0; --i) {
+				init_props[has_textures[i]] = defaultTexture();
+			}
+		}
+		
+		mat = new THREE.MeshPhongMaterial( init_props );
+		return mat;
+	},
+
+	parseObject : function(json, node, meshes, materials) {
+		var obj = new THREE.Object3D()
+		,	i
+		,	idx
+		;
+
+		obj.name = node.name || "";
+		obj.matrix = new THREE.Matrix4().fromArray(node.transformation).transpose();
+		obj.matrix.decompose( obj.position, obj.quaternion, obj.scale );
+
+		for(i = 0; node.meshes && i < node.meshes.length; ++i) {
+			idx = node.meshes[i];
+			obj.add(new THREE.Mesh( meshes[idx], materials[json.meshes[idx].materialindex] ));
+		}
+
+		for(i = 0; node.children && i < node.children.length; ++i) {
+			obj.add(this.parseObject(json, node.children[i], meshes, materials));
+		}
+
+		return obj;
+	},
+};
+
+
--- a/libs/BabylonLoader.js
+++ b/libs/BabylonLoader.js
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.BabylonLoader = function ( manager ) {
+
+	this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
+
+};
+
+THREE.BabylonLoader.prototype = {
+
+	constructor: THREE.ObjectLoader,
+
+	load: function ( url, onLoad, onProgress, onError ) {
+
+		var scope = this;
+
+		var loader = new THREE.XHRLoader( scope.manager );
+		loader.setCrossOrigin( this.crossOrigin );
+		loader.load( url, function ( text ) {
+
+			onLoad( scope.parse( JSON.parse( text ) ) );
+
+		}, onProgress, onError );
+
+	},
+
+	setCrossOrigin: function ( value ) {
+
+		this.crossOrigin = value;
+
+	},
+
+	parse: function ( json ) {
+
+		var materials = this.parseMaterials( json );
+		var scene = this.parseObjects( json, materials );
+
+		return scene;
+
+	},
+
+	parseMaterials: function ( json ) {
+
+		var materials = {};
+
+		for ( var i = 0, l = json.materials.length; i < l; i ++ ) {
+
+			var data = json.materials[ i ];
+
+			var material = new THREE.MeshPhongMaterial();
+			material.name = data.name;
+			material.ambient.fromArray( data.ambient );
+			material.color.fromArray( data.diffuse );
+			material.emissive.fromArray( data.emissive );
+			material.specular.fromArray( data.specular );
+			material.shininess = data.specularPower;
+			material.opacity = data.alpha;
+
+			materials[ data.id ] = material;
+
+		}
+
+		if ( json.multiMaterials ) {
+
+			for ( var i = 0, l = json.multiMaterials.length; i < l; i ++ ) {
+
+				var data = json.multiMaterials[ i ];
+
+				console.warn( 'THREE.BabylonLoader: Multi materials not yet supported.' );
+
+				materials[ data.id ] = new THREE.MeshPhongMaterial();
+
+			}
+
+		}
+
+		return materials;
+
+	},
+
+	parseGeometry: function ( json ) {
+
+		var geometry = new THREE.BufferGeometry();
+
+		// indices
+
+		var indices = new Uint16Array( json.indices );
+
+		geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+
+		// positions
+
+		var positions = new Float32Array( json.positions );
+
+		for ( var j = 2, jl = positions.length; j < jl; j += 3 ) {
+
+			positions[ j ] = - positions[ j ];
+
+		}
+
+		geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+
+		// normals
+
+		if ( json.normals ) {
+
+			var normals = new Float32Array( json.normals );
+
+			for ( var j = 2, jl = normals.length; j < jl; j += 3 ) {
+
+				normals[ j ] = - normals[ j ];
+
+			}
+
+			geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
+
+		}
+
+		// uvs
+
+		if ( json.uvs ) {
+
+			var uvs = new Float32Array( json.uvs );
+
+			geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
+
+		}
+
+		// offsets
+
+		var subMeshes = json.subMeshes;
+
+		if ( subMeshes ) {
+
+			for ( var j = 0, jl = subMeshes.length; j < jl; j ++ ) {
+
+				var subMesh = subMeshes[ j ];
+
+				geometry.addDrawCall( subMesh.indexStart, subMesh.indexCount );
+
+			}
+
+		} else {
+
+			geometry.addDrawCall( 0, json.indices.length );
+
+		}
+
+		return geometry;
+
+	},
+
+	parseObjects: function ( json, materials ) {
+
+		var objects = {};
+		var scene = new THREE.Scene();
+
+		var cameras = json.cameras;
+
+		for ( var i = 0, l = cameras.length; i < l; i ++ ) {
+
+			var data = cameras[ i ];
+
+			var camera = new THREE.PerspectiveCamera( ( data.fov / Math.PI ) * 180, 1.33, data.minZ, data.maxZ );
+
+			camera.name = data.name;
+			camera.position.fromArray( data.position );
+			if ( data.rotation ) camera.rotation.fromArray( data.rotation );
+
+			objects[ data.id ] = camera;
+
+		}
+
+		var lights = json.lights;
+
+		for ( var i = 0, l = lights.length; i < l; i ++ ) {
+
+			var data = lights[ i ];
+
+			var light;
+
+			switch ( data.type ) {
+
+				case 0:
+					light = new THREE.PointLight();
+					break;
+
+				case 1:
+					light = new THREE.DirectionalLight();
+					break;
+
+				case 2:
+					light = new THREE.SpotLight();
+					break;
+
+				case 3:
+					light = new THREE.HemisphereLight();
+					break;
+			}
+
+			light.name = data.name;
+			light.position.set( data.position[ 0 ], data.position[ 1 ], - data.position[ 2 ] );
+			light.color.fromArray( data.diffuse );
+			if ( data.intensity ) light.intensity = data.intensity;
+
+			objects[ data.id ] = light;
+
+			scene.add( light );
+
+		}
+
+		var meshes = json.meshes;
+
+		for ( var i = 0, l = meshes.length; i < l; i ++ ) {
+
+			var data = meshes[ i ];
+
+			var object;
+
+			if ( data.indices ) {
+
+				var geometry = this.parseGeometry( data );
+
+				object = new THREE.Mesh( geometry, materials[ data.materialId ] );
+
+			} else {
+
+				object = new THREE.Group();
+
+			}
+
+			object.name = data.name;
+			object.position.set( data.position[ 0 ], data.position[ 1 ], - data.position[ 2 ] );
+			object.rotation.fromArray( data.rotation );
+			if ( data.rotationQuaternion ) object.quaternion.fromArray( data.rotationQuaternion );
+			object.scale.fromArray( data.scaling );
+			// object.visible = data.isVisible;
+
+			if ( data.parentId ) {
+
+				objects[ data.parentId ].add( object );
+
+			} else {
+
+				scene.add( object );
+
+			}
+
+			objects[ data.id ] = object;
+
+		}
+
+		return scene;
+
+	}
+
+};
--- a/libs/CTMLoader.js
+++ b/libs/CTMLoader.js
--- a/libs/CTMWorker.js
+++ b/libs/CTMWorker.js
+
+self.onmessage = function( event ) {
+
+    var files = [];
+
+    for ( var i = 0; i < event.data.offsets.length; i ++ ) {
+
+        var stream = new CTM.Stream( event.data.data );
+        stream.offset = event.data.offsets[ i ];
+
+        files[ i ] = new CTM.File( stream );
+
+    }
+
+    self.postMessage( files );
+    self.close();
+
+}
\ No newline at end of file
--- a/libs/CanvasRenderer.js
+++ b/libs/CanvasRenderer.js
--- a/libs/CanvasRenderer.js.1
+++ b/libs/CanvasRenderer.js.1
--- a/libs/ColladaLoader.js
+++ b/libs/ColladaLoader.js
--- a/libs/ConvexGeometry.js
+++ b/libs/ConvexGeometry.js
--- a/libs/CopyShader.js
+++ b/libs/CopyShader.js
--- a/libs/DDSLoader.js
+++ b/libs/DDSLoader.js
--- a/libs/EffectComposer.js
+++ b/libs/EffectComposer.js
--- a/libs/FXAAShader.js
+++ b/libs/FXAAShader.js
--- a/libs/FirstPersonControls.js
+++ b/libs/FirstPersonControls.js
--- a/libs/FlyControls.js
+++ b/libs/FlyControls.js
--- a/libs/GeometryExporter.js
+++ b/libs/GeometryExporter.js
--- a/libs/JSONLoader.js
+++ b/libs/JSONLoader.js
--- a/libs/JSONLoader_old.js
+++ b/libs/JSONLoader_old.js
--- a/libs/MD2Character.js
+++ b/libs/MD2Character.js
--- a/libs/MTLLoader.js
+++ b/libs/MTLLoader.js
--- a/libs/MaskPass.js
+++ b/libs/MaskPass.js
--- a/libs/OBJLoader.js
+++ b/libs/OBJLoader.js
--- a/libs/OBJMTLLoader.js
+++ b/libs/OBJMTLLoader.js
--- a/libs/OrbitControls.js
+++ b/libs/OrbitControls.js
--- a/libs/PDBLoader.js
+++ b/libs/PDBLoader.js
--- a/libs/PLYLoader.js
+++ b/libs/PLYLoader.js
--- a/libs/PVRLoader.js
+++ b/libs/PVRLoader.js
--- a/libs/ParametricGeometries.js
+++ b/libs/ParametricGeometries.js
--- a/libs/Projector.js
+++ b/libs/Projector.js
--- a/libs/RaytracingRenderer.js
+++ b/libs/RaytracingRenderer.js
--- a/libs/RenderPass.js
+++ b/libs/RenderPass.js
--- a/libs/RollControls.js
+++ b/libs/RollControls.js
--- a/libs/STLLoader.js
+++ b/libs/STLLoader.js
--- a/libs/SceneExporter.js
+++ b/libs/SceneExporter.js
--- a/libs/SceneLoader.js
+++ b/libs/SceneLoader.js
--- a/libs/ShaderDeferred.js
+++ b/libs/ShaderDeferred.js
--- a/libs/ShaderPass.js
+++ b/libs/ShaderPass.js
--- a/libs/TGALoader.js
+++ b/libs/TGALoader.js
--- a/libs/ThreeBSP.coffee
+++ b/libs/ThreeBSP.coffee
--- a/libs/ThreeBSP.js
+++ b/libs/ThreeBSP.js
--- a/libs/TrackballControls.js
+++ b/libs/TrackballControls.js
--- a/libs/VRMLLoader.js
+++ b/libs/VRMLLoader.js
--- a/libs/VTKLoader.js
+++ b/libs/VTKLoader.js
--- a/libs/WebGLDeferredRenderer.js
+++ b/libs/WebGLDeferredRenderer.js
--- a/libs/ammo.js
+++ b/libs/ammo.js
--- a/libs/chroma.js
+++ b/libs/chroma.js
--- a/libs/coffee-script.js
+++ b/libs/coffee-script.js
--- a/libs/ctm.js
+++ b/libs/ctm.js
--- a/libs/d3-threeD.js
+++ b/libs/d3-threeD.js
--- a/libs/dat.gui.js
+++ b/libs/dat.gui.js
--- a/libs/glTF-parser.js
+++ b/libs/glTF-parser.js
--- a/libs/glTFAnimation.js
+++ b/libs/glTFAnimation.js
--- a/libs/glTFLoader.js
+++ b/libs/glTFLoader.js
--- a/libs/glTFLoaderUtils.js
+++ b/libs/glTFLoaderUtils.js
--- a/libs/jquery-1.9.0.js
+++ b/libs/jquery-1.9.0.js
--- a/libs/literally/css/literally.css
+++ b/libs/literally/css/literally.css
--- a/libs/literally/img/alpha.png
+++ b/libs/literally/img/alpha.png
--- a/libs/literally/img/eraser.png
+++ b/libs/literally/img/eraser.png
--- a/libs/literally/img/eyedropper.png
+++ b/libs/literally/img/eyedropper.png
--- a/libs/literally/img/hue.png
+++ b/libs/literally/img/hue.png
--- a/libs/literally/img/line.png
+++ b/libs/literally/img/line.png
--- a/libs/literally/img/pan.png
+++ b/libs/literally/img/pan.png
--- a/libs/literally/img/pencil.png
+++ b/libs/literally/img/pencil.png
--- a/libs/literally/img/rectangle.png
+++ b/libs/literally/img/rectangle.png
--- a/libs/literally/img/saturation.png
+++ b/libs/literally/img/saturation.png
--- a/libs/literally/img/screenshot.png
+++ b/libs/literally/img/screenshot.png
--- a/libs/literally/jquery-1.8.2.js
+++ b/libs/literally/jquery-1.8.2.js
--- a/libs/literally/js/literallycanvas.js
+++ b/libs/literally/js/literallycanvas.js
--- a/libs/literally/js/literallycanvas.min.js
+++ b/libs/literally/js/literallycanvas.min.js
--- a/libs/literally/underscore-1.4.2.js
+++ b/libs/literally/underscore-1.4.2.js
--- a/libs/lzma.js
+++ b/libs/lzma.js
--- a/libs/perlin.js
+++ b/libs/perlin.js
--- a/libs/physi.js
+++ b/libs/physi.js
--- a/libs/physijs_worker.js
+++ b/libs/physijs_worker.js
--- a/libs/postprocessing/BloomPass.js
+++ b/libs/postprocessing/BloomPass.js
--- a/libs/postprocessing/DigitalGlitch.js
+++ b/libs/postprocessing/DigitalGlitch.js
--- a/libs/postprocessing/DotScreenPass.js
+++ b/libs/postprocessing/DotScreenPass.js
--- a/libs/postprocessing/EffectComposer.js
+++ b/libs/postprocessing/EffectComposer.js
--- a/libs/postprocessing/FilmPass.js
+++ b/libs/postprocessing/FilmPass.js
--- a/libs/postprocessing/GlitchPass.js
+++ b/libs/postprocessing/GlitchPass.js
--- a/libs/postprocessing/MaskPass.js
+++ b/libs/postprocessing/MaskPass.js
--- a/libs/postprocessing/RenderPass.js
+++ b/libs/postprocessing/RenderPass.js
--- a/libs/postprocessing/SavePass.js
+++ b/libs/postprocessing/SavePass.js
--- a/libs/postprocessing/ShaderPass.js
+++ b/libs/postprocessing/ShaderPass.js
--- a/libs/postprocessing/TexturePass.js
+++ b/libs/postprocessing/TexturePass.js
--- a/libs/shaders/BasicShader.js
+++ b/libs/shaders/BasicShader.js
--- a/libs/shaders/BleachBypassShader.js
+++ b/libs/shaders/BleachBypassShader.js
--- a/libs/shaders/BlendShader.js
+++ b/libs/shaders/BlendShader.js
--- a/libs/shaders/BokehShader.js
+++ b/libs/shaders/BokehShader.js
--- a/libs/shaders/BrightnessContrastShader.js
+++ b/libs/shaders/BrightnessContrastShader.js
--- a/libs/shaders/ColorCorrectionShader.js
+++ b/libs/shaders/ColorCorrectionShader.js
--- a/libs/shaders/ColorifyShader.js
+++ b/libs/shaders/ColorifyShader.js
--- a/libs/shaders/ConvolutionShader.js
+++ b/libs/shaders/ConvolutionShader.js
--- a/libs/shaders/CopyShader.js
+++ b/libs/shaders/CopyShader.js
--- a/libs/shaders/DOFMipMapShader.js
+++ b/libs/shaders/DOFMipMapShader.js
--- a/libs/shaders/DotScreenShader.js
+++ b/libs/shaders/DotScreenShader.js
--- a/libs/shaders/EdgeShader.js
+++ b/libs/shaders/EdgeShader.js
--- a/libs/shaders/EdgeShader2.js
+++ b/libs/shaders/EdgeShader2.js
--- a/libs/shaders/FXAAShader.js
+++ b/libs/shaders/FXAAShader.js
--- a/libs/shaders/FilmShader.js
+++ b/libs/shaders/FilmShader.js
--- a/libs/shaders/FocusShader.js
+++ b/libs/shaders/FocusShader.js
--- a/libs/shaders/FresnelShader.js
+++ b/libs/shaders/FresnelShader.js
--- a/libs/shaders/HorizontalBlurShader.js
+++ b/libs/shaders/HorizontalBlurShader.js
--- a/libs/shaders/HorizontalTiltShiftShader.js
+++ b/libs/shaders/HorizontalTiltShiftShader.js
--- a/libs/shaders/HueSaturationShader.js
+++ b/libs/shaders/HueSaturationShader.js
--- a/libs/shaders/KaleidoShader.js
+++ b/libs/shaders/KaleidoShader.js
--- a/libs/shaders/LuminosityShader.js
+++ b/libs/shaders/LuminosityShader.js
--- a/libs/shaders/MirrorShader.js
+++ b/libs/shaders/MirrorShader.js
--- a/libs/shaders/NormalMapShader.js
+++ b/libs/shaders/NormalMapShader.js
--- a/libs/shaders/RGBShiftShader.js
+++ b/libs/shaders/RGBShiftShader.js
--- a/libs/shaders/SSAOShader.js
+++ b/libs/shaders/SSAOShader.js
--- a/libs/shaders/SepiaShader.js
+++ b/libs/shaders/SepiaShader.js
--- a/libs/shaders/TechnicolorShader.js
+++ b/libs/shaders/TechnicolorShader.js
--- a/libs/shaders/TriangleBlurShader.js
+++ b/libs/shaders/TriangleBlurShader.js
--- a/libs/shaders/UnpackDepthRGBAShader.js
+++ b/libs/shaders/UnpackDepthRGBAShader.js
--- a/libs/shaders/VerticalBlurShader.js
+++ b/libs/shaders/VerticalBlurShader.js
--- a/libs/shaders/VerticalTiltShiftShader.js
+++ b/libs/shaders/VerticalTiltShiftShader.js
--- a/libs/shaders/VignetteShader.js
+++ b/libs/shaders/VignetteShader.js
--- a/libs/sketch.js
+++ b/libs/sketch.js
--- a/libs/spin.js
+++ b/libs/spin.js
--- a/libs/stats.js
+++ b/libs/stats.js
--- a/libs/three.js
+++ b/libs/three.js
--- a/libs/tween.min.js
+++ b/libs/tween.min.js