JSM: Added module and TS file for VRMLoader.

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

@@ -216,6 +216,7 @@
 						<li>TGALoader</li>
 						<li>TTFLoader</li>
 						<li>VRMLLoader</li>
+						<li>VRMLoader</li>
 						<li>VTKLoader</li>
 						<li>XLoader</li>
 					</ul>

examples/js/loaders/VRMLoader.js

@@ -70,9 +70,9 @@ THREE.VRMLoader = ( function () {
 
 		parse: function ( gltf, onLoad ) {
 
-			var gltfParser = gltf.parser;
-			var gltfExtensions = gltf.userData.gltfExtensions || {};
-			var vrmExtension = gltfExtensions.VRM || {};
+			// var gltfParser = gltf.parser;
+			// var gltfExtensions = gltf.userData.gltfExtensions || {};
+			// var vrmExtension = gltfExtensions.VRM || {};
 
 			// handle VRM Extension here
 

examples/jsm/loaders/VRMLoader.d.ts

+import {
+  LoadingManager
+} from '../../../src/Three';
+
+import { GLTFLoader, GLTF } from './GLTFLoader';
+import { DRACOLoader } from './DRACOLoader';
+
+export class VRMLoader {
+  constructor(manager?: LoadingManager);
+  gltfLoader: GLTFLoader;
+  manager: LoadingManager;
+  path: string;
+  resourcePath: string;
+  crossOrigin: string;
+
+  load(url: string, onLoad: (scene: GLTF) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void) : void;
+  setDRACOLoader(dracoLoader: DRACOLoader): this;
+  setPath(path: string): this;
+  setResourcePath(path: string): this;
+  setCrossOrigin(path: string): this;
+
+  parse(gltf: GLTF, onLoad: (scene: GLTF) => void): void;
+}

examples/jsm/loaders/VRMLoader.js

+/**
+ * @author Takahiro / https://github.com/takahirox
+ */
+
+import {
+	DefaultLoadingManager
+} from "../../../build/three.module.js";
+import { GLTFLoader } from "../loaders/GLTFLoader.js";
+
+// VRM Specification: https://dwango.github.io/vrm/vrm_spec/
+//
+// VRM is based on glTF 2.0 and VRM extension is defined
+// in top-level json.extensions.VRM
+
+var VRMLoader = ( function () {
+
+	function VRMLoader( manager ) {
+
+		if ( GLTFLoader === undefined ) {
+
+			throw new Error( 'THREE.VRMLoader: Import GLTFLoader.' );
+
+		}
+
+		this.manager = ( manager !== undefined ) ? manager : DefaultLoadingManager;
+		this.gltfLoader = new GLTFLoader( this.manager );
+
+	}
+
+	VRMLoader.prototype = {
+
+		constructor: VRMLoader,
+
+		crossOrigin: 'anonymous',
+
+		load: function ( url, onLoad, onProgress, onError ) {
+
+			var scope = this;
+
+			this.gltfLoader.load( url, function ( gltf ) {
+
+				scope.parse( gltf, onLoad );
+
+			}, onProgress, onError );
+
+		},
+
+		setCrossOrigin: function ( value ) {
+
+			this.glTFLoader.setCrossOrigin( value );
+			return this;
+
+		},
+
+		setPath: function ( value ) {
+
+			this.glTFLoader.setPath( value );
+			return this;
+
+		},
+
+		setResourcePath: function ( value ) {
+
+			this.glTFLoader.setResourcePath( value );
+			return this;
+
+		},
+
+		setDRACOLoader: function ( dracoLoader ) {
+
+			this.glTFLoader.setDRACOLoader( dracoLoader );
+			return this;
+
+		},
+
+		parse: function ( gltf, onLoad ) {
+
+			// var gltfParser = gltf.parser;
+			// var gltfExtensions = gltf.userData.gltfExtensions || {};
+			// var vrmExtension = gltfExtensions.VRM || {};
+
+			// handle VRM Extension here
+
+			onLoad( gltf );
+
+		}
+
+	};
+
+	return VRMLoader;
+
+} )();
+
+export { VRMLoader };

examples/webgl_loader_vrm.html

@@ -15,22 +15,20 @@
 			<a href="http://3d.nicovideo.jp/alicia/rule.html">License</a><br />
 		</div>
 
-		<script src="../build/three.js"></script>
+		<script type="module">
+			import {
+				HemisphereLight,
+				Material,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/GLTFLoader.js"></script>
-		<script src="js/loaders/VRMLoader.js"></script>
+			import Stats from './jsm/libs/stats.module.js';
 
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { VRMLoader } from './jsm/loaders/VRMLoader.js';
 
 			var container, stats, controls;
 			var camera, scene, renderer, light;
@@ -43,17 +41,17 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
 				camera.position.set( 0, 1.6, - 2.2 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
+				light = new HemisphereLight( 0xbbbbff, 0x444422 );
 				light.position.set( 0, 1, 0 );
 				scene.add( light );
 
 				// model
-				var loader = new THREE.VRMLoader();
+				var loader = new VRMLoader();
 				loader.load( 'models/vrm/Alicia/AliciaSolid.vrm', function ( vrm ) {
 
 					// VRMLoader doesn't support VRM Unlit extension yet so
@@ -66,8 +64,8 @@
 
 								for ( var i = 0, il = object.material.length; i < il; i ++ ) {
 
-									var material = new THREE.MeshBasicMaterial();
-									THREE.Material.prototype.copy.call( material, object.material[ i ] );
+									var material = new MeshBasicMaterial();
+									Material.prototype.copy.call( material, object.material[ i ] );
 									material.color.copy( object.material[ i ].color );
 									material.map = object.material[ i ].map;
 									material.lights = false;
@@ -80,8 +78,8 @@
 
 							} else {
 
-								var material = new THREE.MeshBasicMaterial();
-								THREE.Material.prototype.copy.call( material, object.material );
+								var material = new MeshBasicMaterial();
+								Material.prototype.copy.call( material, object.material );
 								material.color.copy( object.material.color );
 								material.map = object.material.map;
 								material.lights = false;
@@ -100,13 +98,13 @@
 
 				} );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.gammaOutput = true;
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 0.9, 0 );
 				controls.update();
 

utils/modularize.js

@@ -112,6 +112,7 @@ var files = [
 	{ path: 'loaders/TGALoader.js', dependencies: [], ignoreList: [] },
 	{ path: 'loaders/TTFLoader.js', dependencies: [], ignoreList: [ 'Font' ] },
 	{ path: 'loaders/VRMLLoader.js', dependencies: [], ignoreList: [] },
+	{ path: 'loaders/VRMLoader.js', dependencies: [ { name: 'GLTFLoader', path: 'loaders/GLTFLoader.js' } ], ignoreList: [] },
 	{ path: 'loaders/VTKLoader.js', dependencies: [ { name: 'Zlib', path: 'libs/inflate.min.js' } ], ignoreList: [] },
 	{ path: 'loaders/XLoader.js', dependencies: [], ignoreList: [] },