Three.jsを使ってEveOnlineのStarmapを表示してみた

スクリーンショット 2014-07-21 21.23.02
Javascript
2

Hadoop使って収集したEve onlineのマーケットデータを視覚的にわかりやすく表示するため現在Three.jsと格闘中。

今回はその基礎となるEve onlineのStarmapをThree.jsで再現してみようと思う。

 

まずは、マップデータをEve onlineのデータベースから抜き出す。Eve Onlineのデータベース自体は公開されており、調べればすぐに手に入るので入手方法は割愛。

次のSQLでマップデータの基礎を引っ張ってくる


select * from mapRegions

中に入っているデータはこんな感じ

regionID constellationIDsolarSystemIDsolarSystemNamexyzxMinxMaxyMinyMaxzMinzMaxluminosityborderfringecorridorhubinternationalregionalconstellationsecurityfactionIDradiussunTypeIDsecurityClass
100000012000000130000001Tanoo-8.851079259998058e164.236944396687888e16-4.451352534647966e16-8.85119031484906e16-8.850925647176062e164.236929792748907e164.236964574926392e164.451303635589282e164.451411168978288e160.0157510011110.8583240688484681NULL1323338364984 3802B

全部の中身をみたい方は http://chatora.lolipop.jp/wp-content/files/three.js/three-js-test/data/EveMapData_csv.csv 参照

このデータを使いやすくjsonに変換する。

jsonへの変換はhttp://shancarter.github.io/mr-data-converter/ を使用した

 

次に、表示の星を表示する画像が必要だが、これはGimp2を使ってがんばって自作した。あんまりきれいじゃないので後々に改良したいところ。(完成系のStarMapを拡大するとその適当さがわかります。。。 まあ遠目だとわかんないのでよしとしよ)

 

さて前準備も整ったのでソースを書く。できたソースは下記。


<!DOCTYPE html>

<html>

<head>
    <title>Maptest005</title>
    <script type="text/javascript" src="./libs/three.js"></script>
    <script type="text/javascript" src="./libs/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="./libs/stats.js"></script>
    <script type="text/javascript" src="./libs/dat.gui.js"></script>
    <script type="text/javascript" src="./libs/TrackballControls.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

    <div id="Stats-output">
    </div>
    <div id="WebGL-output">
    </div>
    <script type="text/javascript">
        $(function () {
            var stats = initStats();
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000000);

            var webGLRenderer = new THREE.WebGLRenderer();
            webGLRenderer.setClearColorHex(0x000000, 1.0);
            webGLRenderer.setSize(window.innerWidth, window.innerHeight);

            camera.position.x = 500000000000000000;
            camera.position.y = 500000000000000000;
            camera.position.z = 500000000000000000;

            var trackballControls = new THREE.TrackballControls(camera);
            trackballControls.rotateSpeed = 1.0;
            trackballControls.zoomSpeed = 3.0;
            trackballControls.panSpeed = 1.0;
            trackballControls.noZoom=false;
            trackballControls.noPan=false;
            trackballControls.staticMoving = true;
            var clock = new THREE.Clock();

            $("#WebGL-output").append(webGLRenderer.domElement);

            stars_position = getStarsData();
            createStars(stars_position);
            createAxies();

            render();

            function createStars(starsDatas) {
                var geom = new THREE.Geometry();

                var texture_star = THREE.ImageUtils.loadTexture("./assets2/Stars001.png");
                var material = new THREE.ParticleBasicMaterial(
                {
                    size: 5
                    ,vertexColors: true
                    ,blending: THREE.AdditiveBlending
                    ,map: texture_star
                    ,sizeAttenuation: false //sizeがカメラに影響しない
                    , color: 0xffffff
                    , transparent: true
                });

                for (var p = 0; p < starsDatas.length; p++)
                {
                    var particle = new THREE.Vector3(starsDatas[p].x,starsDatas[p].y, starsDatas[p].z);
                    geom.vertices.push(particle);
                    if(starsDatas[p].solarSystemName == "Jita"){
                        geom.colors.push(new THREE.Color(0xff0000));
                    }else{
                        geom.colors.push(new THREE.Color(0x00ffff));
                    }
                }

                var system = new THREE.ParticleSystem(geom, material);
                scene.add(system);
            }

            function createAxies(){
                var axes = new THREE.AxisHelper( 100000000000000000 );
                scene.add(axes);
            }

            function render() {
                stats.update();

                var delta = clock.getDelta();
                trackballControls.update(delta);
                requestAnimationFrame(render);
                webGLRenderer.render(scene, camera);
            }

            function initStats()
            {
                var stats = new Stats();
                stats.setMode(0); // 0: fps, 1: ms

                // Align top-left
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.left = '0px';
                stats.domElement.style.top = '0px';

                $("#Stats-output").append(stats.domElement);

                return stats;
            }

            function getStarsData()
            {
                return loadLocalJsonFile("./data/EveMapData_json.json");
            }

            //ローカルのJSONファイルを読み込む
            function loadLocalJsonFile(filepath)
            {
                var result;
                //非同期から同期にする
                $.ajaxSetup({ async: false });
                $.getJSON( filepath , function(json)
                {
                    result = json;
                });
                // 非同期に戻す
                $.ajaxSetup({ async: true });
                return result;
            }
        });

</script>
</body>
</html>

特記事項

  • x,y,z座標いずれも1.0*e16 くらいなのでcameraのpositionもそのくらいになるように調整。
  • 位置関係がわかるようにjita だけ色を赤くしてます。
  • ローカルのjsonファイルを読み込むときに、ファイル読み込む順が最後になってしまうので、読み込むときだけ非同期から同期にしてます。
  • 動き回れるようにTrackballControls.jsを使ってます。

 

こんな感じでできたのが下記

 

スクリーンショット 2014-07-21 21.23.02

次のページで実際に動かして確認できます。

Three.jsを使ってEveOnlineのStarMapを表示した

左クリック、右クリック、マウスホイールで自由に動くことができます。
なお、うまく表示できない場合はIE,Fireforx,Chrome等で試してください。
(Safaliだとうまくいかない。)

Thiѕs is ѵery fascinating, You’re an overly professiоnal Ƅlogger.
I’ve joined youг feed and siit up for looking for extгa of yoᥙr great post.
Aⅼsо, I have shared your web ssite in my sociaⅼ networks

2件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

AWS
Docker
ECS+ALBの動的ポートマッピングでダウンタイムのないデプロイを試してみた

はじめに 少し前に個人で作成しているWebサービスのインフラにDockerを使い始めました。 複数台 …

スクリーンショット 2016-08-16 0.43.10
AngularJS
クライアントAngularJS サーバーサイドRails5 におけるOmniauth 認証を試してみる

去年にEOPESを公開してから1年半。 初めての外部公開サービスだったが、ソースは結構ごり押し部分も …

スクリーンショット 2016-01-09 20.02.08
Ruby on Rails
Capistrano3を利用してBitbucketプライベートリポジトリにあるRailsアプリをデプロイしてみた

Railsアプリを配置する際、毎回手作業で頑張って配置してきたが、そろそろ自動デプロイを・・・ とい …