X3DOMで30行で作る3次元立体「地球儀」「木星義」小惑星「ケレス儀」

タイトルが、同義反復してますが（笑）

前回、Mayaviから出力した3D画像をブログ上で動かしてみましたが、

memomemokun.hateblo.jp

その際、Mayaviから出力した地球儀の3D画像が動かせなかったのはどうしてだろうと調べていたのですが、

f:id:memomemokun:20190101160230j:plain

理由がなんとなくわかったというか、Mayaviで出力したX3Dの情報量（PixelTextureの情報量）が大き過ぎるせいじゃないかと、はたと思い浮かび、「x3dom.org」を確認してたら地球儀を簡単に作れる別の方法があったので、再チャレンジ。

ということで、以下のNASAの地球画像から作成てみた動く地球儀が以下。

visibleearth.nasa.gov

この部分はインラインフレームを使用しています。 &amp;amp;amp;amp;lt;img class="hatena-fotolife" title="f:id:memomemokun:20190101160230j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/memomemokun/20190101/20190101160230.jpg" alt="f:id:memomemokun:20190101160230j:plain" data-mce-src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/memomemokun/20190101/20190101160230.jpg" /&amp;amp;amp;amp;gt;

ご説明は、ちょっとお待ちくださいということで、コードは以下ですが、HTMLにX3DのコードとX3DをWebGLにレンダリングするためのJavaScriptのライブラリー「x3dom」を一発呼び出すだけで、簡単に上のような動く地球儀が作れます。

コメントや改行を抜くとわずか３０行ほどのお気軽コード。JavaScriptをグリグリ自前で組まなくても上のよな動作とかは簡単にできてしまうようです。しかも、X3Dのノードは全てDOMに変換されているので達者な方は、JavaScriptでさらにグリグリ動作を追加するのも思いのままのような作りのようです。

コードは以下

<html>
<head>
  <title>X3DOM WeatherPicker Widget</title>
    <meta encoding="utf-8">
            <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script> 
            <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'> 

</head>
<body>
  <div>
    <x3d width='500px' height='500px'>
      <scene>
        <!-- ブラウジングに関する情報の設定 -->
        <navigationInfo speed='.17' headlight='false' type='ANY'></navigationInfo>

        <!-- 視点と視線の設定 centerOfRotation（回転中心）　position（視点の位置）　orientation（視線の方向）　-->
        <Viewpoint centerOfRotation='0 0 0' position='0 4 8' orientation='1 0 0 -.45'></Viewpoint>

        <!-- バックグラウンドカラー　-->
        <Background skyColor='1.0 1.0 1.0'></Background>


        <!-- 地球の定義　-->
        <transform  DEF='Earth_Globe' >

          <!-- 光源の定義　-->
          <DirectionalLight color="1 0 0" direction="1 0 0" intensity='1' ></DirectionalLight>

          <!-- 球面に地球画像のテクスチャを貼り付ける　-->
          <group>
            <shape>
              <appearance>
                <ImageTexture url='world.topo.bathy.200412.3x1024x512.jpg'></ImageTexture>
              </appearance>
              <sphere DEF='obj' radius='2'></sphere>
            </shape>
          </group>

        </transform>

        <!-- 回転イベントの発生間隔　-->
        <timeSensor DEF='interval' cycleInterval='50' loop='true'></timeSensor>

        <!-- 回転動作の定義　keyは、0～1の数字を分割し、動作の回数を決めます。　keyValueは、[x y z rad]でオブジェクトのx軸、y軸、z軸、回転角度となっています。　-->
        <orientationInterpolator DEF='interval_rotation' key='0 0.25 0.5 0.75 1' keyValue='0 1 0 0  0 1 0 1.571  0 1 0 3.142  0 1 0 4.712  0 1 0 6.283'></orientationInterpolator>

        <!-- オブジェクトのアニメーション化 -->
        <!-- 回転イベントの発生間隔　を　回転動作　にバインド　-->
        <ROUTE fromNode='interval' fromField='fraction_changed' toNode='interval_rotation' toField='set_fraction'></ROUTE>

        <!-- 回転動作　を　地球にバインド　-->
        <ROUTE fromNode='interval_rotation' fromField='value_changed' toNode='Earth_Globe' toField='set_rotation'></ROUTE>
      
      </scene>
    </x3d>
  </div>
</body>
</html>