ReactでVRMを使うための準備
必要なパッケージをインストールしていきます.今回は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
この記事が気に入ったらサポートをしてみませんか?