Examples: Convert LeePerrySmith.json to glTF.

examples/webgl_decals.html

@@ -37,6 +37,7 @@
 		<script src="../build/three.js"></script>
 		<script src="js/geometries/DecalGeometry.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
 
@@ -239,19 +240,19 @@
 
 		function loadLeePerrySmith( callback ) {
 
-			var loader = new THREE.JSONLoader();
+			var loader = new THREE.GLTFLoader();
 
-			loader.load( 'models/json/leeperrysmith/LeePerrySmith.json', function( geometry ) {
+			loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function( gltf ) {
 
-				var material = new THREE.MeshPhongMaterial( {
+				mesh = gltf.scene.children[ 0 ];
+				mesh.material = new THREE.MeshPhongMaterial( {
 					specular: 0x111111,
-					map: textureLoader.load( 'models/json/leeperrysmith/Map-COL.jpg' ),
-					specularMap: textureLoader.load( 'models/json/leeperrysmith/Map-SPEC.jpg' ),
-					normalMap: textureLoader.load( 'models/json/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg' ),
+					map: textureLoader.load( 'models/gltf/LeePerrySmith/Map-COL.jpg' ),
+					specularMap: textureLoader.load( 'models/gltf/LeePerrySmith/Map-SPEC.jpg' ),
+					normalMap: textureLoader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' ),
 					shininess: 25
 				} );
 
-				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 				mesh.scale.set( 10, 10, 10 );
 

examples/webgl_helpers.html

@@ -16,6 +16,8 @@
 
 		<script src="../build/three.js"></script>
 
+		<script src="js/loaders/GLTFLoader.js"></script>
+
 		<script>
 
 			var scene, renderer;
@@ -55,10 +57,10 @@
 				polarGridHelper.position.x = 200;
 				scene.add( polarGridHelper );
 
-				var loader = new THREE.JSONLoader();
-				loader.load( 'models/json/leeperrysmith/LeePerrySmith.json', function ( geometry, materials ) {
+				var loader = new THREE.GLTFLoader();
+				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
-					var material = new THREE.MeshLambertMaterial();
+					var mesh = gltf.scene.children[ 0 ];
 
 					var group = new THREE.Group();
 					group.scale.multiplyScalar( 50 );
@@ -67,18 +69,18 @@
 					// To make sure that the matrixWorld is up to date for the boxhelpers
 					group.updateMatrixWorld(true);
 
-					var mesh = new THREE.Mesh( geometry, material );
 					group.add( mesh );
 
-					fnh = new THREE.FaceNormalsHelper( mesh, 5 );
-					scene.add( fnh );
+					// TODO: Implement BufferGeometry support in FaceNormalsHelper.
+					// fnh = new THREE.FaceNormalsHelper( mesh, 5 );
+					// scene.add( fnh );
 
 					vnh = new THREE.VertexNormalsHelper( mesh, 5 );
 					scene.add( vnh );
 
 					scene.add( new THREE.BoxHelper( mesh ) );
 
-					var wireframe = new THREE.WireframeGeometry( geometry );
+					var wireframe = new THREE.WireframeGeometry( mesh.geometry );
 					var line = new THREE.LineSegments( wireframe );
 					line.material.depthTest = false;
 					line.material.opacity = 0.25;
@@ -87,7 +89,7 @@
 					group.add( line );
 					scene.add( new THREE.BoxHelper( line ) );
 
-					var edges = new THREE.EdgesGeometry( geometry );
+					var edges = new THREE.EdgesGeometry( mesh.geometry );
 					var line = new THREE.LineSegments( edges );
 					line.material.depthTest = false;
 					line.material.opacity = 0.25;

examples/webgl_loader_ctm.html

@@ -181,9 +181,9 @@
 
 						specular: 0x303030,
 						shininess: 50,
-						map: textureLoader.load( "models/json/leeperrysmith/Map-COL.jpg" ),
-						specularMap: textureLoader.load( "models/json/leeperrysmith/Map-SPEC.jpg" ),
-						normalMap: textureLoader.load( "models/json/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
+						map: textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" ),
+						specularMap: textureLoader.load( "models/gltf/LeePerrySmith/Map-SPEC.jpg" ),
+						normalMap: textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
 						normalScale: new THREE.Vector2( 0.8, 0.8 )
 
 					} );

examples/webgl_materials_bumpmap.html

@@ -44,6 +44,7 @@
 		</div>
 
 		<script src="../build/three.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -110,7 +111,7 @@
 
 				//
 
-				var mapHeight = new THREE.TextureLoader().load( "models/json/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
+				var mapHeight = new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
 
 				var material = new THREE.MeshPhongMaterial( {
 					color: 0x552811,
@@ -120,8 +121,8 @@
 					bumpScale: 12
 				} );
 
-				loader = new THREE.JSONLoader();
-				loader.load( "models/json/leeperrysmith/LeePerrySmith.json", function( geometry ) { createScene( geometry, 100, material ) } );
+				loader = new THREE.GLTFLoader();
+				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) { createScene( gltf.scene.children[ 0 ].geometry, 100, material ) } );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );

examples/webgl_materials_bumpmap_skin.html

@@ -51,6 +51,8 @@
 		<script src="js/postprocessing/ShaderPass.js"></script>
 		<script src="js/postprocessing/MaskPass.js"></script>
 
+		<script src="js/loaders/GLTFLoader.js"></script>
+
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
@@ -125,10 +127,10 @@
 
 				//
 
-				loader = new THREE.JSONLoader();
-				loader.load( "models/json/leeperrysmith/LeePerrySmith.json", function ( geometry ) {
+				loader = new THREE.GLTFLoader();
+				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
-					createScene( geometry, 100 )
+					createScene( gltf.scene.children[ 0 ].geometry, 100 )
 
 				} );
 
@@ -187,19 +189,19 @@
 
 				var textureLoader = new THREE.TextureLoader();
 
-				var mapHeight = textureLoader.load( "models/json/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
+				var mapHeight = textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
 
 				mapHeight.anisotropy = 4;
 				mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
 				mapHeight.format = THREE.RGBFormat;
 
-				var mapSpecular = textureLoader.load( "models/json/leeperrysmith/Map-SPEC.jpg" );
+				var mapSpecular = textureLoader.load( "models/gltf/LeePerrySmith/Map-SPEC.jpg" );
 
 				mapSpecular.anisotropy = 4;
 				mapSpecular.wrapS = mapSpecular.wrapT = THREE.RepeatWrapping;
 				mapSpecular.format = THREE.RGBFormat;
 
-				var mapColor = textureLoader.load( "models/json/leeperrysmith/Map-COL.jpg" );
+				var mapColor = textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" );
 
 				mapColor.anisotropy = 4;
 				mapColor.wrapS = mapColor.wrapT = THREE.RepeatWrapping;

examples/webgl_materials_modified.html

@@ -45,6 +45,7 @@
 
 		<script src="../build/three.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -92,10 +93,10 @@
 
 				};
 
-				var loader = new THREE.JSONLoader();
-				loader.load( 'models/json/leeperrysmith/LeePerrySmith.json', function( geometry ) {
+				var loader = new THREE.GLTFLoader();
+				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function( gltf ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new THREE.Mesh( gltf.scene.children[ 0 ].geometry, material );
 					mesh.position.y = - 50;
 					mesh.scale.setScalar( 100 );
 					scene.add( mesh );

examples/webgl_materials_normalmap.html

@@ -53,6 +53,7 @@
 		</div>
 
 		<script src="../build/three.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -124,14 +125,14 @@
 					color: 0xdddddd,
 					specular: 0x222222,
 					shininess: 35,
-					map: textureLoader.load( "models/json/leeperrysmith/Map-COL.jpg" ),
-					specularMap: textureLoader.load( "models/json/leeperrysmith/Map-SPEC.jpg" ),
-					normalMap: textureLoader.load( "models/json/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
+					map: textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" ),
+					specularMap: textureLoader.load( "models/gltf/LeePerrySmith/Map-SPEC.jpg" ),
+					normalMap: textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
 					normalScale: new THREE.Vector2( 0.8, 0.8 )
 				} );
 
-				loader = new THREE.JSONLoader();
-				loader.load( "models/json/leeperrysmith/LeePerrySmith.json", function( geometry ) { createScene( geometry, 100, material ) } );
+				loader = new THREE.GLTFLoader();
+				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) { createScene( gltf.scene.children[ 0 ].geometry, 100, material ) } );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgl_materials_skin.html

@@ -56,7 +56,7 @@
 		<script src="js/postprocessing/ShaderPass.js"></script>
 		<script src="js/postprocessing/MaskPass.js"></script>
 
-
+		<script src="js/loaders/GLTFLoader.js"></script>
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
@@ -118,10 +118,10 @@
 
 				var textureLoader = new THREE.TextureLoader();
 
-				uniformsUV[ "tNormal" ].value = textureLoader.load( "models/json/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
+				uniformsUV[ "tNormal" ].value = textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
 				uniformsUV[ "uNormalScale" ].value = -1.5;
 
-				uniformsUV[ "tDiffuse" ].value = textureLoader.load( "models/json/leeperrysmith/Map-COL.jpg" );
+				uniformsUV[ "tDiffuse" ].value = textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" );
 
 				uniformsUV[ "passID" ].value = 0;
 
@@ -149,10 +149,10 @@
 
 				// LOADER
 
-				loader = new THREE.JSONLoader();
-				loader.load(  "models/json/leeperrysmith/LeePerrySmith.json", function( geometry ) {
+				loader = new THREE.GLTFLoader();
+				loader.load(  "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) {
 
-					createScene( geometry, 100, material );
+					createScene( gltf.scene.children[ 0 ].geometry, 100, material );
 
 				} );
 

examples/webgl_modifier_simplifier.html

@@ -20,6 +20,7 @@
 
 		<script src="../build/three.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
 		<script src="js/modifiers/SimplifyModifier.js"></script>
 
 		<script>
@@ -59,25 +60,24 @@
 				camera.add( light );
 				scene.add( camera );
 
-				new THREE.JSONLoader().load( "models/json/leeperrysmith/LeePerrySmith.json", function ( geometry ) {
+				new THREE.GLTFLoader().load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xAEAED5, shininess: 1 } );
-
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = gltf.scene.children[ 0 ];
 					mesh.position.x = - 3;
 					mesh.rotation.y = Math.PI / 2;
 					scene.add( mesh );
 
 					var modifer = new THREE.SimplifyModifier();
 
-					var simplified = modifer.modify( geometry, Math.floor( geometry.vertices.length * 0.9375 ) ); // number of vertices to remove
-
-					var material = new THREE.MeshPhongMaterial( { color: 0xAEAED5, shininess: 1, flatShading: true } );
+					var simplified = mesh.clone();
+					simplified.material = simplified.material.clone();
+					simplified.material.flatShading = true;
+					var count = Math.floor( simplified.geometry.attributes.position.count * 0.875 ); // number of vertices to remove
+					simplified.geometry = modifer.modify( simplified.geometry, count );
 
-					var mesh = new THREE.Mesh( simplified, material );
-					mesh.position.x = 3;
-					mesh.rotation.y = - Math.PI / 2;
-					scene.add( mesh );
+					simplified.position.x = 3;
+					simplified.rotation.y = - Math.PI / 2;
+					scene.add( simplified );
 
 					render();
 

examples/webgl_postprocessing_advanced.html

@@ -62,6 +62,8 @@
 		<script src="js/postprocessing/ShaderPass.js"></script>
 		<script src="js/postprocessing/MaskPass.js"></script>
 
+		<script src="js/loaders/GLTFLoader.js"></script>
+
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
@@ -111,10 +113,10 @@
 				directionalLight.position.set( 0, -0.1, 1 ).normalize();
 				sceneModel.add( directionalLight );
 
-				var loader = new THREE.JSONLoader();
-				loader.load( "models/json/leeperrysmith/LeePerrySmith.json", function( geometry ) {
+				var loader = new THREE.GLTFLoader();
+				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) {
 
-					createMesh( geometry, sceneModel, 100 );
+					createMesh( gltf.scene.children[ 0 ].geometry, sceneModel, 100 );
 
 				} );
 
@@ -340,8 +342,8 @@
 					color: 0x999999,
 					specular: 0x080808,
 					shininess: 20,
-					map: new THREE.TextureLoader().load( "models/json/leeperrysmith/Map-COL.jpg" ),
-					normalMap: new THREE.TextureLoader().load("models/json/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
+					map: new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Map-COL.jpg" ),
+					normalMap: new THREE.TextureLoader().load("models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
 					normalScale: new THREE.Vector2( 0.75, 0.75 )
 
 				} );