JSM: Added module and TS file for CTMLoader.

docs/manual/en/introduction/Import-via-modules.html

@@ -169,6 +169,11 @@
 				</li>
 				<li>loaders
 					<ul>
+						<li>ctm
+							<ul>
+								<li>CTMLoader</li>
+							</ul>
+						</li>
 						<li>deprecated
 							<ul>
 								<li>LegacyGLTFLoader</li>

examples/js/loaders/ctm/CTMLoader.js

@@ -32,12 +32,22 @@
  *
  */
 
+/* global CTM */
+
 THREE.CTMLoader = function () {
 
+	this.workerPath = null;
+
 };
 
 THREE.CTMLoader.prototype.constructor = THREE.CTMLoader;
 
+THREE.CTMLoader.prototype.setWorkerPath = function ( workerPath ) {
+
+	this.workerPath = workerPath;
+
+};
+
 // Load multiple CTM parts defined in JSON
 
 THREE.CTMLoader.prototype.loadParts = function ( url, callback, parameters ) {
@@ -131,7 +141,7 @@ THREE.CTMLoader.prototype.load = function ( url, callback, parameters ) {
 
 				if ( parameters.useWorker ) {
 
-					var worker = parameters.worker || new Worker( 'js/loaders/ctm/CTMWorker.js' );
+					var worker = parameters.worker || new Worker( scope.workerPath );
 
 					worker.onmessage = function ( event ) {
 
@@ -144,7 +154,7 @@ THREE.CTMLoader.prototype.load = function ( url, callback, parameters ) {
 							var e1 = Date.now();
 							// console.log( "CTM data parse time [worker]: " + (e1-s) + " ms" );
 
-							scope.createModel( ctmFile, callback );
+							scope._createGeometry( ctmFile, callback );
 
 							var e = Date.now();
 							console.log( "model load time [worker]: " + ( e - e1 ) + " ms, total: " + ( e - s ) );
@@ -165,7 +175,7 @@ THREE.CTMLoader.prototype.load = function ( url, callback, parameters ) {
 
 						var ctmFile = new CTM.File( stream );
 
-						scope.createModel( ctmFile, callback );
+						scope._createGeometry( ctmFile, callback );
 
 					}
 
@@ -210,63 +220,52 @@ THREE.CTMLoader.prototype.load = function ( url, callback, parameters ) {
 };
 
 
-THREE.CTMLoader.prototype.createModel = function ( file, callback ) {
-
-	var Model = function () {
-
-		THREE.BufferGeometry.call( this );
-
-		this.materials = [];
-
-		var indices = file.body.indices;
-		var positions = file.body.vertices;
-		var normals = file.body.normals;
-
-		var uvs, colors;
+THREE.CTMLoader.prototype._createGeometry = function ( file, callback ) {
 
-		var uvMaps = file.body.uvMaps;
+	var geometry = new THREE.BufferGeometry();
 
-		if ( uvMaps !== undefined && uvMaps.length > 0 ) {
+	var indices = file.body.indices;
+	var positions = file.body.vertices;
+	var normals = file.body.normals;
 
-			uvs = uvMaps[ 0 ].uv;
+	var uvs, colors;
 
-		}
+	var uvMaps = file.body.uvMaps;
 
-		var attrMaps = file.body.attrMaps;
+	if ( uvMaps !== undefined && uvMaps.length > 0 ) {
 
-		if ( attrMaps !== undefined && attrMaps.length > 0 && attrMaps[ 0 ].name === 'Color' ) {
+		uvs = uvMaps[ 0 ].uv;
 
-			colors = attrMaps[ 0 ].attr;
+	}
 
-		}
+	var attrMaps = file.body.attrMaps;
 
-		this.setIndex( new THREE.BufferAttribute( indices, 1 ) );
-		this.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+	if ( attrMaps !== undefined && attrMaps.length > 0 && attrMaps[ 0 ].name === 'Color' ) {
 
-		if ( normals !== undefined ) {
+		colors = attrMaps[ 0 ].attr;
 
-			this.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
+	}
 
-		}
+	geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
+	geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
-		if ( uvs !== undefined ) {
+	if ( normals !== undefined ) {
 
-			this.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
+		geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
 
-		}
+	}
 
-		if ( colors !== undefined ) {
+	if ( uvs !== undefined ) {
 
-			this.addAttribute( 'color', new THREE.BufferAttribute( colors, 4 ) );
+		geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
 
-		}
+	}
 
-	};
+	if ( colors !== undefined ) {
 
-	Model.prototype = Object.create( THREE.BufferGeometry.prototype );
-	Model.prototype.constructor = Model;
+		geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 4 ) );
 
-	var geometry = new Model();
+	}
 
 	// compute vertex normals if not present in the CTM model
 	if ( geometry.attributes.normal === undefined ) {

examples/jsm/loaders/ctm/CTMLoader.d.ts

@@ -0,0 +1,20 @@
+import {
+  BufferGeometry,
+  Material
+} from '../../../../src/Three';
+
+export interface CTMLoaderParameters {
+  basePath?: string;
+  offsets?: number[];
+  useWorker?: boolean;
+  worker?: object;
+}
+
+export class CTMLoader {
+  constructor();
+  workerPath: string;
+
+  load(url: string, onLoad: (geometry: BufferGeometry) => void, parameters: CTMLoaderParameters): void;
+  loadParts(url: string, onLoad: (geometries: BufferGeometry[], materials: Material[]) => void, parameters: CTMLoaderParameters): void;
+  setWorkerPath(value: string): this;
+}

examples/jsm/loaders/ctm/CTMLoader.js

@@ -0,0 +1,288 @@
+/**
+ * Loader for CTM encoded models generated by OpenCTM tools:
+ *	http://openctm.sourceforge.net/
+ *
+ * Uses js-openctm library by Juan Mellado
+ *	http://code.google.com/p/js-openctm/
+ *
+ * @author alteredq / http://alteredqualia.com/
+ *
+ * OpenCTM LICENSE:
+ *
+ * Copyright (c) 2009-2010 Marcus Geelnard
+ *
+ * This software is provided 'as-is', without any express or implied
+ * warranty. In no event will the authors be held liable for any damages
+ * arising from the use of this software.
+ *
+ * Permission is granted to anyone to use this software for any purpose,
+ * including commercial applications, and to alter it and redistribute it
+ * freely, subject to the following restrictions:
+ *
+ *     1. The origin of this software must not be misrepresented; you must not
+ *    claim that you wrote the original software. If you use this software
+ *    in a product, an acknowledgment in the product documentation would be
+ *    appreciated but is not required.
+ *
+ *    2. Altered source versions must be plainly marked as such, and must not
+ *    be misrepresented as being the original software.
+ *
+ *    3. This notice may not be removed or altered from any source
+ *    distribution.
+ *
+ */
+
+import {
+	BufferAttribute,
+	BufferGeometry,
+	Loader,
+	LoaderUtils
+} from "../../../../build/three.module.js";
+
+/* global CTM */
+
+var CTMLoader = function () {
+
+	this.workerPath = null;
+
+};
+
+CTMLoader.prototype.constructor = CTMLoader;
+
+CTMLoader.prototype.setWorkerPath = function ( workerPath ) {
+
+	this.workerPath = workerPath;
+
+};
+
+// Load multiple CTM parts defined in JSON
+
+CTMLoader.prototype.loadParts = function ( url, callback, parameters ) {
+
+	parameters = parameters || {};
+
+	var scope = this;
+
+	var xhr = new XMLHttpRequest();
+
+	var basePath = parameters.basePath ? parameters.basePath : LoaderUtils.extractUrlBase( url );
+
+	xhr.onreadystatechange = function () {
+
+		if ( xhr.readyState === 4 ) {
+
+			if ( xhr.status === 200 || xhr.status === 0 ) {
+
+				var jsonObject = JSON.parse( xhr.responseText );
+
+				var materials = [], geometries = [], counter = 0;
+
+				function callbackFinal( geometry ) {
+
+					counter += 1;
+
+					geometries.push( geometry );
+
+					if ( counter === jsonObject.offsets.length ) {
+
+						callback( geometries, materials );
+
+					}
+
+				}
+
+
+				// init materials
+
+				for ( var i = 0; i < jsonObject.materials.length; i ++ ) {
+
+					materials[ i ] = Loader.prototype.createMaterial( jsonObject.materials[ i ], basePath );
+
+				}
+
+				// load joined CTM file
+
+				var partUrl = basePath + jsonObject.data;
+				var parametersPart = { useWorker: parameters.useWorker, worker: parameters.worker, offsets: jsonObject.offsets };
+				scope.load( partUrl, callbackFinal, parametersPart );
+
+			}
+
+		}
+
+	};
+
+	xhr.open( "GET", url, true );
+	xhr.setRequestHeader( "Content-Type", "text/plain" );
+	xhr.send( null );
+
+};
+
+// Load CTMLoader compressed models
+//	- parameters
+//		- url (required)
+//		- callback (required)
+
+CTMLoader.prototype.load = function ( url, callback, parameters ) {
+
+	parameters = parameters || {};
+
+	var scope = this;
+
+	var offsets = parameters.offsets !== undefined ? parameters.offsets : [ 0 ];
+
+	var xhr = new XMLHttpRequest(),
+		callbackProgress = null;
+
+	var length = 0;
+
+	xhr.onreadystatechange = function () {
+
+		if ( xhr.readyState === 4 ) {
+
+			if ( xhr.status === 200 || xhr.status === 0 ) {
+
+				var binaryData = new Uint8Array( xhr.response );
+
+				var s = Date.now();
+
+				if ( parameters.useWorker ) {
+
+					var worker = parameters.worker || new Worker( scope.workerPath );
+
+					worker.onmessage = function ( event ) {
+
+						var files = event.data;
+
+						for ( var i = 0; i < files.length; i ++ ) {
+
+							var ctmFile = files[ i ];
+
+							var e1 = Date.now();
+							// console.log( "CTM data parse time [worker]: " + (e1-s) + " ms" );
+
+							scope._createGeometry( ctmFile, callback );
+
+							var e = Date.now();
+							console.log( "model load time [worker]: " + ( e - e1 ) + " ms, total: " + ( e - s ) );
+
+						}
+
+
+					};
+
+					worker.postMessage( { "data": binaryData, "offsets": offsets }, [ binaryData.buffer ] );
+
+				} else {
+
+					for ( var i = 0; i < offsets.length; i ++ ) {
+
+						var stream = new CTM.Stream( binaryData );
+						stream.offset = offsets[ i ];
+
+						var ctmFile = new CTM.File( stream );
+
+						scope._createGeometry( ctmFile, callback );
+
+					}
+
+					//var e = Date.now();
+					//console.log( "CTM data parse time [inline]: " + (e-s) + " ms" );
+
+				}
+
+			} else {
+
+				console.error( "Couldn't load [" + url + "] [" + xhr.status + "]" );
+
+			}
+
+		} else if ( xhr.readyState === 3 ) {
+
+			if ( callbackProgress ) {
+
+				if ( length === 0 ) {
+
+					length = xhr.getResponseHeader( "Content-Length" );
+
+				}
+
+				callbackProgress( { total: length, loaded: xhr.responseText.length } );
+
+			}
+
+		} else if ( xhr.readyState === 2 ) {
+
+			length = xhr.getResponseHeader( "Content-Length" );
+
+		}
+
+	};
+
+	xhr.open( "GET", url, true );
+	xhr.responseType = "arraybuffer";
+
+	xhr.send( null );
+
+};
+
+
+CTMLoader.prototype._createGeometry = function ( file, callback ) {
+
+	var geometry = new BufferGeometry();
+
+	var indices = file.body.indices;
+	var positions = file.body.vertices;
+	var normals = file.body.normals;
+
+	var uvs, colors;
+
+	var uvMaps = file.body.uvMaps;
+
+	if ( uvMaps !== undefined && uvMaps.length > 0 ) {
+
+		uvs = uvMaps[ 0 ].uv;
+
+	}
+
+	var attrMaps = file.body.attrMaps;
+
+	if ( attrMaps !== undefined && attrMaps.length > 0 && attrMaps[ 0 ].name === 'Color' ) {
+
+		colors = attrMaps[ 0 ].attr;
+
+	}
+
+	geometry.setIndex( new BufferAttribute( indices, 1 ) );
+	geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
+
+	if ( normals !== undefined ) {
+
+		geometry.addAttribute( 'normal', new BufferAttribute( normals, 3 ) );
+
+	}
+
+	if ( uvs !== undefined ) {
+
+		geometry.addAttribute( 'uv', new BufferAttribute( uvs, 2 ) );
+
+	}
+
+	if ( colors !== undefined ) {
+
+		geometry.addAttribute( 'color', new BufferAttribute( colors, 4 ) );
+
+	}
+
+	// compute vertex normals if not present in the CTM model
+	if ( geometry.attributes.normal === undefined ) {
+
+		geometry.computeVertexNormals();
+
+	}
+
+	callback( geometry );
+
+};
+
+export { CTMLoader };

examples/webgl_loader_ctm.html

@@ -25,6 +25,12 @@
 
 		<script>
 
+			if ( WEBGL.isWebGLAvailable() === false ) {
+
+				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+
+			}
+
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
 
@@ -127,6 +133,7 @@
 				}
 
 				var loader = new THREE.CTMLoader();
+				loader.setWorkerPath( "js/loaders/ctm/CTMWorker.js" );
 
 				loader.load( "models/ctm/ben.ctm", function ( geometry ) {
 

examples/webgl_loader_ctm_materials.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - baked illumination</title>
+		<title>three.js webgl - CTM loader materials</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
@@ -116,6 +116,8 @@
 				var scale = new THREE.Vector3( 30, 30, 30 );
 
 				var loader = new THREE.CTMLoader();
+				loader.setWorkerPath( "js/loaders/ctm/CTMWorker.js" );
+
 				loader.loadParts( "models/ctm/camaro/camaro.js", function ( geometries, materials ) {
 
 					hackMaterials( materials );

utils/modularize.js

@@ -72,6 +72,7 @@ var files = [
 	{ path: 'lines/Wireframe.js', dependencies: [ { name: 'LineSegmentsGeometry', path: 'lines/LineSegmentsGeometry.js' }, { name: 'LineMaterial', path: 'lines/LineMaterial.js' } ], ignoreList: [] },
 	{ path: 'lines/WireframeGeometry2.js', dependencies: [ { name: 'LineSegmentsGeometry', path: 'lines/LineSegmentsGeometry.js' } ], ignoreList: [] },
 
+	{ path: 'loaders/ctm/CTMLoader.js', dependencies: [], ignoreList: [] },
 	{ path: 'loaders/deprecated/LegacyGLTFLoader.js', dependencies: [], ignoreList: [ 'AnimationMixer' ] },
 	{ path: 'loaders/deprecated/LegacyJSONLoader.js', dependencies: [], ignoreList: [ 'ObjectLoader' ] },
 	{ path: 'loaders/3MFLoader.js', dependencies: [], ignoreList: [] },