gl.enchant.js で地球を回してみるテスト
○○ で地球を回してみるシリーズ。
今回は、JavaScript 向けゲームライブラリ「enchant.js」のプラグイン「gl.enchant.js」を使ってみました。
0. 事前準備
WebGL に対応したブラウザ(任意のブラウザ)とライブラリ「enchant.js」ならびにプラグインを用意します。
WebGL 対応ブラウザ
ライブラリならびにプラグイン
- enchant.js
- gl-matrix.js
- gl.enchant.js
- primitive.gl.enchant.js
各ファイルの場所について以下階層を参照してください。
\enchant.js-builds-0.8.0.zip │ ├─lang │ │ │ └─ja │ │ enchant.js │ │ │ └─plugins │ gl.enchant.js │ primitive.gl.enchant.js │ └─libs gl-matrix-min.js
1. ソースを作成する
- earth.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello, gl.enchant.js World!</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="enchant.js"></script> <script type="text/javascript" src="gl-matrix-min.js"></script> <script type="text/javascript" src="gl.enchant.js"></script> <script type="text/javascript" src="primitive.gl.enchant.js"></script> <script type="text/javascript" src="earth.js"></script> </head> <body> <canvas id="canvas" width="450" height="450"></canvas> </body> </html>
- style.css
* { margin: 0; padding: 0; border: 0; } body { background: #000; }
- earth.js
enchant(); var game; window.onload = function(){ game = new Game(450, 450); game.fps = 60; game.onload = function(){ var scene = new Scene3D(); var camera = new Camera3D(); scene.setCamera(camera); var sphere = new Sphere(); sphere.scale( 3.2, 3.2, 3,2 ); sphere.mesh.texture = new Texture("earth.jpg"); sphere.z =-10; sphere.rotX = 0; sphere.addEventListener('enterframe', function(e){ this.rotX += 0.01; this.rotation = [ Math.cos(this.rotX), 0, -Math.sin(this.rotX), 0, 0, 1, 0, 0, Math.sin(this.rotX), 0, Math.cos(this.rotX), 0, 0, 0, 0, 1 ]; }); scene.addChild(sphere); }; game.start(); };
コードは今までのサンプルの中で一番短い気がします。
テクスチャの画像ファイルは、いつもの「earth.jpg」です。
2. ローカルで実行してみる
ブラウザにて earth.html を開きます。
なぜか、指定していないのに、ライトがあたっているようです(^^;;
3. jsdo.it で実行してみる
参考
■ wise9 › 3D野郎は寄ってたかれ!WebGLでグリグリ遊べるgl_enchant_jsがついにβ公開!
■ Download | enchant.js - A simple JavaScript framework for creating games and apps.
http://enchantjs.com/ja/download-ja/
■ wise9-enchant_js · GitHub