[AwayJS] 座標系 (1)

AwayJSを使って、座標系について調べてみるよ。 :boy:

awayjs_coordinates1

AwayJSは、左手座標系Y軸上向きだよ! :cake:

X軸(正値)は赤色、Y軸(正値)は緑色、Z軸(正値)は青色。ライトの位置(方角)は黄色。オブジェクト正面に黄色の矩形を配置。

:caution: LineSegmentが使えないので、PrimitiveCylinderPrefab を代用しているのは残念です。 😥

Main.ts
/// <reference path="libs/awayjs-core/build/awayjs-core.d.ts" />
/// <reference path="libs/awayjs-stagegl/build/awayjs-stagegl.d.ts" />
/// <reference path="libs/awayjs-renderergl/build/awayjs-renderergl.d.ts" />
/// <reference path="libs/awayjs-display/build/awayjs-display.d.ts" />
/// <reference path="libs/awayjs-methodmaterials/build/awayjs-methodmaterials.d.ts" />


import ContextGLProfile = require("awayjs-stagegl/lib/base/ContextGLProfile");
import DefaultRenderer = require("awayjs-renderergl/lib/DefaultRenderer");
import View = require("awayjs-display/lib/containers/View");
import Scene = require("awayjs-display/lib/containers/Scene");
import Camera = require("awayjs-display/lib/entities/Camera");
import DirectionalLight = require("awayjs-display/lib/entities/DirectionalLight");
import StaticLightPicker = require("awayjs-display/lib/materials/lightpickers/StaticLightPicker");
import Vector3D = require("awayjs-core/lib/geom/Vector3D");
import RequestAnimationFrame = require("awayjs-core/lib/utils/RequestAnimationFrame");
import DisplayObjectContainer = require("awayjs-display/lib/containers/DisplayObjectContainer");
import Mesh = require("awayjs-display/lib/entities/Mesh");
import PrimitiveCylinderPrefab = require("awayjs-display/lib/prefabs/PrimitiveCylinderPrefab");
import PrimitivePlanePrefab = require("awayjs-display/lib/prefabs/PrimitivePlanePrefab");
import PrimitiveCubePrefab = require("awayjs-display/lib/prefabs/PrimitiveCubePrefab");
import PrimitiveSpherePrefab = require("awayjs-display/lib/prefabs/PrimitiveSpherePrefab");
import TriangleMethodMaterial = require("awayjs-methodmaterials/lib/TriangleMethodMaterial");

class Main {

  private renderer:DefaultRenderer;
  private view:View;
  private scene:Scene;
  private camera:Camera;
  private timer:RequestAnimationFrame;
  private light:DirectionalLight;
  private axis:DisplayObjectContainer;
  private plane:Mesh;
  private cube:Mesh;
  private sphere:Mesh;
  private front:Mesh;
  private radius:number = 500;
  private angle:number = - 90;
  private degree:number = 0;
  private depression:number = 30;
  private radian:number = Math.PI/180;
  private center:Vector3D = new Vector3D();

  constructor() {
    this.renderer = new DefaultRenderer(false, ContextGLProfile.BASELINE);
    this.renderer.antiAlias = 4;
    this.view = new View(this.renderer);
    this.scene = this.view.scene;
    this.camera = this.view.camera;
    this.light = new DirectionalLight();
    this.setup();
    this.initialize();
    window.onresize = (evt:UIEvent) => this.resize(evt);
    this.resize();
    this.timer = new RequestAnimationFrame(this.render, this);
    this.timer.start();
  }

  private setup():void {
    this.view.backgroundColor = 0x000000;
    this.camera.x = 0;
    this.camera.y = 0;
    this.camera.z = - this.radius;
    this.light.direction = new Vector3D(0.8, -1, 1.2);
    this.light.ambient = 0.4;
    this.light.diffuse = 0.8;
    this.light.specular = 0;
    this.light.color = 0xFFFFFF;
  }
  private initialize():void {
    this.axis = new DisplayObjectContainer();
    this.scene.addChild(this.axis);
    var wmaterial:TriangleMethodMaterial = new TriangleMethodMaterial(0xFFFFFF, 1);
    var rmaterial:TriangleMethodMaterial = new TriangleMethodMaterial(0xFF0000, 1);
    var gmaterial:TriangleMethodMaterial = new TriangleMethodMaterial(0x00FF00, 1);
    var bmaterial:TriangleMethodMaterial = new TriangleMethodMaterial(0x0000FF, 1);
    var xaxis0:Mesh
= <Mesh> new PrimitiveCylinderPrefab(1, 1, 240, 4, 1, true, true, true, false).getNewObject();
    xaxis0.material = wmaterial;
    xaxis0.rotationY = 90;
    xaxis0.x = - 120;
    var xaxis1:Mesh
= <Mesh> new PrimitiveCylinderPrefab(1, 1, 240, 4, 1, true, true, true, false).getNewObject();
    xaxis1.material = rmaterial;
    xaxis1.rotationY = 90;
    xaxis1.x = 120;
    this.axis.addChild(xaxis0);
    this.axis.addChild(xaxis1);
    var yaxis0:Mesh
= <Mesh> new PrimitiveCylinderPrefab(1, 1, 240, 4, 1, true, true, true, true).getNewObject();
    yaxis0.material = wmaterial;
    yaxis0.y = - 120;
    var yaxis1:Mesh
= <Mesh> new PrimitiveCylinderPrefab(1, 1, 240, 4, 1, true, true, true, true).getNewObject();
    yaxis1.material = gmaterial;
    yaxis1.y = 120;
    this.axis.addChild(yaxis0);
    this.axis.addChild(yaxis1);
    var zaxis0:Mesh
= <Mesh> new PrimitiveCylinderPrefab(1, 1, 240, 4, 1, true, true, true, false).getNewObject();
    zaxis0.material = wmaterial;
    zaxis0.z = - 120;
    var zaxis1:Mesh
= <Mesh> new PrimitiveCylinderPrefab(1, 1, 240, 4, 1, true, true, true, false).getNewObject();
    zaxis1.material = bmaterial;
    zaxis1.z = 120;
    this.axis.addChild(zaxis0);
    this.axis.addChild(zaxis1);

    var lightPicker:StaticLightPicker = new StaticLightPicker([this.light]);

    var pmaterial:TriangleMethodMaterial = new TriangleMethodMaterial(0x999999, 0.8);
    pmaterial.lightPicker = lightPicker;
    this.plane = <Mesh> new PrimitivePlanePrefab(320, 320, 1, 1, true, true).getNewObject();
    this.plane.material = pmaterial;
    this.scene.addChild(this.plane);

    var cmaterial:TriangleMethodMaterial = new TriangleMethodMaterial(0xFFFFFF, 1);
    cmaterial.lightPicker = lightPicker;
    this.cube = <Mesh> new PrimitiveCubePrefab(80, 80, 80, 1, 1, 1, false).getNewObject();
    this.cube.material = cmaterial;
    this.scene.addChild(this.cube);

    var smaterial:TriangleMethodMaterial = new TriangleMethodMaterial(0xFFFF00, 1);
    this.sphere = <Mesh> new PrimitiveSpherePrefab(4, 20, 10).getNewObject();
    this.sphere.material = smaterial;
    this.scene.addChild(this.sphere);
    this.sphere.x = - 80;
    this.sphere.y = 100;
    this.sphere.z = - 120;

    var material:TriangleMethodMaterial = new TriangleMethodMaterial(0xFFFF00, 0.6);
    this.front = <Mesh> new PrimitivePlanePrefab(40, 32, 1, 1, false, true).getNewObject();
    this.front.material = material;
    this.scene.addChild(this.front);
    this.front.z = - 250;
  }
  private render(dt:number):void {
    this.angle += 0.5;
    this.degree += 1;
    var dip:number = this.depression*Math.sin(this.degree*this.radian);
    this.camera.x = this.radius*Math.cos(this.angle*this.radian)*Math.cos(dip*this.radian);
    this.camera.y = this.radius*Math.sin(dip*this.radian);
    this.camera.z = this.radius*Math.sin(this.angle*this.radian)*Math.cos(dip*this.radian);
    this.camera.lookAt(this.center);
    this.view.render();
  }
  private resize(evt:UIEvent = null):void {
    this.view.width = window.innerWidth;
    this.view.height = window.innerHeight;
  }
}

window.onload = function() {
  new Main();
}

build.txt
src/Main.ts
-target ES5
-module commonjs
-outDir bin

build.txt 上で、[Command + B] して、ビルド。

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>[AwayJS] 座標系 (1)</title>
<script type="text/javascript" src="js/awayjs-core.min.js">/script>
<script type="text/javascript" src="js/awayjs-stagegl.min.js">/script>
<script type="text/javascript" src="js/awayjs-renderergl.min.js">/script>
<script type="text/javascript" src="js/awayjs-display.min.js">/script>
<script type="text/javascript" src="js/awayjs-methodmaterials.min.js">/script>
<script type="text/javascript" src="Main.js">/script>
<style type="text/css">
  html { overflow:hidden; }
  body { margin:0; padding:0; }
</style>
</head>
<body style="background-color:#000000;">
</body>
</html>


:banana: [TypeScript] AwayJSを始めよう! 参照。


[修正] (14/12/27 Sat 20:05)
HTML記述を変更。