react-three-fiberを使う

[ryo-i]

react-three-fiber https://docs.pmnd.rs/react-three-fiber/getting-started/introduction https://www.npmjs.com/package/@react-three/fiber https://github.com/pmndrs/react-three-fiber

[ryo-i]

react-three-fiberインストールに手こずった

react-three-fiberインストール npm i @react-three/fiber したら依存エラー、、 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree React 18にする必要があるようだ npm ERR! Could not resolve dependency: npm ERR! peer react@">=18.0" from @react-three/fiber@8.9.1

パッケージの最新バージョンのチェック ncu package.jsonの更新 ncu -u 最新バージョンインストール npm install https://qiita.com/sugurutakahashi12345/items/df736ddaf65c244e1b4f また依存エラー npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree

パッケージの中で古いバージョンしか対応していない --legacy-peer-depsを追加する npm install --legacy-peer-deps https://qiita.com/koh97222/items/c46d1ef2a63b92bb6c15

react-three-fiberインストール npm i @react-three/fiber 成功！

[ryo-i]

npm run devがSyntaxErrorになった showAll: args["--show-all"] ?? false, next.js といってるけどエラー箇所はNext.jsのコアな場所のファイル…

nodeのバージョンをあげないといけない？ https://qiita.com/dtakkiy/items/18847ec32580ac8d210e

今の推奨は18.12.1か。だいぶ進んでる node -vはv12.14.1だった https://nodejs.org/ja/

node.jsとnpmを上げる https://parashuto.com/rriver/tools/updating-node-js-and-npm $ npm install -g n nをグローバルにインストール $ n --stable 推奨版のバージョン確認 $ n stable 推奨版インストール node -vで18.12.1になる

npmアップグレード $ npm update -g npm エラーが変わらないのでローカルもアップグレード $ npm update https://qiita.com/m_hirosawa0228/items/547af36c8b180be42b77

localは起動するようになったが画面は真っ白、、

先日のncu でNext.jsを13になった 13ではLinkの書き方を変えないといけない？ https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor npx @next/codemod new-link .やってみたがエラーは変わらず

消したらlocalでページが表示された！ https://nextjs.org/docs/api-reference/next/link

[ryo-i]

こちらのコメットは #7 の間違いだった 3Dモデルを読み込む

[ryo-i]

useframe() https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe

アニメーションのuseFrame()を設定したらというエラー Uncaught Error: R3F: Hooks can only be used within the Canvas component!

useFrame()を適用するには子コンポーネントが必要 https://stackoverflow.com/questions/65559450/react-three-fiber-hooks-can-only-be-used-within-the-canvas-component

[ryo-i]

PerspectiveCameraの設定 https://docs.pmnd.rs/react-three-fiber/tutorials/v8-migration-guide#manual-camera-manipulation

react-three/dreiが必要 https://www.npmjs.com/package/@react-three/drei npm i @react-three/drei

設定方法 https://www.tabnine.com/code/javascript/classes/react-three-fiber/perspectiveCamera https://zenn.dev/takasing/articles/react-three-fiber-orbit-controls-camera