Babylon.js で地球を回してみるテスト
○○で地球を回してみるシリーズ。
今回は、MS の中の人による WebGL ライブラリ「Babylon.js」を用いてみたいと思います。
0. 事前準備
WebGL に対応したブラウザ(任意のブラウザ)とライブラリ「Babylon.js」を用意します。
WebGL 対応ブラウザ
ライブラリ
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; }; }
ちゃんと確認した訳ではないですが、コード量としては、Three.js と、それ程、変わらない感じです。
ちなみに、テクスチャの画像ファイルですが、前回の「earth.jpg」
を、そのまま使ってみたところ、
と、謎の惑星になってしまいました(^^;;
とりあず、90度回転+左右反転したところ、見覚えのある惑星が表示されるようになりました。
これが、正しいのか、よく分かっていませんが。。。
2. ローカルで実行してみる
ブラウザにて earth.html を開きます。
3. jsdo.it で実行してみる
はてなブログが IE10 の互換性モードを指定している為、WebGL が表示できないようです。IE11 の場合は、別ウィンドウで開いてみてください。
参考
■ Babylon Engine for HTML5
■ BabylonJS_Babylon.js · GitHub