three vrm Download - three vrm Source Code Download

three vrm

شفرة المصدر الأخرى

v3.1.6

تنزيل

`@pixiv/three-vrm`

استخدم VRM على ثلاثة

ثلاثة فورم

مستودع جيثب

أمثلة

الوثائق

مرجع API

كيفية استخدام

من HTML

سوف تحتاج:

Three.JS بناء
gltfloader
بناء من @pixiv/three-vrm
- .module THREE
- .min

يمكنك استيراد جميع التبعيات عبر CDN مثل 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 >

انظر وثيقة Three.js إذا لم تكن على دراية بـ Three.js بعد: https://threejs.org/docs/#manual/en/introduction/creating-a-scene

راجع مثال الرمز الكامل: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/basic.html

عبر NPM

قم بتثبيت three و @pixiv/three-vrm :

npm install three @pixiv/three-vrm

استخدم مع webgpurenderer

بدءًا من V3 ، نقدم توافق WebGpurenderer. لاستخدام ثلاثة VRM مع WebGpurenderer ، حدد MToonNodeMaterial المتوافقة مع WebGPU لخيار materialType من MToonMaterialLoaderPlugin .

MToonNodeMaterial يدعم فقط ثلاثة. JS R167 أو أحدث. لا يزال نظام المواد الإدراجية لـ Three.JS قيد التطوير ، لذلك قد نقطع التوافق مع الإصدارات الأقدم من ثلاثة. JS بشكل متكرر أكثر من الأجزاء الأخرى من ثلاثة من 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 ...