Zenn
💬

React+TypeScriptなWebアプリで、R3Fのtutorial1.(コンポーネント化)

2023/12/20に公開
React
TypeScript
Three.js
#
r3f
tech

Abstract

今回の参考はここ。
React+TypeScript+React Three Fiberで、コンポーネント化を動かしてみた。

どうでもいいけど、
React Three Fiber、便利って言うんで頑張ってるけど、公式のExamplesって動かんくね？

結論

今回の成果物はココ↓
https://github.com/aaaa1597/react-r3f-tutorial001

前提

手順

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

出来た。
ワイヤフレームが表示された。

React+TypeScriptなWebアプリで、R3Fのtutorial2.(Propsの使い方)

Discussion