Blenderで作った3DモデルをThree.jsを使ってWebブラウザ上に表示せてみた日記

ここ最近、WebGLに興味があり、Three.jsやBlenderというものを知りました。
まずはこれらでできることを知ってみたかったので、ChatGPTに頼りつつ、Blenderで作った3DモデルをThree.jsを使ってWebブラウザ上に表示させてみることにしました。
なお、本当にはじめの一歩なので、「仕組み」や「jsの書き方」の詳細はわからずにThree.jsを操作しています。すべてChatGPTが吐き出したコードを貼り付けるのみで実装しています。
なので、この記事では、コードは表記せず、「結果的に表示がどうなったのか？」「手応えはどうか？」という部分を日記的に書き残します。

Blenderで簡単な四角と丸を作りました

こんな感じで、めちゃくちゃ簡単に四角と丸を作り、着色しました。
なんとなくガラスみたいな表面に仕上げました。こうすると、ちょっとBlenderができる風に出来上がるので好きです。

ChatGPTに頼りつつ、Three.jsで表現する

「Blender Three.js Webサイト」などでググった内容と、ChatGPTの言う通りにコードを記述してみました。
すると...

なんかのぺっとしている。

一応出力はできたものの、一番欲しかったガラス感や影が失われています。

これはThree.jsのコード側で影やマテリアル（質感）の設定をしていないためだと思い、ChatGPTにそのへんも表現するようなコードに変更するようお願いしてみました。

なんかいけてきた

よくわからないけど、なんかいけてきた。

ついでにカメラマウスカーソル追従を入れてみた

ドラッグ操作でカメラが動く仕様になっていたので、マウスカーソルの位置でカメラが動くようにできないか、ChatGPTにお願いしてみました。「いけるよ！」との回答。
コードをもらい、追記してみると、以下のようになりました。

なんとなく、できるっぽい。

今回のテストでなんとなくわかったこと

• Blenderの質感（ガラス風・反射など）を持ったままThree.jsに取り込んで表示させるのは、いまの自分には厳しい
• Blenderで作ったものを取り込むのではなく、Three.jsで図形を作って、質感や影などを細かく設定するといけそう（先駆者がたくさんいる）
• マウスカーソル追従など、自分の試したい動きはある程度できそう

結論：楽しい

でも楽しければ、OKです。

なにごとも、興味があり、かつ、新しいことを習得していくのは楽しいです。
個人的に、WebGLを用いた動くWebサイトが大好きで圧倒されるので、自分もそのようなサイトを作れるようにがんばっていければと思います。

将来の自分が見て、「ああ、あのときはこんなことで悩んでたんだな」と思えるように記事に残しました。読んでくださってありがとうございます。