@pixiv/three-vrm
Use VRM en tres.js
Repositorio de Github
Ejemplos
Documentación
Referencia de API
Necesitarás:
.module
THREE
.min
se minifican (para la producción), de lo contrario no está minificado y viene con mapas de origenPuede importar todas las dependencias a través de CDN como 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 >
Vea el documento tres.js si aún no está familiarizado con tres.js: https://threejs.org/docs/#manual/en/introduction/creating-a-scene
Vea el ejemplo del código completo: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/basic.html
Instale three
y @pixiv/three-vrm
:
npm install three @pixiv/three-vrm
A partir de V3, proporcionamos compatibilidad con WebGpurenderer. Para usar tres VRM con WebGpurenderer, especifique el MToonNodeMaterial
compatible con WebGPU para la opción materialType
de MToonMaterialLoaderPlugin
.
MToonNodeMaterial
solo admite tres.js R167 o posterior. El sistema nodematerial de tres.js todavía está en desarrollo, por lo que podemos romper la compatibilidad con versiones más antiguas de tres.J con más frecuencia que otras partes de tres 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 ...
Vea el ejemplo del código completo: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/webgpu-dnd.html
Ver: contribuyendo.md
MIT