blenderで書いたグラスをThree.jsで読み込んでみた

blenderで書いたグラスをThree.jsで読み込んでみた

こんにちは!

プログラム学習中のdynaです!

この記事は、 blenderで書いたグラスをThree.jsで読みんだ記事です! 


そもそも、blenderって何?

Three.jsって何?って方もいらっしゃると思うので、簡単にサイトを載せておきます~


Blender ⇒ 無料の3DCGソフト。

公式サイト:https://www.blender.org/download/


Three.js ⇒ JavaScriptのライブラリの1つ。WebGLを扱える3Dライブラリ。

公式サイト:https://threejs.org/

 

どちらもデモなど乗っているので、見るだけでも楽しいです!


Three.jsを知りたい方はこの辺の記事もありますので、良かったら読んでみてください(^^)


DEMO

さて、本題に入りまして、今回作成したデモです!

 

See the Pen blenderで書いたglbファイルの読み込み by dyna (@sakudyna) on CodePen.

※表示にちょっと時間がかかります(;’∀’) すみません(-_-;)

 

blender glass
blenderで書いたグラス

↑この画像を表示しています。

マウスをクリックして動かせます。


初めてblenderを使ってみたよ!!
楽しいけど難しい!!


Blenderで書いてみる

まずは書いてみます。

実はここが一番時間かかりました( ;∀;)

 

作ってみたのはこちらの2つ。

Blenderで書いたグラス
Blenderで書いたグラス

Blenderで初めて書いたサンプル
Blenderで書いたサンプル

たくさんググってかいてみたよ~
たのし!!!


使ったblenderのバージョンは、2.9でした!

Blenderは語れるほど上手く扱えないので、割愛させていただきます( ;∀;)


Three.jsへの読み込み方

さあ、three.jsで表示するぞ!!

と思いましたが、どうやって読み込むの~ということで、調査開始( ;∀;)


ということで、備忘録です。


書きだし方 

⇒ Blenderで書いたものを、glbファイル、gltfファイルの形で書き出します。

読み込み方 

⇒ GLTFLoader.js を使ってそのファイルを読み込んで、表示!


glb、gltfファイルへの書き出し

まずはthree.jsで読み込めるように先ほどのBlenderで書いたものを、glb、gltfファイル形式で書き出します。


glbファイル、gltfファイルとは?
3Dモデルやシーンを表現するフォーマットである。
「3DにおけるJPEG」と表現されることも。

 

メニューの「ファイル」⇒「エクスポート」⇒ 「glTF」を選択します。

 

エクスポート設定
エクスポートの設定

 


エクスポートの詳細設定
詳細設定

こんな感じでglbファイルでエクスポートしてみます。

three.jsに GLTFLoader.js を読み込みます

出力したファイルを、 GLTFLoader.js を使って読み込みます。


今回、three.jsGLTFLoader.js をこんな感じで読み込みをしています。

 

エラーが続出、読み込みできなくて地味に時間かかりました( ^ω^)・・・
CORSオリジンエラーとか出まくった・・・

※今回、ググりまくって、unpkgというCDNサービスを発見。

 

ここまでで必要やライブラリの読み込みはできたっぽい!

 

glbファイルの読み込みをする

次は、書き出したglbファイルを読み込みます。

この辺は公式ページを参考に書いてみます。

 

glbファイルは、表示するHTMLと同じ階層に置いておき、読み込ませました。

ここまでくると、表示できます。

 

※codepenでglbファイルを表示するには、githubにファイルをアップして、GitHackというところを経由して表示させてます。

参考サイト:

https://note.com/siouxcitizen/n/nd227aa945deb

このサイトの人、すごい・・・!!!
参考になります。


全体のコード

全体のコードを一応載せておきます。

ここまで読んで下さりありがとうございます。

今度はもっとすごいのを作ってみたい・・・!!


参考にした本↓