[three.js] 座標系 (2)

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

threejs_coordinates2

three.jsは、右手座標系Y軸上向きだよ! :cake:
OrbitControls で、ぐるんぐるん動かせるようにしてみたよ。 :sun:

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

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>座標系 (2) | three.js</title>
<script src="js/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/detector.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  html { overflow:hidden; }
  body { margin:0; padding:0; }
</style>
</head>
<body style="background-color:#000000">
<script>
var scene, camera, renderer, stats;
var axis, plane, cube, sphere, front;
var light;
var controller;
var radius = 500;
var radian = Math.PI/180;
var center = new THREE.Object3D();

window.onload = init;

function init() {
  if (!Detector.webgl) Detector.addGetWebGLMessage();

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
  scene.add(camera);
  light = new THREE.DirectionalLight(0xCCCCCC);
  scene.add(light);
  controller = new THREE.OrbitControls(camera);
  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  setup();
  initialize();

  stats = new Stats();
  stats.setMode(0);
  stats.domElement.style.position = "fixed";
  stats.domElement.style.right = "0px";
  stats.domElement.style.top = "0px";
  document.body.appendChild(stats.domElement);

  render();
  window.addEventListener("resize", resize, false);
}
function setup() {
  renderer.setClearColor(0x000000, 1);
  camera.position.z = -radius;
  light.position.set(400, 500, -600);
}
function initialize() {
  axis = new THREE.Group();
  scene.add(axis);
  var xgeometry0 = new THREE.Geometry();
  xgeometry0.vertices.push(new THREE.Vector3(-240, 0, 0), new THREE.Vector3(0, 0, 0));
  var xmaterial0 = new THREE.LineBasicMaterial({color: 0xFFFFFF, linewidth: 1.6});
  var xaxis0 = new THREE.Line(xgeometry0, xmaterial0);
  axis.add(xaxis0);
  var xgeometry1 = new THREE.Geometry();
  xgeometry1.vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(240, 0, 0));
  var xmaterial1 = new THREE.LineBasicMaterial({color: 0xFF0000, linewidth: 2.4});
  var xaxis1 = new THREE.Line(xgeometry1, xmaterial1);
  axis.add(xaxis1);
  var ygeometry0 = new THREE.Geometry();
  ygeometry0.vertices.push(new THREE.Vector3(0, -240, 0), new THREE.Vector3(0, 0, 0));
  var ymaterial0 = new THREE.LineBasicMaterial({color: 0xFFFFFF, linewidth: 1.6});
  var yaxis0 = new THREE.Line(ygeometry0, ymaterial0);
  axis.add(yaxis0);
  var ygeometry1 = new THREE.Geometry();
  ygeometry1.vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 240, 0));
  var ymaterial1 = new THREE.LineBasicMaterial({color: 0x00FF00, linewidth: 2.4});
  var yaxis1 = new THREE.Line(ygeometry1, ymaterial1);
  axis.add(yaxis1);
  var zgeometry0 = new THREE.Geometry();
  zgeometry0.vertices.push(new THREE.Vector3(0, 0, -240), new THREE.Vector3(0, 0, 0));
  var zmaterial0 = new THREE.LineBasicMaterial({color: 0xFFFFFF, linewidth: 1.6});
  var zaxis0 = new THREE.Line(zgeometry0, zmaterial0);
  axis.add(zaxis0);
  var zgeometry1 = new THREE.Geometry();
  zgeometry1.vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 240));
  var zmaterial1 = new THREE.LineBasicMaterial({color: 0x0000FF, linewidth: 2.4});
  var zaxis1 = new THREE.Line(zgeometry1, zmaterial1);
  axis.add(zaxis1);

  var pgeometry = new THREE.PlaneGeometry(360, 360, 1, 1);
  var pmaterial = new THREE.MeshLambertMaterial({color: 0xFFFFFF, side: THREE.DoubleSide});
  pmaterial.emissive.set(0x333333);
  pmaterial.transparent = true;
  pmaterial.opacity = 0.8;
  plane = new THREE.Mesh(pgeometry, pmaterial);
  scene.add(plane);
  plane.rotation.x = 90*radian;

  var cgeometry = new THREE.BoxGeometry(80, 80, 80, 1, 1, 1);
  var cmaterial = new THREE.MeshLambertMaterial({color: 0xFFFFFF});
  cmaterial.emissive.set(0x666666);
  cube = new THREE.Mesh(cgeometry, cmaterial);
  scene.add(cube);

  var sgeometry = new THREE.SphereGeometry(4, 10, 10);
  var smaterial = new THREE.MeshBasicMaterial({color: 0xFFFF00});
  sphere = new THREE.Mesh(sgeometry, smaterial);
  scene.add(sphere);
  sphere.position.set(80, 100, -120);

  var geometry = new THREE.PlaneGeometry(40, 32, 1, 1);
  var material = new THREE.MeshBasicMaterial({color: 0xFFFF00, side: THREE.DoubleSide});
  material.transparent = true;
  material.opacity = 0.6;
  front = new THREE.Mesh(geometry, material);
  scene.add(front);
  front.position.z = - 250;
}
function render() {
  requestAnimationFrame(render);

  controller.update();
  camera.lookAt(center.position);

  renderer.render(scene, camera);

  stats.update();
}
function resize(event) {
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
</html>


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