Grasshopperで作成したモデルをThree.jsを使用して、ブラウザで見ることができるGalleryにしてみました。特に何かを解説する記事ではないですが、ご興味あれば覗いてみてください。
こちらから！
概要
使っている言語などは以下になります。
- Next.js 12.3.1
- React 18.2.0
- Three.js 0.145.0
- Typescript 4.8.4
- Chakra-ui 2.3.5
- Vercel
将来的にページを増やしていくかなと思いNext.jsを使用しています。
Three.jsはReact Three Fiberを使った方が相性はいいかなと思いますが、これを作った時に私がR3Fを使えていなかったので、通常のThree.jsを使用しております。
ボタンやモーダルはフレームワークChakraUIを使用してます。
デプロイはVercelで行いました。
時に難しいことはしておらず、ボタンを押したらカメラが移動するだけです。
レスポンシブ対応していないので、スマホだとビューが崩れてしまいます。そのうち気が向いたら対応させていこうと思います・・・
だいぶGrasshopper のチュートリアルが増えてきたので、まとめてみました。
是非、覗いてみてください。→ https://gallery-txgc.vercel.app/
