Zenn
😎

React+TypeScriptなWebアプリで、"React Three Fiber"の3D表示の最初の一歩。

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

Abstract

こっちの記事で、あえての"React Three Fiber"なしで、3D表示をしてみたけど、使った方が簡単らしい。
ということで、"React Three Fiber"(R3F)で表示してみる。
環境構築～3D表示まで。

結論

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

前提

手順

1.プロジェクト生成 -> VSCodeで開く

めんどいから、プロジェクト雛形をgithubから持ってくる。React+TypeScriptのプロジェクト雛形をgithubに置いとく話。
で、下記コマンドでフォルダ名とか整備する。

フォルダリネームとか
$ ProjectName=react-r3f-1ststep
$ cd ~
$ git clone https://github.com/aaaa1597/React-Ts-Template.git
$ rm -rf React-Ts-Template/.git
$ rm -rf ${ProjectName}
$ mv React-Ts-Template ${ProjectName}

2.生成したプロジェクトの場所でthree.jsをインストール

$ cd プロジェクトのフォルダ
$ npm install
$ npm install --save three
$ npm install --save @types/three
$ npm install --save @react-three/fiber

App.tsxを作っていく

App.tsx
import React from 'react';
import './App.css';
+import { Canvas } from '@react-three/fiber'

function App() {
  return (
-    <div className="App">
+    <div id="canvas-container">
-      hello world!!
+      <Canvas>
+        <ambientLight />
+        <directionalLight />
+        <mesh>
+          <boxGeometry />
+          <meshStandardMaterial />
+        </mesh>
+      </Canvas>
     </div>
  );
}

export default App;

実行


出来た!! けど、ん～。
なんか、three.jsの方が分かりやすいって思うのは僕だけ...？
ambientLightで、環境光源を設定しているのだろう。
directionalLightで、太陽光を設定しているんだろう。
<mesh></mesh>で、3Dオブジェクトを設定しているんだろう。
boxGeometryで、立方体を設定しているんだろう。
meshStandardMaterialで、テクスチャか、色を設定しているんだろう。
ってのは何となくわかるけど...。

色変えたり、大きさ変えたり、回転させたりしたいんだけど、どうすれば。

大きさの変更方法分かった。

boxGeometryタグに、argsの引数で渡せばいいんだけど...。

App.tsx
import React from 'react';
import './App.css';
import { Canvas } from '@react-three/fiber'

function App() {
  return (
    <div id="canvas-container">
      <Canvas>
        <ambientLight />
        <directionalLight />
        <mesh>
-         <boxGeometry />
+         <boxGeometry args={[4, 4, 4]}/>
          <meshStandardMaterial />
        </mesh>
      </Canvas>
     </div>
  );
}

export default App;

これだけだとエラーになる。

なんか、<ambientLight />とか<mesh />とか、ユーザー定義のReactコンポーネントは、小文字始まりだとReact的にでけんらしくって、で、eslintがエラー吐いてたという事らしい。
ふ～。"React Three Fiber"(R3F)さん、ルール守ろうよ。

で、どげんするかというと、.eslintrc.jsのルールの中に、下記を追加する。

.eslintrc.js
    "rules": {
+       "react/no-unknown-property": ['error', { ignore: ['css', "args"] }],
    }

これで、4倍サイズの立方体が表示される。

Discussion