👏
React+TypeScriptなWebアプリで、R3Fのtutorial7.(統計情報の表示)
Abstract
今回の参考はここ(Stats)。
dreiってライブラリを追加でインストールする。
結論
今回の成果物はココ↓
前提
- React+Typescriptの開発環境は構築済 Ubuntu22.04+VSCode+React+TypeScriptの開発環境を構築してみた。
- このスケルトンコードから始める。react-r3f-tutorial004
手順
1.プロジェクト生成 -> VSCodeで開く
めんどいから、このスケルトンコードから始める。react-r3f-tutorial004
で、下記コマンドでフォルダ名とか整備する。
フォルダリネームとか
$ NewProject=react-r3f-tutorial004
$ cd ~
$ rm -rf ${NewProject}
$ git clone https://github.com/aaaa1597/${NewProject}.git
$ rm -rf ${NewProject}/.git
$ cd ${NewProject}
準備
今回は、dreiってライブラリを使うからインストールする。
$ npm install --save three
$ npm install --save @types/three
$ npm install --save @react-three/fiber
$ npm install --save @react-three/drei
App.tsx
まず全体。
App.tsx
import React, {useRef} from 'react';
import './App.css';
import { Canvas, useFrame, MeshProps } from '@react-three/fiber'
+import { Stats } from "@react-three/drei";
+import * as THREE from "three";
const Box = (props: MeshProps) => {
- const ref = useRef<MeshProps>()
+ const ref = useRef<THREE.Mesh>(null!)
useFrame((_, delta) => {
ref.current!.rotation.x += 1 * delta
ref.current!.rotation.y += 0.5 * delta
})
return (
<mesh {...props} ref={ref}>
<boxGeometry />
<meshBasicMaterial color={0x00ff00} wireframe />
</mesh>
)
}
const App = () => {
return (
<div style={{ width: "75vw", height: "75vh" }}>
<Canvas camera={{ position: [3, 1, 2] }}>
+ <Stats />
<ambientLight />
<directionalLight />
<Box position={[-0.75, 0, 0]} name="A" />
<Box position={[0.75, 0, 0]} name="B" />
</Canvas>
</div>
);
}
export default App;
出来た!!
ポイント
統計情報の表示<Stats />
<Stats />を追加するだけで、統計情報(fpsとか)を表示してくれる。
@react-three/dreiをインポートしたらエラー1
地味~に、分からんかった~。
引数に"null!"を設定するだけなんだけどね。。。
App.tsx
- const ref = useRef<MeshProps>()
+ const ref = useRef<THREE.Mesh>(null!)
@react-three/dreiをインポートしたらエラー2
<mesh/>の型違い。MeshPropsを設定してて、ハマった~。
THREE.Meshを設定して解決!!
ホント5万年ぐらい、分からんかった。
React+TypeScriptなWebアプリで、R3Fのtutorial6.(useStateの使い方)
React +TypescriptのWebアプリで、React Three Fiberのtutorialその8。(統計情報の表示2)
Discussion