🐡
React+TypeScriptなWebアプリで、R3Fのtutorial5.(useFrameの使い方)
Abstract
今回の参考はここ。
「useFrame」を使うと、30～60fpsになるようにいい感じに呼ばれる様になる。
サンプルコードを作ってみた。
結論
今回の成果物はココ↓
前提
- React+Typescriptの開発環境は構築済 Ubuntu22.04+VSCode+React+TypeScriptの開発環境を構築してみた。
- 前回のプロジェクトから始める。React+TypeScriptなWebアプリで、react-three-fiberのtutorialその1
手順
1.プロジェクト生成 -> VSCodeで開く
めんどいから、前回のプロジェクトから始める。React+TypeScriptなWebアプリで、react-three-fiberのtutorialその2
で、下記コマンドでフォルダ名とか整備する。
フォルダリネームとか
$ NewProject=react-r3f-tutorial004
$ cd ~
$ git clone https://github.com/aaaa1597/react-r3f-tutorial002.git
$ rm -rf react-r3f-tutorial002/.git
$ rm -rf ${NewProject}
$ mv react-r3f-1ststep ${NewProject}
App.tsx
まず全体。
App.tsx
-import React from 'react';
+import React, {useRef} from 'reac
import './App.css';
-import { Canvas, MeshProps } from '@react-three/fiber'
+import { Canvas, MeshProps, useFrame } from '@react-three/fiber'
+import { number } from 'prop-types';
const Box = (props: MeshProps) => {
+ const ref = useRef<MeshProps>()
+ useFrame(() => {
+ if(!ref.current) return
+ ref.current.rotation.x += 1 * 0.01
+ ref.current.rotation.y += 0.5 * 0.01
+ })
return (
- <mesh {...props}>
+ <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] }}>
<ambientLight />
<directionalLight />
<Box position={[-0.75, 0, 0]} name="A" />
<Box position={[0.75, 0, 0]} name="B" />
</Canvas>
</div>
);
}
export default App;
「useFrame 」はR3F独自のHookなので'@react-three/fiber'からimportする必要がある。
あとは、useFrame()のなかで、Boxの角度を変更する。
出来た!!
分かれば簡単!!
React+TypeScriptなWebアプリで、R3Fのtutorial4.(マウスイベントの使い方)
Discussion