TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。この記事についてAwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three.jsの検討をオススメします。Three.jsの詳細は以下のサイトを参照ください。Three.js入門サイト以下は、当時の記事の内容を残していますが、現在のフロントエンドの開発環境やブラウザ環境で有用である保証はできません。チュートリアル記事のテーマと目標テーマは「短いコードで、シンプルにAway3Dを使ってみる」で、目標としてチュートリアルの後編では次のようなサンプルの解説を掲載する予定です。どちらもマウスドラッグ/タッチ操作でドラッグ可能です。第1回の本記事では、ライブラリのセットアップから3D画面への表示および球体の回転までを紹介します。手順通りに進めば、10分くらいで作業が完了できると思います。今回の手順は4分ほどのビデオに収録していますので、細かい設定等の不明点があればビデオを参照ください。GitHubからAway3DをダウンロードまずはGitHubのページにいき、Away3DのJSファイルをダウンロードします。Away3Dは複数のライブラリが集まって構築されているので、手っ取り早くJSファイルを手に入れるにはExamplesからJSファイルをダウンロードするのがいいでしょう。GitHubの[Download]ボタンをクリックしてダウンロードします。本記事では2014年9月のリビジョンのライブラリを使用して解説しています。GitHub※もしかすると、将来的なアップデートにより動作しない可能性がありますので、もし動作しないことがありましたら、執筆時点のリビジョンのファイルを使ってお試しください。HTMLファイルの準備ダウンロードしたZIPファイルを展開します。その中に「libs」フォルダーが入っていますが、その中身がAway3DのフレームワークとなるJSファイル「awayjs-core.next.min.js」「stagegl-core.next.min.js」「stagegl-extensions.next.min.js」が入っています。HTMLファイル(1_simple.html)を用意してそれと同じ階層にそれらのファイルを配置しましょう。コンテンツを制御するスクリプトは別名で「1_simple.js」という名前で用意しています。src="1_simple.js"></script></head><body></body></html>フォルダーの階層としては次のような状態となります。Away3D関連のJSライブラリは「libs」フォルダーに、自分で用意したファイルは「src」フォルダーに配置しておきます。Playerにフォールバックする仕組み等が動作しなくなるので、特別な理由がなければこのフォルダー階層にしておくといいでしょう。11などを使うといいでしょう。3D表示用のJavaScriptを用意ここからはさまざまな方法がありますが、その中でも私がもっとも一番手軽だと思う方法を紹介します。コンテンツ用のJSファイルに次のJavaScriptのコードを記述してみましょう。init;ここまでの設定がうまくいっていれば、ブラウザの画面上に単色の球体が回転します。このサンプルでは次の手順の処理を実装しています。上記のコードで出現した基本的なAway3Dの機能について紹介します。ViewクラスViewクラスは統合的な3D機能を提供するクラスです。Viewクラスはシーン設定、カメラ設定、描画を担っています。Viewインスタンスを作成すると、自動的にHTMLにcanvasタグが追加されます。Viewクラスのsceneプロパティ3Dの空間を表すプロパティ。3DのオブジェクトはsceneプロパティにaddChild()メソッドを利用して追加することで表示できます。Viewクラスのcameraプロパティ3D空間を撮影するカメラプロパティ。視点を制御するために使用します。3D空間のどの視点で撮影しているのかの情報が必要となりますが、それを決定するのがViewクラスのcameraプロパティです。Viewクラスのrender()¥メソッド3D空間のレンダリングを行います。レンダリングとは、Away3Dで計算した3Dのオブジェクトを画面に表示することです。内部的にはAway3DがWebGLのAPIを使って、GPUで座標を計算させ画面に表示させています。Away3DではRequestAnimationFrameのタイミングにあわせて、レンダリングを行うように設定しましょう。図:Away3Dを構成する基本的なオブジェクトと表示の仕組みビュー(HTMLのcanvasタグ)が実際に表示される画面となります。今回のソースファイルはこちらからダウンロードできます。GIGAZINE)から派生して進化してきたこともあり、APIが整備されていて使いやすいのが特徴です。平成31年3月21日に内容をメンテナンスしています。