【Grasshopper - Three.js】Gallery

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 のチュートリアルが増えてきたので、まとめてみました。

是非、覗いてみてください。→