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

CX's Hatena Blog

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

Away3D で地球を回してみるテスト

Windows IE11 WebGL JavaScript HTML5 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

最終日は、最近話題!?の Adobe 社の Away3D を試してみたいと思います。

f:id:cx20:20140128225428p:plain

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>
* {
    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」です。

f:id:cx20:20140125025413j:plain

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

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

f:id:cx20:20140128225428p:plain

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

http://ics-web.jp/lab/archives/1129