サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

Away3D: 2014年11月5日付でライブラリとクラスの読込み方が変わった

ID: FN1411003 Technique: HTML5 and JavaScript Library: Away3D TypeScript

Away3D TypeScriptのライブラリが2014年11月5日付で更新され、ライブラリ名やその数、さらにクラスの読込み方が変わりました。これまで、あるいは他のJavaScriptライブラリとは毛色が変わり、戸惑われる人も少なくないと思います。どこが変わったのかをかいつまんでご説明します。


01 Away3D TypeScriptのライブラリが変わった

Away3D TypeScriptのライブラリは、GitHubの「AwayJS」からダウンロードします[*1]。その名前も数も、これまでと変わりました(図001)。本稿でご説明するサンプルコードでは、つぎの5つのライブラリを使います。JavaScript(JS)ファイルだけでなく、mapも含めましょう(図001下)。

  1. awayjs-core
  2. awayjs-display
  3. awayjs-renderergl
  4. awayjs-stagegl
  5. awayjs-methodmaterials

図001■Away3D TypeScriptライブラリのソースファイル
図001上
2014年8月26日付

図001下
2014年11月5日付

そして、script要素で上記5つのJSファイルを読込みます。ライブラリのディレクトリは「lib」としました。

<!--
<script src="lib/awayjs-core.next.min.js"></script>
<script src="lib/stagegl-core.next.min.js"></script>
<script src="lib/stagegl-extensions.next.min.js"></script>
-->
<script src="lib/awayjs-core.min.js"></script>
<script src="lib/awayjs-display.min.js"></script>
<script src="lib/awayjs-renderergl.min.js"></script>
<script src="lib/awayjs-stagegl.min.js"></script>
<script src="lib/awayjs-methodmaterials.min.js"></script>

[*1] Away3D TypeScriptサイトの「Source Files」の欄には、本稿執筆時ではこれまでのまま作例(「GitHub: Examples」)を含めて3つのライブラリのリンクしかありません(図002)。

図002■Away3D TypeScriptサイトの「Source Files」の欄
図002

02 クラスの参照の仕方が変わった

「Away3D: 立方体を回してみる」のコード002「3次元空間でカメラをインタラクティブにパンおよびチルトさせる」を新たなライブラリで動くように書直してみます。script要素全体は、後にコード001としてまとめて掲げます。大きく変わったのは、クラスの参照の仕方です。require()関数にパスを渡して、使うクラスの参照を得ます(第7〜16行目)。

  1. var Vector3D = require("awayjs-core/lib/geom/Vector3D");
  2. var RequestAnimationFrame = require("awayjs-core/lib/utils/RequestAnimationFrame");
  3. var View = require("awayjs-display/lib/containers/View");
  4. var HoverController = require("awayjs-display/lib/controllers/HoverController");
  5. var DirectionalLight = require("awayjs-display/lib/entities/DirectionalLight");
  6. var StaticLightPicker = require("awayjs-display/lib/materials/lightpickers/StaticLightPicker");
  7. var PrimitiveCubePrefab = require("awayjs-display/lib/prefabs/PrimitiveCubePrefab");
  8. var DefaultRenderer = require("awayjs-renderergl/lib/DefaultRenderer");
  9. var DefaultMaterialManager = require("awayjs-renderergl/lib/managers/DefaultMaterialManager");
  10. var TriangleMethodMaterial = require("awayjs-methodmaterials/lib/TriangleMethodMaterial");

03 変数に納めたクラスを参照してスクリプティングする

前述のとおりrequire()関数でクラスの参照を変数にとってしまえば、後はその変数を用いてJavaScriptコードが書けます。今回のサンプルコードでは、クラスの参照を改めただけで、処理の中身は変えることなく正しく動きました。ご参考までに、立方体をつくる関数(createCube())はつぎのように書替えました(第43〜50行目)。

  1. function createCube(width, height, depth, light) {
      // var defaultTexture = away.materials.DefaultMaterialManager.getDefaultTexture();
  2.   var defaultTexture = DefaultMaterialManager.getDefaultTexture();
      // var material = new away.materials.TriangleMethodMaterial(defaultTexture);
  3.   var material = new TriangleMethodMaterial(defaultTexture);
      // var mesh = new away.prefabs.PrimitiveCubePrefab(width, height, depth).getNewObject();
  4.   var mesh = new PrimitiveCubePrefab(width, height, depth).getNewObject();
  5.   mesh.material = material;
      // material.lightPicker = new away.materials.StaticLightPicker([light]);
  6.   material.lightPicker = new StaticLightPicker([light]);
  7.   return mesh;
  8. }

以下の書き改めたコード001は、3次元空間に置いた立方体の周りを、ドラッグによりカメラがパンあるいはチルトします(図003)。jsdo.itにも、併せてコードを掲げました(サンプル001)。

図003■3次元空間に置いた立方体の周りをカメラがパン・チルトする
図004

コード001■3次元空間でカメラをインタラクティブにパンおよびチルトさせる
  1. <script src="lib/awayjs-core.min.js"></script>
  2. <script src="lib/awayjs-display.min.js"></script>
  3. <script src="lib/awayjs-renderergl.min.js"></script>
  4. <script src="lib/awayjs-stagegl.min.js"></script>
  5. <script src="lib/awayjs-methodmaterials.min.js"></script>
  6. <script>
  7. var Vector3D = require("awayjs-core/lib/geom/Vector3D");
  8. var RequestAnimationFrame = require("awayjs-core/lib/utils/RequestAnimationFrame");
  9. var View = require("awayjs-display/lib/containers/View");
  10. var HoverController = require("awayjs-display/lib/controllers/HoverController");
  11. var DirectionalLight = require("awayjs-display/lib/entities/DirectionalLight");
  12. var StaticLightPicker = require("awayjs-display/lib/materials/lightpickers/StaticLightPicker");
  13. var PrimitiveCubePrefab = require("awayjs-display/lib/prefabs/PrimitiveCubePrefab");
  14. var DefaultRenderer = require("awayjs-renderergl/lib/DefaultRenderer");
  15. var DefaultMaterialManager = require("awayjs-renderergl/lib/managers/DefaultMaterialManager");
  16. var TriangleMethodMaterial = require("awayjs-methodmaterials/lib/TriangleMethodMaterial");
  17. var view;
  18. var mesh;
  19. var timer;
  20. var cameraController;
  21. var lastMouseX;
  22. var lastMouseY;
  23. var lastPanAngle;
  24. var lastTiltAngle;
  25. function initialize() {
  26.   var directionalLight = createDirectionalLight(0.25, 0x00FFFF);
  27.   view = createView(240, 180, 0x0);
  28.   mesh = createCube(400, 400, 400, directionalLight);
  29.   view.scene.addChild(mesh);
  30.   cameraController = setupCameraController(view.camera, 1000, 0, 90, 45, 20);
  31.   document.onmousedown = startDrag;
  32.   timer = new RequestAnimationFrame(render);
  33.   timer.start();
  34. }
  35. function createView(width, height, backgroundColor) {
  36.   var defaultRenderer = new DefaultRenderer();
  37.   var view = new View(defaultRenderer);
  38.   view.width = width;
  39.   view.height = height;
  40.   view.backgroundColor = backgroundColor;
  41.   return view;
  42. }
  43. function createCube(width, height, depth, light) {
  44.   var defaultTexture = DefaultMaterialManager.getDefaultTexture();
  45.   var material = new TriangleMethodMaterial(defaultTexture);
  46.   var mesh = new PrimitiveCubePrefab(width, height, depth).getNewObject();
  47.   mesh.material = material;
  48.   material.lightPicker = new StaticLightPicker([light]);
  49.   return mesh;
  50. }
  51. function createDirectionalLight(ambient, color) {
  52.   var light = new DirectionalLight();
  53.   light.direction = new Vector3D(0, -1, 1);
  54.   light.ambient = ambient;
  55.   light.color = color;
  56.   return light;
  57. }
  58. function setupCameraController(camera, distance, minTiltAngle, maxTiltAngle, panAngle, tiltAngle) {
  59.   var cameraController = new HoverController(camera);
  60.   cameraController.distance = distance;
  61.   cameraController.minTiltAngle = minTiltAngle;
  62.   cameraController.maxTiltAngle = maxTiltAngle;
  63.   cameraController.panAngle = panAngle;
  64.   cameraController.tiltAngle = tiltAngle;
  65.   return cameraController;
  66. }
  67. function render(timeStamp) {
  68.   view.render();
  69. }
  70. function startDrag(eventObject) {
  71.   lastMouseX = eventObject.clientX;
  72.   lastMouseY = eventObject.clientY;
  73.   lastPanAngle = cameraController.panAngle;
  74.   lastTiltAngle = cameraController.tiltAngle;
  75.   document.onmousemove = drag;
  76.   document.onmouseup = stopDrag;
  77. }
  78. function drag(eventObject) {
  79.   cameraController.panAngle = 0.5 * (eventObject.clientX - lastMouseX) + lastPanAngle;
  80.   cameraController.tiltAngle = 0.3 * (eventObject.clientY - lastMouseY) + lastTiltAngle;
  81. }
  82. function stopDrag(eventObject) {
  83.   document.onmousemove = null;
  84.   document.onmouseup = null;
  85. }

サンプル001■Away3D 14/11/05: Panning and tilting the camera in the 3D space


作成者: 野中文雄
作成日: 2014年11月20日

Copyright © 2001-2014 Fumio Nonaka.  All rights reserved.