@pixiv/three-vrm sample

## Introduction 3DCG and VR technology are used in various places and become familiar with us. And the same phenomenon occurs on web browser. Today I introduce VRM and how to display it with React and @pixiv/three-vrm. ### What is VRM? VRM is a file format for handling 3D humanoid avatar (3D model) data for VR applications. If you have an avatar that conforms to VRM, you can enjoy various applications that require a 3D avatar. ### What is @pixiv/three-vrm? {% github pixiv/three-vrm no-readme %} @pixiv/three-vrm is a JavaScript library to use VRM on Three.js. This enables to render VRM on web applications like [VRoid Hub](https://hub.vroid.com/). ![VRoid Hub](https://i.gyazo.com/e544321e8d12b5c0011e794bf9b043e3.gif) ## Prepare VRM At first, you need to download VRM from [VRoid Hub](https://hub.vroid.com/). 1. Search VRM models by tags. 2. Select your favorite model. 3. Move to model page and download by clicking "Use this model" ## Set up project ```console $ npx create-react-app three-vrm-sample $ cd three-vrm-sample/ $ yarn add @pixiv/three-vrm three react-three-fiber ``` ```html @pixiv/three-vrm sample

``` ```jsx import React from 'react' import ReactDOM from 'react-dom' const App = () => null ReactDOM.render(, document.getElementById('root')) ``` ## Add VRM Loader We can load VRM with `GLTFLoader` because VRM is similar format to GLTF. ```js import { VRM } from '@pixiv/three-vrm' import { useRef, useState } from 'react' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' const useVrm = () => { const { current: loader } = useRef(new GLTFLoader()) const [vrm, setVrm] = useState(null) const loadVrm = url => { loader.load(url, async gltf => { const vrm = await VRM.from(gltf) setVrm(vrm) }) } return { vrm, loadVrm } } ``` ## Display VRM with react-three-fiber [react-three-fiber](https://github.com/react-spring/react-three-fiber) is a React renderer for Three.js. You can use Three.js declaratively with it. I use the following three elements this time. - `

saitoeku3

How to display 3D humanoid avatar with React

Join Our Newsletter. No Spam, Only the good stuff.