[three.js] 直方体 (2) 〜辺~

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

threejs_cuboid2

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:

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

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