💬
React+TypeScriptなWebアプリで、R3Fのtutorial1.(コンポーネント化)
Abstract
今回の参考はここ。
React+TypeScript+React Three Fiberで、コンポーネント化を動かしてみた。
どうでもいいけど、
React Three Fiber、便利って言うんで頑張ってるけど、公式のExamplesって動かんくね?
結論
今回の成果物はココ↓
前提
- React+Typescriptの開発環境は構築済 Ubuntu22.04+VSCode+React+TypeScriptの開発環境を構築してみた。
- 前回のプロジェクトから始める。React+TypeScriptなWebアプリで、"React Three Fiber"の3D表示の最初の一歩。
手順
1.プロジェクト生成 -> VSCodeで開く
めんどいから、プロジェクト雛形から始める。React+TypeScriptなWebアプリで、"React Three Fiber"の3D表示の最初の一歩。
で、下記コマンドでフォルダ名とか整備する。
フォルダリネームとか
$ NewProject=react-r3f-tutorial001
$ cd ~
$ git clone https://github.com/aaaa1597/react-r3f-1ststep.git
$ rm -rf react-r3f-1ststep/.git
$ rm -rf ${NewProject}
$ mv react-r3f-1ststep ${NewProject}
App.tsx
App.tsxを修正する。
- Canvas要素に縦横サイズを設定するのかと思ったら、その上のdiv要素に設定する必要があるらしい。何のためのCanvas要素なんだろ?へんなの。
- meshBasicMaterial要素にwireframeをつけてやるとワイヤフレームになる。
App.tsx
function App() {
return (
- <div id="canvas-container">
+ <div style={{ width: "75vw", height: "75vh" }}>
<Canvas>
<ambientLight />
<directionalLight />
<mesh>
<boxGeometry args={[4, 4, 4]}/>
- <meshStandardMaterial />
+ <meshBasicMaterial color={0x00ff00} wireframe />
</mesh>
</Canvas>
</div>
);
}
export default App;
.eslintrc.js
このまま、npm startで動かしても、EsLintのエラーにつかまってしまう。
なので、設定追加。
.eslintrc.js
"rules": {
+ "react/no-unknown-property": ['error', { ignore: ['css', "args", 'wireframe'] }],
}
}
実行
npm start
出来た。
ワイヤフレームが表示された。
Discussion