CX's Hatena Blog

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

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

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

今回日程 シリーズ構成言語
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

今回は、Charles J. Cliffe 氏による CubicVR.js を試してみたいと思います。CubicVR.jsC++ 版の CubicVR 3D EngineWebGL 版という位置づけのようです。

f:id:cx20:20140127214632p:plain

0. 事前準備

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

1. ソースを作成する

  • earth.html
<!DOCTYPE html>
<html>
<head>
<title>Hello, CubicVR.js World!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="CubicVR.min.js" type="text/javascript"></script>
<script src="earth.js" type="text/javascript"></script>
</head>
<body onLoad="CubicVR.start('auto',webGLStart);">
</body>
</html>
* {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

body {
    background: #000;
}
  • earth.js
function webGLStart(gl, canvas) {
    var sphereMesh = new CubicVR.Mesh({
        primitive: {
            type: "sphere",
            radius: 1,
            lat: 32,
            lon: 32,
            material: {
                diffuse: [0.2, 0.1, 1.0],
                specular: [0.4, 0.4, 0.8],
                textures: {
                    color: "earth.jpg",
                }
            },
            uv: {
                projectionMode: "spherical"
            }
        },
        compile: true,
    });

    var scene = new CubicVR.Scene(canvas.width, canvas.height, 80);
    var sphereObject = new CubicVR.SceneObject(sphereMesh);
    sphereObject.rotation = [0, 0, -90];
    scene.bind(sphereObject);
    scene.camera.position = [0, 0, 1.7];
    scene.camera.target = [0, 0, 0];
    CubicVR.addResizeable(scene);

    CubicVR.MainLoop(function (timer, gl) {
        sphereObject.rotation[0] += 0.5;
        scene.render();
    });
}

テクスチャの画像ファイルは、いつもの「earth.jpg」です。

f:id:cx20:20140125025413j:plain

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

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

f:id:cx20:20140127214632p:plain

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

参考

■ cjcliffe CubicVR.js - GitHub

https://github.com/cjcliffe/CubicVR.js

■ Examples and demos - cjcliffe CubicVR.js Wiki - GitHub

https://github.com/cjcliffe/CubicVR.js/wiki/Examples-and-Demos