three vrm

@pixiv/three-vrm

Utilisez VRM sur trois.js

Référentiel GitHub

Exemples

Documentations

Référence de l'API

Comment utiliser

de HTML

Vous aurez besoin:

• Trois.js build
• Gltfloader
• Une construction de @ pixiv / trois VRM
  • .module est ESM, sinon il est UMD et injecte ses modules en THREE
  • .min

Vous pouvez importer toutes les dépendances via CDN comme jsdelivr.

 < script type =" importmap " >
  {
    "imports" : {
      "three" : "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js" ,
      "three/addons/" : "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/" ,
      "@pixiv/three-vrm" : "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js"
    }
  }
</ script >

< script type =" module " >
  import * as THREE from 'three' ;
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js' ;
  import { VRMLoaderPlugin } from '@pixiv/three-vrm' ;

  // ... Setup renderer, camera, scene ...

  // Create a GLTFLoader - The loader for loading VRM models
  const loader = new GLTFLoader ( ) ;

  // Install a GLTFLoader plugin that enables VRM support
  loader . register ( ( parser ) => {
    return new VRMLoaderPlugin ( parser ) ;
  } ) ;

  loader . load (
    // URL of the VRM you want to load
    '/models/VRM1_Constraint_Twist_Sample.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 while loading is progressing
    ( progress ) => console . log ( 'Loading model...' , 100.0 * ( progress . loaded / progress . total ) , '%' ) ,

    // called when loading has errors
    ( error ) => console . error ( error ) ,
  ) ;

  // ... Perform the render loop ...
</ script >

Voir le document Three.js si vous n'êtes pas encore familier avec trois.js: https://threejs.org/docs/#manual/en/introduction/creating-a-scene

Voir l'exemple du code complet: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/basic.html

via npm

Installez three et @pixiv/three-vrm :

npm install three @pixiv/three-vrm

Utiliser avec webgpureRender

À partir de la V3, nous fournissons une compatibilité WebGpureRenderer. Pour utiliser trois VRM avec webgpaureder, spécifiez le MToonNodeMaterial compatible webgpu pour l'option materialType de MToonMaterialLoaderPlugin .

MToonNodeMaterial ne prend en charge que trois.js R167 ou version ultérieure. Le système nominal de trois.js est toujours en cours de développement, nous pouvons donc rompre la compatibilité avec les versions plus anciennes de trois.js plus fréquemment que les autres parties de trois VRM.

 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js' ;
import { MToonMaterialLoaderPlugin , VRMLoaderPlugin } from '@pixiv/three-vrm' ;
import { MToonNodeMaterial } from '@pixiv/three-vrm/nodes' ;

// ... Setup renderer, camera, scene ...

// Create a GLTFLoader
const loader = new GLTFLoader ( ) ;

// Register a VRMLoaderPlugin
loader . register ( ( parser ) => {

  // create a WebGPU compatible MToonMaterialLoaderPlugin
  const mtoonMaterialPlugin = new MToonMaterialLoaderPlugin ( parser , {

    // set the material type to MToonNodeMaterial
    materialType : MToonNodeMaterial ,

  } ) ;

  return new VRMLoaderPlugin ( parser , {

    // Specify the MToonMaterialLoaderPlugin to use in the VRMLoaderPlugin instance
    mtoonMaterialPlugin ,

  } ) ;

} ) ;

// ... Load the VRM and perform the render loop ...

Voir l'exemple du code complet: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/webgpu-dnd.html

Contributif

Voir: contribution.md

LICENCE

Mit