three vrm

@pixiv/three-vrm

Gunakan VRM di Three.js

Repositori GitHub

Contoh

Dokumentasi

Referensi API

Cara menggunakan

dari html

Anda akan membutuhkan:

• Tiga.js membangun
• Gltfloader
• Build @pixiv/tiga-vrm
  • .module adalah ESM, jika tidak itu UMD dan menyuntikkan modulnya ke Global THREE
  • .min yang diminifikasi (untuk produksi), jika tidak itu tidak diminifikasi dan dilengkapi dengan peta sumber

Anda dapat mengimpor semua dependensi melalui CDN seperti 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 >

Lihat dokumen Three.js jika Anda belum terbiasa dengan Three.js: https://threejs.org/docs/#manual/en/introduction/creating-a-scene

Lihat contoh untuk kode lengkap: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/basic.html

melalui NPM

Instal three dan @pixiv/three-vrm :

npm install three @pixiv/three-vrm

Gunakan dengan WebGpurenderer

Mulai dari V3, kami memberikan kompatibilitas WebGPurenderer. Untuk menggunakan tiga-VRM dengan WebGPurenderer, tentukan MToonNodeMaterial yang kompatibel dengan WebGPU untuk opsi materialType dari MToonMaterialLoaderPlugin .

MToonNodeMaterial hanya mendukung tiga.js R167 atau lebih baru. Sistem nodeMaterial tiga.js masih dalam pengembangan, jadi kami dapat mematahkan kompatibilitas dengan versi tiga.js yang lebih lama lebih sering daripada bagian lain dari tiga-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 ...

Lihat contoh untuk kode lengkap: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/webgpu-dnd.html

Berkontribusi

Lihat: Contributing.md

LISENSI

Mit