必要なパッケージをインストールしていきます．今回はnpm（Node Package Manager）を使っていきます．

「react-three-fiber」のインストール
"React Three Fiberは，Reactのコンポーネントでthree.jsの3次元空間を組み立てて，3Dオブジェクトが操作できるライブラリ"です．ReactでThree.jsを扱うことができ，WebGLのSceneを構築することができます．
React-three-fiberは"r3f"と略して書かれることもあります．

npm install three @react-three/fiber

Three.jsをnpmからインストールします．

npm install --save-dev @types/three

create-react-app：typescriptを扱えるパッケージ

npx create-react-app react-ts-app --template typescript

styled-componentsの利用

npm install --save styled-components

上記でエラーが出る場合は下記を試してみると通るかもしれません．

npm i --save-dev @types/styled-components

VRMを表示するためのCanvasの作成

<Container>
  <Canvas>
    <VRMBox />
  </Canvas>
</Container>

import React, { useRef } from 'react'
import { Mesh } from 'three'
import { useFrame } from 'react-three-fiber'

function VRMBox() {
  const ref = useRef({} as Mesh)
  useFrame(() => (ref.current.rotation.z -= 0.01))

  return (
   <mesh ref={ref}>
      <boxBufferGeometry attach='geometry' />
      <meshBasicMaterial attach='material' color='#ffffff' opacity={1.0} transparent />
    </mesh>
  )
}
export default VRMBox;

OrbitControlの導入

App.tsxのプログラム

<Container>
  <Canvas>
    <VRMBox />
    <OrbitControl />
+   <gridHelper />
  </Canvas>
</Container>

import React, { useRef } from 'react'
import { extend, ReactThreeFiber, useThree, useFrame } from 'react-three-fiber'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
extend({ OrbitControls })

declare global {
  namespace JSX {
    interface IntrinsicElements {
      readonly orbitControls: ReactThreeFiber.Object3DNode<OrbitControls, typeof OrbitControls>
    }
  }
}

function OrbitControl(props: ReactThreeFiber.Object3DNode<OrbitControls, typeof OrbitControls>) {
  const {
    camera,
    gl: { domElement }
  } = useThree()
  const controls = useRef({} as OrbitControls)
  useFrame(() => controls.current.update())
  return <orbitControls {...props} ref={controls} args={[camera, domElement]} />
}
export default OrbitControl;

pixiv/three-vrmのダウンロード

npm install three @pixiv/three-vrm

codeSandbox

コマンドプロンプトからyarn経由で導入

yarn add -D three react-three-fiber @pixiv/three-vrm @types/three

VRMSchema

VRMSchema has been removed.

Instead, we have a new package @pixiv/types-vrm-0.0, which provides the type definition of the VRM0.0 schema.

Also, there are type definition packages of VRM1.0 schema such as @pixiv/types-vrmc-vrm-1.0.

import type * as V1VRMSchema from '@pixiv/types-vrmc-vrm-1.0';

const extension = json.extensions?.['VRMC_vrm'] as V1VRMSchema.VRMCVRM | undefined;

強制的にバージョンを下げる

npm i -S three @pixiv/three-vrm@0.3.3 --force