examples, docs: these are now esm ready

pixiv · Nov 5, 2020 · d4a37bc · d4a37bc
1 parent 83c4f50
commit d4a37bc
Show file tree

Hide file tree

Showing 19 changed files with 336 additions and 176 deletions.
diff --git a/README.md b/README.md
@@ -14,23 +14,33 @@ Use [VRM](https://vrm.dev/) on [three.js](https://threejs.org/)
 
 ### from HTML
 
-You will need:
+From v0.6.0, You have to use [import maps](https://github.com/WICG/import-maps) to refer a Three.js from three-vrm.
+Since import map is still a draft, we are going to use [`es-module-shims`](https://github.com/guybedford/es-module-shims) to achieve this.
+For more information, please refer the "Import maps" section of this three.js document:
+https://threejs.org/docs/#manual/en/introduction/Installation
 
-- [Three.js build](https://github.com/mrdoob/three.js/blob/master/build/three.js)
-- [GLTFLoader](https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js)
-- [A build of @pixiv/three-vrm](https://github.com/pixiv/three-vrm/releases)
+In the example below, we are going to use the cdn [unpkg](https://unpkg.com). If you want to use either local or other cdns, please interpret them accordingly.
 
 Code like this:
 
 ```html
-<script src="three.js"></script>
-<script src="GLTFLoader.js"></script>
-<script src="three-vrm.js"></script>
+<script defer src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+<script type="importmap-shim">
+	{
+		"imports": {
+			"three": "https://unpkg.com/[email protected]/build/three.module.js",
+			"three/examples/jsm/": "https://unpkg.com/[email protected]/examples/jsm/"
+		}
+	}
+</script>
+<script type="module-shim">
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { VRM } from '../lib/three-vrm.js';
 
-<script>
 const scene = new THREE.Scene();
 
-const loader = new THREE.GLTFLoader();
+const loader = new GLTFLoader();
 loader.load(
 
 	// URL of the VRM you want to load
@@ -40,7 +50,7 @@ loader.load(
 	( gltf ) => {
 
 		// generate a VRM instance from gltf
-		THREE.VRM.from( gltf ).then( ( vrm ) => {
+		VRM.from( gltf ).then( ( vrm ) => {
 
 			// add the loaded vrm to the scene
 			scene.add( vrm.scene );

diff --git a/packages/three-vrm/README.md b/packages/three-vrm/README.md
@@ -14,23 +14,33 @@ Use [VRM](https://vrm.dev/) on [three.js](https://threejs.org/)
 
 ### from HTML
 
-You will need:
+From v0.6.0, You have to use [import maps](https://github.com/WICG/import-maps) to refer a Three.js from three-vrm.
+Since import map is still a draft, we are going to use [`es-module-shims`](https://github.com/guybedford/es-module-shims) to achieve this.
+For more information, please refer the "Import maps" section of this three.js document:
+https://threejs.org/docs/#manual/en/introduction/Installation
 
-- [Three.js build](https://github.com/mrdoob/three.js/blob/master/build/three.js)
-- [GLTFLoader](https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js)
-- [A build of @pixiv/three-vrm](https://github.com/pixiv/three-vrm/releases)
+In the example below, we are going to use the cdn [unpkg](https://unpkg.com). If you want to use either local or other cdns, please interpret them accordingly.
 
 Code like this:
 
 ```html
-<script src="three.js"></script>
-<script src="GLTFLoader.js"></script>
-<script src="three-vrm.js"></script>
+<script defer src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+<script type="importmap-shim">
+	{
+		"imports": {
+			"three": "https://unpkg.com/[email protected]/build/three.module.js",
+			"three/examples/jsm/": "https://unpkg.com/[email protected]/examples/jsm/"
+		}
+	}
+</script>
+<script type="module-shim">
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { VRM } from '../lib/three-vrm.js';
 
-<script>
 const scene = new THREE.Scene();
 
-const loader = new THREE.GLTFLoader();
+const loader = new GLTFLoader();
 loader.load(
 
 	// URL of the VRM you want to load
@@ -40,7 +50,7 @@ loader.load(
 	( gltf ) => {
 
 		// generate a VRM instance from gltf
-		THREE.VRM.from( gltf ).then( ( vrm ) => {
+		VRM.from( gltf ).then( ( vrm ) => {
 
 			// add the loaded vrm to the scene
 			scene.add( vrm.scene );

diff --git a/packages/three-vrm/examples/animations.html b/packages/three-vrm/examples/animations.html
@@ -19,11 +19,21 @@
 	</head>
 
 	<body>
-		<script src="https://unpkg.com/[email protected]/build/three.js"></script>
-		<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
-		<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
-		<script src="../lib/three-vrm.js"></script>
-		<script>
+		<script defer src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+		<script type="importmap-shim">
+			{
+				"imports": {
+					"three": "https://unpkg.com/[email protected]/build/three.module.js",
+					"three/examples/jsm/": "https://unpkg.com/[email protected]/examples/jsm/"
+				}
+			}
+		</script>
+		<script type="module-shim">
+			import * as THREE from 'three';
+			import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+			import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+			import { VRM, VRMSchema, VRMUtils } from '../lib/three-vrm.js';
+
 			// renderer
 			const renderer = new THREE.WebGLRenderer();
 			renderer.setSize( window.innerWidth, window.innerHeight );
@@ -35,7 +45,7 @@
 			camera.position.set( 0.0, 1.0, 5.0 );
 
 			// camera controls
-			const controls = new THREE.OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 			controls.screenSpacePanning = true;
 			controls.target.set( 0.0, 1.0, 0.0 );
 			controls.update();
@@ -51,22 +61,22 @@
 			// gltf and vrm
 			let currentVrm = undefined;
 			let currentMixer = undefined;
-			const loader = new THREE.GLTFLoader();
+			const loader = new GLTFLoader();
 			loader.crossOrigin = 'anonymous';
 			loader.load(
 
 				'./models/three-vrm-girl.vrm',
 
 				( gltf ) => {
 
-					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+					VRMUtils.removeUnnecessaryJoints( gltf.scene );
 
-					THREE.VRM.from( gltf ).then( ( vrm ) => {
+					VRM.from( gltf ).then( ( vrm ) => {
 
 						scene.add( vrm.scene );
 						currentVrm = vrm;
 
-						vrm.humanoid.getBoneNode( THREE.VRMSchema.HumanoidBoneName.Hips ).rotation.y = Math.PI;
+						vrm.humanoid.getBoneNode( VRMSchema.HumanoidBoneName.Hips ).rotation.y = Math.PI;
 
 						prepareAnimation( vrm );
 
@@ -92,13 +102,13 @@
 				quatB.setFromEuler( new THREE.Euler( 0.0, 0.0, 0.25 * Math.PI ) );
 
 				const armTrack = new THREE.QuaternionKeyframeTrack(
-					vrm.humanoid.getBoneNode( THREE.VRMSchema.HumanoidBoneName.LeftUpperArm ).name + '.quaternion', // name
+					vrm.humanoid.getBoneNode( VRMSchema.HumanoidBoneName.LeftUpperArm ).name + '.quaternion', // name
 					[ 0.0, 0.5, 1.0 ], // times
 					[ ...quatA.toArray(), ...quatB.toArray(), ...quatA.toArray() ] // values
 				);
 
 				const blinkTrack = new THREE.NumberKeyframeTrack(
-					vrm.blendShapeProxy.getBlendShapeTrackName( THREE.VRMSchema.BlendShapePresetName.Blink ), // name
+					vrm.blendShapeProxy.getBlendShapeTrackName( VRMSchema.BlendShapePresetName.Blink ), // name
 					[ 0.0, 0.5, 1.0 ], // times
 					[ 0.0, 1.0, 0.0 ] // values
 				);

diff --git a/packages/three-vrm/examples/basic.html b/packages/three-vrm/examples/basic.html
@@ -19,11 +19,21 @@
 	</head>
 
 	<body>
-		<script src="https://unpkg.com/[email protected]/build/three.js"></script>
-		<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
-		<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
-		<script src="../lib/three-vrm.js"></script>
-		<script>
+		<script defer src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+		<script type="importmap-shim">
+			{
+				"imports": {
+					"three": "https://unpkg.com/[email protected]/build/three.module.js",
+					"three/examples/jsm/": "https://unpkg.com/[email protected]/examples/jsm/"
+				}
+			}
+		</script>
+		<script type="module-shim">
+			import * as THREE from 'three';
+			import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+			import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+			import { VRM, VRMSchema, VRMUtils } from '../lib/three-vrm.js';
+
 			// renderer
 			const renderer = new THREE.WebGLRenderer();
 			renderer.setSize( window.innerWidth, window.innerHeight );
@@ -35,7 +45,7 @@
 			camera.position.set( 0.0, 1.0, 5.0 );
 
 			// camera controls
-			const controls = new THREE.OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 			controls.screenSpacePanning = true;
 			controls.target.set( 0.0, 1.0, 0.0 );
 			controls.update();
@@ -49,7 +59,7 @@
 			scene.add( light );
 
 			// gltf and vrm
-			const loader = new THREE.GLTFLoader();
+			const loader = new GLTFLoader();
 			loader.crossOrigin = 'anonymous';
 			loader.load(
 
@@ -60,15 +70,15 @@
 				( gltf ) => {
 
 					// calling this function greatly improves the performance
-					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+					VRMUtils.removeUnnecessaryJoints( gltf.scene );
 
 					// generate VRM instance from gltf
-					THREE.VRM.from( gltf ).then( ( vrm ) => {
+					VRM.from( gltf ).then( ( vrm ) => {
 
 						console.log( vrm );
 						scene.add( vrm.scene );
 
-						vrm.humanoid.getBoneNode( THREE.VRMSchema.HumanoidBoneName.Hips ).rotation.y = Math.PI;
+						vrm.humanoid.getBoneNode( VRMSchema.HumanoidBoneName.Hips ).rotation.y = Math.PI;
 
 					} );
 

diff --git a/packages/three-vrm/examples/blendshapes.html b/packages/three-vrm/examples/blendshapes.html
@@ -19,11 +19,21 @@
 	</head>
 
 	<body>
-		<script src="https://unpkg.com/[email protected]/build/three.js"></script>
-		<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
-		<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
-		<script src="../lib/three-vrm.js"></script>
-		<script>
+		<script defer src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+		<script type="importmap-shim">
+			{
+				"imports": {
+					"three": "https://unpkg.com/[email protected]/build/three.module.js",
+					"three/examples/jsm/": "https://unpkg.com/[email protected]/examples/jsm/"
+				}
+			}
+		</script>
+		<script type="module-shim">
+			import * as THREE from 'three';
+			import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+			import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+			import { VRM, VRMSchema, VRMUtils } from '../lib/three-vrm.js';
+
 			// renderer
 			const renderer = new THREE.WebGLRenderer();
 			renderer.setSize( window.innerWidth, window.innerHeight );
@@ -35,7 +45,7 @@
 			camera.position.set( 0.0, 1.0, 5.0 );
 
 			// camera controls
-			const controls = new THREE.OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 			controls.screenSpacePanning = true;
 			controls.target.set( 0.0, 1.0, 0.0 );
 			controls.update();
@@ -50,22 +60,22 @@
 
 			// gltf and vrm
 			let currentVrm = undefined;
-			const loader = new THREE.GLTFLoader();
+			const loader = new GLTFLoader();
 			loader.crossOrigin = 'anonymous';
 			loader.load(
 
 				'./models/three-vrm-girl.vrm',
 
 				( gltf ) => {
 
-					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+					VRMUtils.removeUnnecessaryJoints( gltf.scene );
 
-					THREE.VRM.from( gltf ).then( ( vrm ) => {
+					VRM.from( gltf ).then( ( vrm ) => {
 
 						scene.add( vrm.scene );
 						currentVrm = vrm;
 
-						vrm.humanoid.getBoneNode( THREE.VRMSchema.HumanoidBoneName.Hips ).rotation.y = Math.PI;
+						vrm.humanoid.getBoneNode( VRMSchema.HumanoidBoneName.Hips ).rotation.y = Math.PI;
 
 						console.log( vrm );
 
@@ -99,8 +109,8 @@
 
 					// tweak blendshape
 					const s = Math.sin( Math.PI * clock.elapsedTime );
-					currentVrm.blendShapeProxy.setValue( THREE.VRMSchema.BlendShapePresetName.A, 0.5 + 0.5 * s );
-					currentVrm.blendShapeProxy.setValue( THREE.VRMSchema.BlendShapePresetName.BlinkL, 0.5 - 0.5 * s );
+					currentVrm.blendShapeProxy.setValue( VRMSchema.BlendShapePresetName.A, 0.5 + 0.5 * s );
+					currentVrm.blendShapeProxy.setValue( VRMSchema.BlendShapePresetName.BlinkL, 0.5 - 0.5 * s );
 
 					// update vrm
 					currentVrm.update( deltaTime );

diff --git a/packages/three-vrm/examples/bones.html b/packages/three-vrm/examples/bones.html
@@ -19,11 +19,21 @@
 	</head>
 
 	<body>
-		<script src="https://unpkg.com/[email protected]/build/three.js"></script>
-		<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
-		<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
-		<script src="../lib/three-vrm.js"></script>
-		<script>
+		<script defer src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+		<script type="importmap-shim">
+			{
+				"imports": {
+					"three": "https://unpkg.com/[email protected]/build/three.module.js",
+					"three/examples/jsm/": "https://unpkg.com/[email protected]/examples/jsm/"
+				}
+			}
+		</script>
+		<script type="module-shim">
+			import * as THREE from 'three';
+			import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+			import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+			import { VRM, VRMSchema, VRMUtils } from '../lib/three-vrm.js';
+
 			// renderer
 			const renderer = new THREE.WebGLRenderer();
 			renderer.setSize( window.innerWidth, window.innerHeight );
@@ -35,7 +45,7 @@
 			camera.position.set( 0.0, 1.0, 5.0 );
 
 			// camera controls
-			const controls = new THREE.OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 			controls.screenSpacePanning = true;
 			controls.target.set( 0.0, 1.0, 0.0 );
 			controls.update();
@@ -50,22 +60,22 @@
 
 			// gltf and vrm
 			let currentVrm = undefined;
-			const loader = new THREE.GLTFLoader();
+			const loader = new GLTFLoader();
 			loader.crossOrigin = 'anonymous';
 			loader.load(
 
 				'./models/three-vrm-girl.vrm',
 
 				( gltf ) => {
 
-					THREE.VRMUtils.removeUnnecessaryJoints( gltf.scene );
+					VRMUtils.removeUnnecessaryJoints( gltf.scene );
 
-					THREE.VRM.from( gltf ).then( ( vrm ) => {
+					VRM.from( gltf ).then( ( vrm ) => {
 
 						scene.add( vrm.scene );
 						currentVrm = vrm;
 
-						vrm.humanoid.getBoneNode( THREE.VRMSchema.HumanoidBoneName.Hips ).rotation.y = Math.PI;
+						vrm.humanoid.getBoneNode( VRMSchema.HumanoidBoneName.Hips ).rotation.y = Math.PI;
 
 						console.log( vrm );
 
@@ -99,9 +109,9 @@
 
 					// tweak bones
 					const s = 0.25 * Math.PI * Math.sin( Math.PI * clock.elapsedTime );
-					currentVrm.humanoid.getBoneNode( THREE.VRMSchema.HumanoidBoneName.Neck ).rotation.y = s;
-					currentVrm.humanoid.getBoneNode( THREE.VRMSchema.HumanoidBoneName.LeftUpperArm ).rotation.z = s;
-					currentVrm.humanoid.getBoneNode( THREE.VRMSchema.HumanoidBoneName.RightUpperArm ).rotation.x = s;
+					currentVrm.humanoid.getBoneNode( VRMSchema.HumanoidBoneName.Neck ).rotation.y = s;
+					currentVrm.humanoid.getBoneNode( VRMSchema.HumanoidBoneName.LeftUpperArm ).rotation.z = s;
+					currentVrm.humanoid.getBoneNode( VRMSchema.HumanoidBoneName.RightUpperArm ).rotation.x = s;
 
 					// update vrm
 					currentVrm.update( deltaTime );