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

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

threejs_cuboid3

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:
頂点表記には、TextGeometry, MeshBasicMaterial, MeshFaceMaterial, Mesh を使ってみた。 :girl:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>直方体 (3) | three.js</title>
<script src="js/three.min.js"></script>
<script src="js/detector.js"></script>
<script src="js/fonts/helvetiker_bold.typeface.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 points;

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();

  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 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 font = {font: "helvetiker", weight: "bold", style: "normal", size: 20, height: 1};
  var fontmaterial = new THREE.MeshBasicMaterial({color: 0x000000});
  var textmaterial = new THREE.MeshFaceMaterial([fontmaterial]);

  var text0 = new THREE.TextGeometry("D", font);
  var pt0 = new THREE.Mesh(text0, textmaterial);
  var point0 = position(pt0, geometry.vertices[0], 5);
  cuboid.add(point0);
  var text1 = new THREE.TextGeometry("A", font);
  var pt1 = new THREE.Mesh(text1, textmaterial);
  var point1 = position(pt1, geometry.vertices[1], 5);
  cuboid.add(point1);
  var text2 = new THREE.TextGeometry("H", font);
  var pt2 = new THREE.Mesh(text2, textmaterial);
  var point2 = position(pt2, geometry.vertices[2], 35);
  cuboid.add(point2);
  var text3 = new THREE.TextGeometry("E", font);
  var pt3 = new THREE.Mesh(text3, textmaterial);
  var point3 = position(pt3, geometry.vertices[3], 35);
  cuboid.add(point3);
  var text4 = new THREE.TextGeometry("B", font);
  var pt4 = new THREE.Mesh(text4, textmaterial);
  var point4 = position(pt4, geometry.vertices[4], 5);
  cuboid.add(point4);
  var text5 = new THREE.TextGeometry("C", font);
  var pt5 = new THREE.Mesh(text5, textmaterial);
  var point5 = position(pt5, geometry.vertices[5], 5);
  cuboid.add(point5);
  var text6 = new THREE.TextGeometry("F", font);
  var pt6 = new THREE.Mesh(text6, textmaterial);
  var point6 = position(pt6, geometry.vertices[6], 35);
  cuboid.add(point6);
  var text7 = new THREE.TextGeometry("G", font);
  var pt7 = new THREE.Mesh(text7, textmaterial);
  var point7 = position(pt7, geometry.vertices[7], 35);
  cuboid.add(point7);

  points = [point0, point1, point2, point3, point4, point5, point6, point7];
}
function position(pt, vector, offset) {
  pt.position.x = 10;
  var point = new THREE.Group();
  point.position.set(vector.x, vector.y + offset, vector.z);
  point.add(pt);
  return point;
}
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);
  for (var n = 0; n < 8; n++) {
    var point = points[n];
    if (point) point.lookAt(camera.position);    
  }

  renderer.render(scene, camera);

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