Babylon.js で地球を回してみるテスト

○○で地球を回してみるシリーズ。

今回	日程	シリーズ構成	言語
	１日目	OpenGL で地球を回してみるテスト	C/C++
	２日目	DirectX で地球を回してみるテスト	C/C++
	３日目	Java 3D で地球を回してみるテスト	Java
	４日目	WebGL で地球を回してみるテスト	JavaScript
	５日目	Three.js で地球を回してみるテスト	JavaScript
⇒	６日目	Babylon.js で地球を回してみるテスト	JavaScript
	７日目	gl.enchant.js で地球を回してみるテスト	JavaScript
	８日目	PhiloGL で地球を回してみるテスト	JavaScript
	９日目	CubicVR.js で地球を回してみるテスト	JavaScript
	最終日	Away3D で地球を回してみるテスト	JavaScript
	追加+1	Flash 版 Away3D で地球を回してみるテスト	ActionScript
	追加+2	WPF で地球を回してみるテスト	C# + XAML
	追加+3	JavaFX 3D で地球を回してみるテスト	Java

今回は、MS の中の人による WebGL ライブラリ「Babylon.js」を用いてみたいと思います。

f:id:cx20:20140125025416p:plain

0. 事前準備

WebGL に対応したブラウザ（任意のブラウザ）とライブラリ「Babylon.js」を用意します。

WebGL 対応ブラウザ
- IE 11
- Firefox 26.0
- Chrome 32
ライブラリ
- Babylon.js

1. ソースを作成する

earth.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello, Babylon.js World!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas" width="465" height="465"></canvas>
<script type="text/javascript" src="earth.js"></script>
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

body {
    background: #000;
}

earth.js

if (BABYLON.Engine.isSupported()) {
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);
    var sphere = BABYLON.Mesh.CreateSphere("sphere", 30, 1, scene);
    var material = new BABYLON.StandardMaterial("default", scene);
    material.diffuseTexture = new BABYLON.Texture("earth.jpg", scene);
    material.emissiveColor = new BABYLON.Color3(1.0, 1.0, 1.0);
    sphere.material = material;
    scene.clearColor  = new BABYLON.Color3(0.0, 0.0, 0.0);
    
    var renderLoop = function () {
        engine.beginFrame();
        scene.render();
        engine.endFrame();
        BABYLON.Tools.QueueNewFrame(renderLoop);
    };
    
    BABYLON.Tools.QueueNewFrame(renderLoop);
    
    var alpha = 0;
    sphere.scaling.x = 7.0;
    sphere.scaling.y = 7.0;
    sphere.scaling.z = 7.0;
    scene.beforeRender = function() {
        sphere.rotation.y = alpha;
        alpha += 0.01;
    };
}