Download three vrm

three vrm

Outro código-fonte

v3.1.6

Baixar

`@pixiv/three-vrm`

Use VRM em três.js

três-VRM

Repositório do GitHub

Exemplos

Documentações

Referência da API

Como usar

de html

Você precisará:

Três.js construir
GLTFLoader
Uma construção de @pixiv/três-vrm
- .module Ones são ESM, caso contrário, é umd e injeta seus módulos em THREE globais
- .min , são minificados (para produção), caso contrário, não é minificado e vem com mapas de origem

Você pode importar todas as dependências via CDN como o 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 >

Veja o documento três.js se você ainda não conhece o Three.js: https://threejs.org/docs/#manual/en/introduction/creating-a-scene

Veja o exemplo para o código completo: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/basic.html

via npm

Instale three e @pixiv/three-vrm :

npm install three @pixiv/three-vrm

Use com WebGPureRender

A partir da V3, fornecemos compatibilidade com o WebGPureRender. Para usar o Three-VRM com o WebGPureRender, especifique o MToonNodeMaterial COMPATÍVEL DE WEBGPU para a opção materialType do MToonMaterialLoaderPlugin .

MToonNodeMaterial suporta apenas três.js R167 ou posterior. O sistema nodematerial de três.js ainda está em desenvolvimento; portanto, podemos quebrar a compatibilidade com versões mais antigas de três.js com mais frequência do que outras partes de três-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 ...