three vrm

@pixiv/three-vrm

Используйте VRM на Three.js

Репозиторий GitHub

Примеры

Документации

Ссылка на API

Как использовать

от html

Вам понадобится:

• Three.js Build
• Gltfloader
• Сборка @pixiv/three-vrm
  • .module - это ESM, иначе это UMD и вводит свои модули в глобальные THREE
  • .min One Minished (для производства), в противном случае он не минимизирован и поставляется с исходными картами

Вы можете импортировать все зависимости через 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, укажите, что WebGPU-совместимый MToonNodeMaterial для опции materialType MToonMaterialLoaderPlugin .

MToonNodeMaterial поддерживает только Thre.JS R167 или более поздней версии. Система Nodematerial в Three.js все еще находится в стадии разработки, поэтому мы можем нарушать совместимость с более старыми версиями Three.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 ...

См. Пример для полного кода: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/webgpu-dnd.html

Внося

См.: Anplosing.md

ЛИЦЕНЗИЯ

Грань