Away3D で地球を回してみるテスト
○○ で地球を回してみるシリーズ。
最終日は、最近話題!?の Adobe 社の Away3D を試してみたいと思います。
0. 事前準備
WebGL に対応したブラウザ(任意のブラウザ)とライブラリ「Away3D」を用意します。
1. ソースを作成する
- earth.html
<!DOCTYPE html> <html> <head> <title>Hello, Away3D World!</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="Away3D.next.min.js"></script> <script type="text/javascript" src="earth.js"></script> </head> <body> </body> </html>
- style.css
* { margin: 0; padding: 0; border: 0; overflow: hidden; } body { background: #000; }
- earth.js
var view3d; var image; var mesh; function init() { image = new Image(); image.onload = onLoadImage; image.src = "earth.jpg"; } function onLoadImage() { view3d = new away.containers.View3D(); view3d.width = window.innerWidth; view3d.height = window.innerHeight; var ts = new away.textures.HTMLImageElementTexture(image, false); var material = new away.materials.TextureMaterial(ts); var geometry = new away.primitives.SphereGeometry(450,450,100); mesh = new away.entities.Mesh(geometry, material); view3d.scene.addChild(mesh); var raf = new away.utils.RequestAnimationFrame(tick, this); raf.start(); } function tick(time) { mesh.rotationY -= 0.5; view3d.render(); } window.onload = init;
サンプルコードについては、こちらを参考にさせて頂きました。
テクスチャの画像ファイルは、いつもの「earth.jpg」です。
2. ローカルで実行してみる
ブラウザにて earth.html を開きます。
3. jsdo.it で実行してみる
参考
■ away3d/away3d-core-ts - GitHub
https://github.com/away3d/away3d-core-ts
■ away3d/away3d-examples-ts - GitHub
https://github.com/away3d/away3d-examples-ts
■ 2014年はHTML5の3D表現を身につけよう!簡単なJSで始めるWebGL対応Away3Dチュートリアル ― 第1回入門編 | ICS LAB