0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Three.js】ReactThreeFiber + Nextが更新されたので使ってみる

Posted at

はじめに

Windows11
Nodejs18.15.0

1日1件記事を書こうと思っていた時代が僕にもありました。
最近さぼりがちです。

今日はSougenでUtsubo社で有名なRenaudさんのリソースである新しくなったreact-three-nextを使ってみようと思います。

成果物
[Vercel]
https://shoslabo.vercel.app/
[Github]
https://github.com/foasho/shoslabo

やってくで~

yarn create r3f-app next sample -ts
yarn run dev

r3f-next.gif

なかなかかわいい。

ちょうどR3Fの遊び場が欲しいと思ったので
Vercelでホスティングして、しぇいだーでゴリゴリあそんでみます。

あぁ、ちなみにデフォルトtsエラーが多くあるので、各自{/** @ts-ignore **/}いれるなりしないとビルド失敗しますよ。
Vercelが素晴らしすぎる。最近思考停止でGithubPushしてます。

前まではNextのWindowsのバグがあったのですが、
13.4のアプデでなくなりましたね。よかったです。

シェーダの読み込みもできるし、
シーンの差し替えも1つのCanvasを利用して遷移と再利用しているのでパフォーマンスが素晴らしいですね。

Webサイトで活用するようなスクロールの処理もデフォルトで利用できるのはいいですね。

次はR3Fの遊びついでにシェーダでいろいろ書いてみます。

では。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?