three vrm

@pixiv/three-vrm

Verwenden Sie VRM auf drei.js

Github -Repository

Beispiele

Dokumentationen

API -Referenz

Wie man benutzt

von html

Sie brauchen:

• Drei.js bauen
• GLTFLOADER
• Ein Build von @pixiv/Drei-VRM
  • .module sind ESM, ansonsten ist es UMD und injiziert seine Module in globale THREE
  • .min werden abgebaut (für die Produktion), sonst wird es nicht abgebaut und es wird mit Quellkarten geliefert

Sie können alle Abhängigkeiten über CDN wie Jsdelivr importieren.

 < 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 >

Siehe das Dreier-Dokument, wenn Sie mit drei.js noch nicht vertraut sind: https://whreejs.org/docs/#Manual/en/inTroduction/creating-a-scene

Weitere Informationen finden Sie im vollständigen Code: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/basic.html

über NPM

Installieren Sie three und @pixiv/three-vrm :

npm install three @pixiv/three-vrm

Verwendung mit WebGpurenderer

Ab V3 bieten wir WebGpurenderer -Kompatibilität an. Um drei VRM mit WebGpurenderer zu verwenden, geben Sie die WebGPU-kompatible MToonNodeMaterial für die materialType Option MToonMaterialLoaderPlugin an.

MToonNodeMaterial unterstützt nur drei.Js R167 oder höher. Das nodematerialische System von drei.Js ist noch in der Entwicklung, sodass wir die Kompatibilität mit älteren Versionen von drei.

 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 ...

Weitere Informationen finden Sie im vollständigen Code: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/webgpu-dnd.html

Beitragen

Siehe: beitragen.md

LIZENZ

MIT