CubicVR.js で地球を回してみるテスト
○○ で地球を回してみるシリーズ。
今回は、Charles J. Cliffe 氏による CubicVR.js を試してみたいと思います。CubicVR.js は C++ 版の CubicVR 3D Engine の WebGL 版という位置づけのようです。
0. 事前準備
WebGL に対応したブラウザ(任意のブラウザ)とライブラリ「CubicVR.js」を用意します。
WebGL 対応ブラウザ
ライブラリ
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>
- style.css
* { 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」です。
2. ローカルで実行してみる
ブラウザにて earth.html を開きます。
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