@pixiv/three-vrm 1.0.0-beta.8 → 1.0.0

package/README.md

@@ -1,5 +1,7 @@
 # `@pixiv/three-vrm`
 
+[![@pixiv/three-vrm on npm](https://img.shields.io/npm/v/@pixiv/three-vrm)](https://www.npmjs.com/package/@pixiv/three-vrm)
+
 Use [VRM](https://vrm.dev/) on [three.js](https://threejs.org/)
 
 ![three-vrm](https://github.com/pixiv/three-vrm/raw/dev/three-vrm.png)
@@ -8,7 +10,19 @@ Use [VRM](https://vrm.dev/) on [three.js](https://threejs.org/)
 
 [Examples](https://pixiv.github.io/three-vrm/packages/three-vrm/examples)
 
-[Documentation](https://pixiv.github.io/three-vrm/packages/three-vrm/docs)
+[Documentations](https://github.com/pixiv/three-vrm/tree/dev/docs/README.md)
+
+[API Reference](https://pixiv.github.io/three-vrm/packages/three-vrm/docs)
+
+## v1
+
+**three-vrm v1 has been released!**
+
+three-vrm v1 supports [VRM1.0](https://vrm.dev/vrm1/), which is a new version of VRM format (the previous version of VRM is also supported, don't worry!).
+It also adopts the GLTFLoader plugin system which is a relatively new feature of GLTFLoader.
+
+There are a lot of breaking changes!
+See [the migration guide](https://github.com/pixiv/three-vrm/blob/dev/docs/migration-guide-1.0.md) for more info.
 
 ## How to Use
 
@@ -19,8 +33,8 @@ You will need:
 - [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://unpkg.com/browse/@pixiv/three-vrm/lib/)
-	- `.module` ones are ESM, otherwise it's UMD and injects its modules into global `THREE`
-	- `.min` ones are minified (for production), otherwise it's not minified and it comes with source maps
+  - `.module` ones are ESM, otherwise it's UMD and injects its modules into global `THREE`
+  - `.min` ones are minified (for production), otherwise it's not minified and it comes with source maps
 
 Code like this:
 
@@ -30,43 +44,37 @@ Code like this:
 <script src="three-vrm.js"></script>
 
 <script>
-const scene = new THREE.Scene();
-
-const loader = new THREE.GLTFLoader();
-
-// Install GLTFLoader plugin
-loader.register( ( parser ) => {
-
-	return new THREE_VRM.VRMLoaderPlugin( parser );
+  const scene = new THREE.Scene();
 
-} );
+  const loader = new THREE.GLTFLoader();
 
-loader.load(
-
-	// URL of the VRM you want to load
-	'/models/three-vrm-girl.vrm',
-
-	// called when the resource is loaded
-	( gltf ) => {
+  // Install GLTFLoader plugin
+  loader.register((parser) => {
+    return new THREE_VRM.VRMLoaderPlugin(parser);
+  });
 
-		// retrieve a VRM instance from gltf
-		const vrm = gltf.userData.vrm;
+  loader.load(
+    // URL of the VRM you want to load
+    '/models/VRM1_Constraint_Twist_Sample.vrm',
 
-		// add the loaded vrm to the scene
-		scene.add( vrm.scene );
+    // called when the resource is loaded
+    (gltf) => {
+      // retrieve a VRM instance from gltf
+      const vrm = gltf.userData.vrm;
 
-		// deal with vrm features
-		console.log( vrm );
+      // add the loaded vrm to the scene
+      scene.add(vrm.scene);
 
-	},
+      // deal with vrm features
+      console.log(vrm);
+    },
 
-	// called while loading is progressing
-	( progress ) => console.log( 'Loading model...', 100.0 * ( progress.loaded / progress.total ), '%' ),
+    // called while loading is progressing
+    (progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
 
-	// called when loading has errors
-	( error ) => console.error( error )
-
-);
+    // called when loading has errors
+    (error) => console.error(error),
+  );
 </script>
 ```
 
@@ -90,37 +98,31 @@ const scene = new THREE.Scene();
 const loader = new GLTFLoader();
 
 // Install GLTFLoader plugin
-loader.register( ( parser ) => {
-
-	return new VRMLoaderPlugin( parser );
-
-} );
+loader.register((parser) => {
+  return new VRMLoaderPlugin(parser);
+});
 
 loader.load(
+  // URL of the VRM you want to load
+  '/models/VRM1_Constraint_Twist_Sample.vrm',
 
-	// URL of the VRM you want to load
-	'/models/three-vrm-girl.vrm',
-
-	// called when the resource is loaded
-	( gltf ) => {
-
-		// retrieve a VRM instance from gltf
-		const vrm = gltf.userData.vrm;
-
-		// add the loaded vrm to the scene
-		scene.add( vrm.scene );
-
-		// deal with vrm features
-		console.log( vrm );
+  // called when the resource is loaded
+  (gltf) => {
+    // retrieve a VRM instance from gltf
+    const vrm = gltf.userData.vrm;
 
-	},
+    // add the loaded vrm to the scene
+    scene.add(vrm.scene);
 
-	// called while loading is progressing
-	( progress ) => console.log( 'Loading model...', 100.0 * ( progress.loaded / progress.total ), '%' ),
+    // deal with vrm features
+    console.log(vrm);
+  },
 
-	// called when loading has errors
-	( error ) => console.error( error )
+  // called while loading is progressing
+  (progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
 
+  // called when loading has errors
+  (error) => console.error(error),
 );
 ```