STUDIO TAMA


thumbnail

投稿日:2022-12-10

【Grasshopper - Three.js】Gallery

  • #Three.js

  • #Grasshopper

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

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

目 次