X3Dに切り替えたらいろいろ困った話

3Dモデルを作る動機が変わってきて

📅 2019年12月22日

「ブラウザで3Dモデルを見るならThree.jsでしょ」と思い込み、このサイトでもThree.jsを使って来ましたが、別ライブラリでもいけると知ってそっちに切り替えました。

x3d出力用モデル

最初は漫画の下描き用のつもりだった

筆者は1980年代半ば頃からPCスペシャリストとして勤めてきました。広く浅くパソコンを知っていたのでたいていの業務にすぐに対応でき、会社員時代はそれが強味になっていました。しかしながら会社員を辞めてからは「広く浅く」がアダになり、たっぷりの時間に何をやっていいか分からない状態に陥りました。なにしろ「パソコンを使えば何でもできる！」みたいな気持ちになり、CG・ビデオ編集・音声認識・パソコン修理・トレーニング・AIプログラミング…など少し興味があった分野をちょこちょこ齧ってはすぐ飽きるということの繰り返しになってしまいました。

子供の頃は漫画家になりたかったこともあって「じゃあモデルを作って描画に活かしてみようか」といちおうの方向を定め、2019年７月からぼちぼちサイトにモデルを載せるようになりました。

漫画の下描きならモデルに色を付ける必要はないのだけど、BlenderのUVマッピングやテクスチャペイントをいじっているうちに色付きモデルそのものが可愛くなり、下描き用ではもったいないと思うようになりました。

モデル作りの目標が定まった

それで３年前に買ってそのままにしてあった3Dプリンタ組み立てキットに取り組み始め、「早く試作品を出力したいな」→「モデルデータはネットからダウンロードできるけど自作のがいいな」→「なるべく楽にモデリングできないかな」→「AoIとBlenderの組み合わせなら良さげ」と考えが進み、最終的に印刷用モデルの出力を目標と定めて、練習を始めました。

石膏プリントなら色もあり

プリンタの組み立て作業場所が茶の間から離れたところにあり、寒くなってからは作業が滞りがちになりました。組み立てを完成してもちゃんと動くかどうかわからないし、「とにかくモデルデータがなければ始まらないよね」とモデリングに夢中になり、組み立ては再び放置。色付きモデルの印刷は専門サービスが使えるのでShapewaysのサービスを調べるようになりました。チュートリアルによると「X3D形式、2048x2048のビットマップでアップロードしてね」とあります。

Blender → X3Dでいろいろあった

BlenderからX3Dファイルがエクスポートできるし、x3domのサイトからJavascriptとCSSがダウンロードできるので、自サイトでのモデル表示も簡単だろうなー♪とワクワクしながら始めてみると…。

あにはからんや。主に３つの問題で煮詰まりました：

  1. 背景が真っ黒
  2. テクスチャが出ない
  3. せっかくだからナビボタンを付けたいけれど、<Viewpoint>がさっぱり分からない

ググってググってまたググり…ようやくモデルが表示できるようになりました。

   

背景が真っ黒

Blenderから出力されたX3Dファイルを一部修正します。<Scene>要素内の<Background>で指定されている値がほぼ０なので黒くなっているようです。今のところ背景の色は指定しないのでコメントアウトしておきました。

<Scene>
    <NavigationInfo headlight="true"
                visibilityLimit="0.0"
                type='"EXAMINE", "ANY"'
                avatarSize="0.25, 1.75, 0.75"
                />
    <!-- Background DEF="WO_World"
                groundColor="0.051 0.051 0.051"
                skyColor="0.051 0.051 0.051"
                / -->

テクスチャが出ない

<Shape>要素内の<Appearance>でテクスチャのファイル名とパスを指定する要素が欠けていたので補います。MaterialやTextureTransformはなくてもOKのようですが、XMLファイルはあまり手作業でいじりたくないのでそのままにしておきます。

<Shape>
    <Appearance>
        <Material DEF="MA_Default_OBJ_001"
            diffuseColor="0.800 0.800 0.800"
            specularColor="0.401 0.401 0.401"
            emissiveColor="0.000 0.000 0.000"
            ambientIntensity="0.000"
            shininess="0.500"
            transparency="0.0"
            />

            <!-- Blender2.81アドオンで欠けている情報 -->
            <ImageTexture DEF="texture.png" url='"texture.png" "/asset/2019/12-22/"' />
            <TextureTransform
                translation="0.000000 0.000000"
                scale="1.000000 1.000000"
                rotation="0.000000"
                />
    </Appearance>

<Viewpoint>がさっぱり分からない

モデル表示のためのHTMLコードで前後左右および真上・真下からの視点を指定できるようですが、<Viewpoint>のorientationプロパティの数値で苦しみました。訳はわからないけど下記のようにコーディングすると思い通りに動きました。

<div class="myx3d">
<X3D>
    <Scene DEF='scene'>
        <Viewpoint id="front" position="0 0 5" orientation="0 1 0 0" description="Camera-F"></Viewpoint>
        <Viewpoint id="back" position="0 0 -5" orientation="0 1 0 3.14" description="Camera-Ba"></Viewpoint>
        <Viewpoint id="left" position="-5 0 0" orientation="0 1 0 -1.57" description="Camera-L"></Viewpoint>
        <Viewpoint id="right" position="5 0 0" orientation="0 1 0 1.57" description="Camera-R"></Viewpoint>
        <Viewpoint id="top" position="0 5 0" orientation="1 0 0 -1.57" description="Camera-T"></Viewpoint>
        <Viewpoint id="bottom" position="0 -5 0" orientation="1 0 0 1.57" description="Camera-Bo"></Viewpoint>
        <Transform>
          <inline url="/asset/2019/12-22/kokeshi.x3d"> </inline>
        </Transform>
    </Scene>
</X3D>
<button onclick="document.getElementById('front').setAttribute('set_bind','true');"> F </button>
<button onclick="document.getElementById('back').setAttribute('set_bind','true');"> B </button>
&nbsp;
<button onclick="document.getElementById('left').setAttribute('set_bind','true');"> L </button>
<button onclick="document.getElementById('right').setAttribute('set_bind','true');"> R </button>
&nbsp;
<button onclick="document.getElementById('top').setAttribute('set_bind','true');"> Top </button>
<button onclick="document.getElementById('bottom').setAttribute('set_bind','true');"> Bottom </button>
</div>

さてさて。このkokeshi.x3dはShapewaysで無事プリントアウトできるのでしょうか。

△

Graphics 
3d 

関連記事