Help us understand the problem. What is going on with this article?

印刷用のShade3Dデータをthree.jsで表示する

印刷用に作成されたShade3Dデータをthree.jsで表示させるために変換してみた時のメモ

出力形式

Shade3Dの対応出力ファイル形式のなかからthree.jsに対応しているFBX,Wavefront OBJ(OBJ)あたりを出力してみてサイズが大きかったので、出力されたFBXをBlenderで開き、glTFに変換

Shade3DでglTFをインポート/エクスポートするプラグインがあるのだが、Standard/Professional版でしか使用できない。(Basic版では使用不可)

BlenderでFBX形式をglTF形式に変換してThree.jsでアニメーションさせる (1/2)

FBXに変換する時に行った作業

  1. 形状名をすべて日本語→半角の英字または数字に変更 001.png
  2. レンダリングブーリアンをしている所はShade3D特有の機能なので、ブール演算をする ブーリアンとは
  3. 法線を反転する
    面の裏返りがある場合、印刷用のレンダリングは問題ないのだが、FBX方式で書き出すと面が抜けてしまう。
    これがかなりあったので、表示オプションの「両面(裏面カラー)」で確認し、色のついた部分を自由曲面などからポリゴンメッシュに変換し、法線の反転の作業をしてゆく(裏返りがあるところがブルーで表示される)
    ポリゴンメッシュの法線を反転する
    002.png

  4. 形状はポリゴンメッシュにする
    自由曲面でもFBXエクスポート時に自動的にポリゴンメッシュに変換されるが、細かすぎたり無駄が多くなることもあるので、Shade3D上でポリゴンメッシュに変換し、あらかじめ最適化

  5. 表面材質はマスターサーフェス化する
    これはデータの方で材質がマスターサーフェス化されていたのでそのまま

fbx形式でエクスポートする時に注意する点

上記の作業で最初書き出しで面が抜けた部分が表示されるようになった。

three.jsで表示

three.js examplesの中のwebgl_loader_gltf.htmlのソースを参照
three.js examples

これから

変換したデータのサイズはobjやfbxのサイズよりは小さくなったものの、glTF+binファイルでかなりの大きさだったためタブレットでは表示できなかった。
より、サイズを小さくする方策を考えたい。

変換した元データが細かいデータだったので、ポリゴンメッシュを粗くするのは表示がかなりに劣化するものの劇的にサイズが減るわけではなかった。DRACO圧縮もためしたものの、objファイルは劇的にサイズが減ったが、mtlファイルを圧縮ファイルに適用する方法がわからなかった。また、glTF 2.0 拡張仕様のDraco拡張もためしたものの、なぜか容量が増えることに。。これはやり方が悪いのか。このあたりももっと調べてみたい。
劇的に3Dデータ容量を削減するDRACO圧縮のデータを自前描画する方法

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした