[three.js] 直方体 (4) ~辺と頂点~

three.jsを使って、直方体を作るよ。 :boy:

threejs_cuboid4

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:
頂点表記には、SpriteMaterial, Sprite を使ってみた。 :girl:
んでもって、ImageUtils, Texture も使ったりして。 :beer:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>直方体 (4) | three.js</title>
<script src="js/three.min.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:#EEEEEE">
<script>
var scene, camera, renderer, stats;
var bw = 600, bh = 400;
var radius = 500;
var cameraHeight = 300;
var angle = - 90;
var radian = Math.PI/180;
var center = new THREE.Object3D();
var files, textures;
var completed = 0;

window.onload = init;

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

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, bw/bh, 0.1, 1000);
  scene.add(camera);
  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(bw, bh);
  document.body.appendChild(renderer.domElement);
  renderer.domElement.style.position = "fixed";
  renderer.domElement.style.right = (window.innerWidth - bw)/2 + "px";
  renderer.domElement.style.top = "20px";
  setup();
  //initialize();
  files = [];
  files.push("assets/point/A.png");
  files.push("assets/point/B.png");
  files.push("assets/point/C.png");
  files.push("assets/point/D.png");
  files.push("assets/point/E.png");
  files.push("assets/point/F.png");
  files.push("assets/point/G.png");
  files.push("assets/point/H.png");
  textures = [];
  for (var n = 0; n < 8; n++) {
    THREE.ImageUtils.loadTexture(files[n], undefined, loaded);  }

  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();
}
function setup() {
  renderer.setClearColor(0xFFFFFF, 1);
  camera.position.x = 0;
  camera.position.y = cameraHeight;
  camera.position.z = -radius;
}
function loaded(data) {
  switch (data.sourceFile) {
    case files[0] :
      textures["A"] = data;
      break;
    case files[1] :
      textures["B"] = data;
      break;
    case files[2] :
      textures["C"] = data;
      break;
    case files[3] :
      textures["D"] = data;
      break;
    case files[4] :
      textures["E"] = data;
      break;
    case files[5] :
      textures["F"] = data;
      break;
    case files[6] :
      textures["G"] = data;
      break;
    case files[7] :
      textures["H"] = data;
      break;
  }
  completed ++;
  if (completed > 7) {
    initialize();
    //render();
  }
}
function initialize() {
  var cuboid = new THREE.Group();
  scene.add(cuboid);

  var geometry = new THREE.BoxGeometry(200, 150, 250, 1, 1, 1);
  var geometry1 = new THREE.Geometry();
  geometry1.vertices.push(geometry.vertices[0]);
  geometry1.vertices.push(geometry.vertices[1]);
  geometry1.vertices.push(geometry.vertices[4]);
  geometry1.vertices.push(geometry.vertices[5]);
  geometry1.vertices.push(geometry.vertices[0]);
  var geometry2 = new THREE.Geometry();
  geometry2.vertices.push(geometry.vertices[2]);
  geometry2.vertices.push(geometry.vertices[3]);
  geometry2.vertices.push(geometry.vertices[6]);
  geometry2.vertices.push(geometry.vertices[7]);
  geometry2.vertices.push(geometry.vertices[2]);
  var geometry3 = new THREE.Geometry();
  geometry3.vertices.push(geometry.vertices[0]);
  geometry3.vertices.push(geometry.vertices[2]);
  var geometry4 = new THREE.Geometry();
  geometry4.vertices.push(geometry.vertices[1]);
  geometry4.vertices.push(geometry.vertices[3]);
  var geometry5 = new THREE.Geometry();
  geometry5.vertices.push(geometry.vertices[4]);
  geometry5.vertices.push(geometry.vertices[6]);
  var geometry6 = new THREE.Geometry();
  geometry6.vertices.push(geometry.vertices[5]);
  geometry6.vertices.push(geometry.vertices[7]);

  var material = new THREE.LineBasicMaterial({color: 0x000000});
  material.linewidth = 2;
  var line1 = new THREE.Line(geometry1, material);
  cuboid.add(line1);
  var line2 = new THREE.Line(geometry2, material);
  cuboid.add(line2);
  var line3 = new THREE.Line(geometry3, material);
  cuboid.add(line3);
  var line4 = new THREE.Line(geometry4, material);
  cuboid.add(line4);
  var line5 = new THREE.Line(geometry5, material);
  cuboid.add(line5);
  var line6 = new THREE.Line(geometry6, material);
  cuboid.add(line6);

  var material0 = new THREE.SpriteMaterial({map: textures["D"]});
  var point0 = new THREE.Sprite(material0);
  position(point0, geometry.vertices[0], 20);
  cuboid.add(point0);
  var material1 = new THREE.SpriteMaterial({map: textures["A"]});
  var point1 = new THREE.Sprite(material1);
  position(point1, geometry.vertices[1], 20);
  cuboid.add(point1);
  var material2 = new THREE.SpriteMaterial({map: textures["H"]});
  var point2 = new THREE.Sprite(material2);
  position(point2, geometry.vertices[2], -20);
  cuboid.add(point2);
  var material3 = new THREE.SpriteMaterial({map: textures["E"]});
  var point3 = new THREE.Sprite(material3);
  position(point3, geometry.vertices[3], -20);
  cuboid.add(point3);
  var material4 = new THREE.SpriteMaterial({map: textures["B"]});
  var point4 = new THREE.Sprite(material4);
  position(point4, geometry.vertices[4], 20);
  cuboid.add(point4);
  var material5 = new THREE.SpriteMaterial({map: textures["C"]});
  var point5 = new THREE.Sprite(material5);
  position(point5, geometry.vertices[5], 20);
  cuboid.add(point5);
  var material6 = new THREE.SpriteMaterial({map: textures["F"]});
  var point6 = new THREE.Sprite(material6);
  position(point6, geometry.vertices[6], -20);
  cuboid.add(point6);
  var material7 = new THREE.SpriteMaterial({map: textures["G"]});
  var point7 = new THREE.Sprite(material7);
  position(point7, geometry.vertices[7], -20);
  cuboid.add(point7);
}
function position(point, vector, offset) {
  point.position.set(vector.x, vector.y + offset, vector.z);
  point.scale.set(25, 25, 1);
}
function render() {
  requestAnimationFrame(render);

  angle -= 0.5;
  camera.position.x = radius*Math.cos(angle*radian);
  camera.position.y = cameraHeight;
  camera.position.z = radius*Math.sin(angle*radian);
  camera.lookAt(center.position);

  renderer.render(scene, camera);

  stats.update();
}
</script>
</body>
</html>