three vrm 다운로드 - three vrm 소스 코드 다운로드

three vrm

기타 소스코드

v3.1.6

다운로드

`@pixiv/three-vrm`

3.js에서 VRM을 사용하십시오

3VRM

Github 저장소

예

문서

API 참조

사용 방법

HTML에서

당신은 필요할 것입니다 :

3.js 빌드
Gltfloader
@pixiv/3-vrm의 빌드
- .module Ones는 ESM입니다. 그렇지 않으면 UMD이며 모듈을 Global 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 >

3.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 호환성을 제공합니다. WebGpurenderer와 함께 3VRM을 사용하려면 MToonMaterialLoaderPlugin 의 materialType 옵션을 위해 WebGPU 호환 MToonNodeMaterial 지정하십시오.

MToonNodeMaterial 은 3.js r167 이상을 지원합니다. 3.JS의 Nodemateial 시스템은 여전히 개발 중이므로 3VRM의 다른 부분보다 3.js의 이전 버전과 호환성을 깨뜨릴 수 있습니다.

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