Grasshopper Three.js

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

是非、覗いてみてください。→ https://gallery-txgc.vercel.app/

夢は大きく. 対象コースが¥1,600から。

-Grasshopper, Three.js
-, , ,