@react-three/fiber
#Three.js #React #JavaScript #CG
https://gyazo.com/cd0d17e68f4064fb382a19da025ad39a
ReactでThree.js書けるようにするくん
コミュニティではr3fと呼ばれることが多い
実態はReact Renderer
https://github.com/pmndrs/react-three-fiber
GitHubのREADMEにあるExamples見ればだいたい雰囲気わかる
ユーティリティ群の@react-three/dreiを併用するといいよ
code:App.tsx
import './App.css';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
function App() {
return (
<>
<Canvas camera={{ position: 0, 0, 5, fov: 60 }}>
<OrbitControls />
<directionalLight position={1, 2, 3} intensity={1} />
<ambientLight intensity={0.5} />
<mesh position={0, 0, 0}>
<boxGeometry args={1, 1, 1} />
<meshStandardMaterial color={1, 0.5, 0} />
</mesh>
</Canvas>
</>
)
}
export default App;
Hot Module Replacementが平気で効くので、普通にThree.jsを書きたいだけの人も全然導入する価値あると思う
useEffect使ってゴリゴリThree.jsを書くことも普通にできます
Three.js Journeyには、r3fのチャプターが存在し、かなりの分量のレッスンがある