こんにちは。プログラミング初心者のSarasaです。
Reactを使い慣れてくるとライブラリの豊富さに驚かされますよね。
やりたかったあの動作がこのライブラリなら簡単にできちゃう・・！
そろそろ3Dアニメーションに手を出したいな・・と思った頃、
react three fiberと出会ってしまいました。
※こちらは筆者がエラーコードに悪戦苦闘する様子を記載した記事となります。
「いや、そこ忘れちゃダメじゃない？？」と突っ込みたくなるポイントが出てくるかと思いますが、そこは、、さらっと流していただけると幸いです。オチはあります。
【開発環境】
＜フレームワーク＞
React ver. 18.2.0 (Create-react-app )
＜使用言語＞
JavaScript
CSS
HTML
react three fiberって？？
JavaScriptライブラリのひとつであるThree.jsの記述を、React上で宣言的に記述することを可能としたライブラリ、それがreact three fiberです。
記述量も少なく、読みやすく扱いやすいことも魅力のひとつです。
ではでは、公式に従い早速ライブラリをインストールしていきます。
npm install three @react-three/fiber
また、react three fiberの機能を補完してくれるdreiもセットで入れてあげます。
npm install @react-three/drei
おしゃれなデザインに仕上がってわくわく！のはずだったのに・・？
コードの書き方はこちらを参考にしました。いつもわかりやすく素敵な動画をありがとうございます・・！！
ちょうど趣味の写真を紹介するサイトを作っていたため、おしゃれなページで写真を紹介できれば・・！と思いコードを書いてみました
/** @jsxImportSource @emotion/react */
import {css } from '@emotion/react'
import Header from './compornent/header';
import Footer from './compornent/footer';
import Sidebar from './compornent/sidebar';
import { Image, Scroll, ScrollControls } from '@react-three/drei'
import { Canvas, useThree } from '@react-three/fiber';
function Images() {
const {width,height}=useThree((state)=> state.viewport)
return (
<>
<group>
<Image url="./1.jpg" scale={[1,height,1]} position={[0, 0, 1]} />
<Image url="./2.jpg" scale={[1,6,6]} position={[1.6, 0, 3]} />
<Image url="./3.jpg" scale={[1,3.5,1]} position={[2 ,-height, 2]} />
<Image url="./4.jpg" scale={[1.4, 2, 1]} position={[-1.3,-height,3.2]} />
<Image url="./5.jpg" scale={[1, 1, 1]} position={[-1,0,4]} />
</group>
</>
);
}
function Photoanime() {
return (
<>
<div css={size}>
<Sidebar/>
<Header/>
<Canvas>
<ScrollControls pages={2} damping={3}>
<Scroll>
<Images/>
</Scroll>
<Scroll html>
<div css={font}>
<p>街が、</p>
<p>私の世界を</p>
<p>広げてくれた</p>
</div>
</Scroll>
</ScrollControls>
// </Canvas>
<Footer/>
</div>
</>
)
}
const size =css({
backgroundColor:'aliceblue',
width:'100vw',
height:'100vh',
margin:'0',
padding:'0',
display: 'flex',
flexFlow: 'column',
minHeight: '100vh'
})
const font =css({
fontFamily: 'Noto Sans JP',
fontSize: '4em',
fontWeight: '400',
letterSpacing: '0.1em',
lineHeight: '0.5em',
margin: '0',
padding: '0',
position:'absolute',
top:'30vh',
left:'1.5em',
flexFlow: 'column',
display: 'flex',
whiteSpace: 'nowrap',
})
export default Photoanime
また、今っぽく「Now Loading・・」も入れたかったので、
の後にPhotoanime.jsで作成した下記
が表示されるようCompornantを組み合わせていきます（この過程は本当にわくわくが止まらない・・！！
npm startでローカル上での動作を確認したのち、npm run buildして本番環境に移行します。
恒例の真っ白ページ
過去の記事を読んでくださった方はお察しかと思いますが、またしても真っ白ページに出くわします。。
しかも今回は困ったことに
が表示されてからの真っ白ページだったので、私を悩ませたRouterのせいではないようです。
ルーティングに問題がないということは、react three fiber周辺が原因になっているはず。ひとまず、
- 「Now Loading・・」と「Hello world!」のみのCompornentを繋げてみる
→表示される - 「Hello world!」を直接Routerに繋ぐ→表示される
-
Photoanimeを直接Routerに繋ぐ→表示されない
これらの検証の結果、仮設の通りreact three fiber周辺に問題があることがわかりました。また、ローカルではきちんと表示されていることから、buildの過程に問題があることは言うまでもありません。
そこで、buildの過程を観測できるVercelを活用してみることにしました。
おや？インストールされていないライブラリが・・？
それでは、Vercelでbuildの過程を見てみます。
warningしかありませんね。
そりゃあbuild失敗するわけだ。。
react three fiber周辺に着目してみると、
three@・・？そういえばこの子はまだimportしていなかったような・・？
ここはひとまずpakage.jsonを確認してみます。
"dependencies": {
"@emotion/react": "^11.10.4",
"@react-three/drei": "^9.32.4",
"@react-three/fiber": "^8.8.5",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"normalize.css": "^8.0.1",
"react": "^18.2.0",
"react-burger-menu": "^3.0.8",
"react-dom": "^18.2.0",
"react-responsive": "^9.0.0",
"react-router-dom": "^6.4.0",
"react-scripts": "5.0.1",
"react-spinners": "^0.13.4",
"react-spring": "^9.5.4",
"web-vitals": "^2.1.4"
},
たしかにthreeが見当たらない。。
ん？？でも以前npm install three @react-three/fiberをした気がしたのだけれど、、、。
念のためターミナルを確認します。
一見うまくいっているような、、
うまくいっていませんでした。
@react-three/fiber、 @react-three/dreiはインストールされているので、
npm install threeを試してみます。
えい！
ちゃんとインストールできたよ・・！
念のためpakage.jsonを再度確認します。
"dependencies": {
"@emotion/react": "^11.10.4",
"@react-three/drei": "^9.32.4",
"@react-three/fiber": "^8.8.7",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"normalize.css": "^8.0.1",
"react": "^18.2.0",
"react-burger-menu": "^3.0.8",
"react-dom": "^18.2.0",
"react-responsive": "^9.0.0",
"react
-router-dom": "^6.4.0",
"react-scripts": "5.0.1",
"react-spinners": "^0.13.4",
"react-spring": "^9.5.4",
"three": "^0.145.0", //threeが追加されました//
"web-vitals": "^2.1.4"
},
ちゃんと追加されています。
改めてnpm run buildしてみます。
そこまで表示されるのはわかっているんだ。。
さあ。。
きました。
さようなら真っ白ページ・・！！
なぜthreeがインストールされていなかったのか？？
これについては検証中なのですが、恐らくCreate-react-appで環境構築していたのが原因なのではないか？？と考えています。コマンドひとつで簡単に環境構築できるものの、webpackと比較すると自由度が低い部分があるようなのです。
今回はnpm install three @react-three/fiberを公式からコピペしたのでうまくいくはず、という思い込みがハマってしまった最大の原因でした。また、いずれのサイトもthree.js、 @react-three/fiber、 @react-three/dreiがセットでインストールされていて、three.jsがベースとなっている知識が完全に抜け落ちていました。
「面白そうだから導入しよう！！」だけではなく、それぞれのライブラリの歴史をきちんと勉強する必要があったみたいです。
また、ターミナルのエラー表示をきちんと確認せずに開発を進めてしまった部分も反省すべきポイントだと考えています。
今まで通り「とりあえず手を動かす→ハマる→仮説・検証・調査→成功→反省」は継続しつつ、基礎部分もきちんと固めていければと思っています。
参考ページ
驚くほど簡単に3Dシーンを構築！React Three Fiberを使ってみた
https://liginc.co.jp/587025
Reactで3D表現！react-three-fiberを使ってみよう
https://tamalog.szmd.jp/react-three-fiber/
React-three-fiber is a React renderer for three.js.
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
React×Three.jsで3Dスクロールウェブサイトを作ってみよう(react three fiber)
https://www.youtube.com/watch?v=J9t9Vmw6xSQ
Vercel https://vercel.com/home