読者です 読者をやめる 読者になる 読者になる

CX's Hatena Blog

はてなブログを使ってみるテスト

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

Windows IE11 WebGL JavaScript Firefox Chrome

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

今回日程 シリーズ構成言語
1日目OpenGL で地球を回してみるテスト C/C++
2日目DirectX で地球を回してみるテスト C/C++
3日目Java 3D で地球を回してみるテスト Java
4日目WebGL で地球を回してみるテスト JavaScript
5日目Three.js で地球を回してみるテスト JavaScript
6日目Babylon.js で地球を回してみるテストJavaScript
7日目gl.enchant.js で地球を回してみるテストJavaScript
8日目PhiloGL で地球を回してみるテストJavaScript
9日目CubicVR.js で地球を回してみるテストJavaScript
最終日Away3D で地球を回してみるテストJavaScript
追加+1Flash 版 Away3D で地球を回してみるテストActionScript
追加+2WPF で地球を回してみるテストC# + XAML
追加+3JavaFX 3D で地球を回してみるテストJava

今回は、JavaScript 向けゲームライブラリ「enchant.js」のプラグインgl.enchant.js」を使ってみました。

f:id:cx20:20140125214611p:plain

0. 事前準備

WebGL に対応したブラウザ(任意のブラウザ)とライブラリ「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>
* {
    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」です。

f:id:cx20:20140125025413j:plain

2. ローカルで実行してみる

ブラウザにて earth.html を開きます。

f:id:cx20:20140125214611p:plain

なぜか、指定していないのに、ライトがあたっているようです(^^;;

3. jsdo.it で実行してみる

参考

■ wise9 › 3D野郎は寄ってたかれ!WebGLでグリグリ遊べるgl_enchant_jsがついにβ公開!

http://wise9.jp/archives/6245

■ Download | enchant.js - A simple JavaScript framework for creating games and apps.

http://enchantjs.com/ja/download-ja/

■ wise9-enchant_js · GitHub

https://github.com/wise9/enchant.js