three vrm下载 - three vrm源代码下载

three vrm

其他源码

v3.1.6

下载

`@pixiv/three-vrm`

在three.js上使用VRM

三vrm

GitHub存储库

例子

文档

API参考

如何使用

来自HTML

您将需要：

三个。构建
GLTFLOADER
@Pixiv/三vrm的构建
- .module是ESM，否则它是UMD，并将其模块注入全局THREE
- .min

您可以像JSDELIVR一样通过CDN导入所有依赖项。

 < 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 >

如果您还不熟悉三个。

请参阅完整代码的示例：https：//github.com/pixiv/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兼容性。要与WebGpurender一起使用三vrm，请指定与MToonMaterialLoaderPlugin的materialType选项指定互助的MToonNodeMaterial 。

MToonNodeMaterial仅支持3.JS R167或更高版本。三个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 ...