[three.js] CreateJSとの組み合わせ (1)

three.jsCreateJS を組み合わせてみるよ。 :boy:
three.js の上に CreateJS を重ねてるよ。CreateJS の背景を透過させてるのね。 :bouzu:

threejs_createjs1

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

CreateJSのスライダーで、直方体を回転できるようにしてるよ。 :sun:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>CreateJSとの組み合わせ (1) | three.js</title>
<script src="js/three.min.js"></script>
<script src="js/detector.js"></script>
<script src="js/createjs/easeljs-0.8.1.min.js"></script>
<script src="js/createjs/tweenjs-0.6.1.min.js"></script>
<script src="js/createjs/movieclip-0.8.1.min.js"></script>
<script src="js/createjs/preloadjs-0.6.1.min.js"></script>
<script src="js/createjs/Slider.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  html { overflow:hidden; }
  body { margin:0; padding:0; }
  #canvas{
    display:block;
    width:600px;
    height:500px;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right: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;
var canvas, stage;
var images;
var slider;

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.width = bw + "px";
  renderer.domElement.style.position = bh + "px";
  renderer.domElement.style.position = "fixed";
  renderer.domElement.style.right = (window.innerWidth bw)/2 + "px";
  renderer.domElement.style.top = "20px";
  renderer.domElement.style.zIndex = "-100";
  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);

  canvas = document.getElementById("canvas");
  stage = new createjs.Stage(canvas);

  background();

  images = images||{};
  var loader = new createjs.LoadQueue(false);
  loader.addEventListener("fileload", fileload);
  loader.addEventListener("complete", complete);
  loader.loadFile({src: "assets/handler.png", id: "handler"});

  createjs.Ticker.setFPS(30);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
  if (createjs.Touch.isSupported()) {
    createjs.Touch.enable(stage);
  }
  stage.enableMouseOver(10);

  render();
  //createjs.Ticker.addEventListener("tick", update);

  window.addEventListener("resize", resize);
  resize();
}
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"], depthTest: false});
  var point0 = new THREE.Sprite(material0);
  position(point0, geometry.vertices[0], 20);
  cuboid.add(point0);
  var material1 = new THREE.SpriteMaterial({map: textures["A"], depthTest: false});
  var point1 = new THREE.Sprite(material1);
  position(point1, geometry.vertices[1], 20);
  cuboid.add(point1);
  var material2 = new THREE.SpriteMaterial({map: textures["H"], depthTest: false});
  var point2 = new THREE.Sprite(material2);
  position(point2, geometry.vertices[2], 20);
  cuboid.add(point2);
  var material3 = new THREE.SpriteMaterial({map: textures["E"], depthTest: false});
  var point3 = new THREE.Sprite(material3);
  position(point3, geometry.vertices[3], 20);
  cuboid.add(point3);
  var material4 = new THREE.SpriteMaterial({map: textures["B"], depthTest: false});
  var point4 = new THREE.Sprite(material4);
  position(point4, geometry.vertices[4], 20);
  cuboid.add(point4);
  var material5 = new THREE.SpriteMaterial({map: textures["C"], depthTest: false});
  var point5 = new THREE.Sprite(material5);
  position(point5, geometry.vertices[5], 20);
  cuboid.add(point5);
  var material6 = new THREE.SpriteMaterial({map: textures["F"], depthTest: false});
  var point6 = new THREE.Sprite(material6);
  position(point6, geometry.vertices[6], 20);
  cuboid.add(point6);
  var material7 = new THREE.SpriteMaterial({map: textures["G"], depthTest: false});
  var point7 = new THREE.Sprite(material7);
  position(point7, geometry.vertices[7], 20);
  cuboid.add(point7);

  var aqua = {color: 0x33CCFF, transparent: true, opacity: 0.6};
  var green = {color: 0x66CC00, transparent: true, opacity: 0.6};
  var materials = [
    new THREE.MeshBasicMaterial(green), new THREE.MeshBasicMaterial(green),
    new THREE.MeshBasicMaterial(aqua), new THREE.MeshBasicMaterial(aqua),
    new THREE.MeshBasicMaterial(green), new THREE.MeshBasicMaterial(green)
  ];
  var faces = new THREE.MeshFaceMaterial(materials);
  var surfaces = new THREE.Mesh(geometry, faces);
  scene.add(surfaces);
}
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);

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

  stage.update();

  stats.update();
}
function fileload(event) {
  if (event.item.type == "image") {
    images[event.item.id] = event.result;
  }
}
function complete(event) {
  event.target.removeEventListener("fileload", fileload);
  event.target.removeEventListener("complete", complete);

  slider = new Slider(images.handler, 360);
  stage.addChild(slider);
  slider.x = canvas.width/2;
  slider.y = 450;
  slider.initialize(180, 180, 0);
  slider.addEventListener("change", change);
  slider.addEventListener("select", select);
}
function change(event) {
  angle = event.target.value 90;
}
function select(event) {
  angle = event.target.value 90;
}
function background() {
  var base = new createjs.Shape();
  base.graphics.beginFill("#FFFFFF");
  base.graphics.drawRect(0, 400, 600, 100);
  base.graphics.endFill();
  stage.addChild(base);

  var basic = new createjs.Text("HTML5 / CreateJS [0.8.1]", "14px Arial", "#000000");
  stage.addChild(basic);
  basic.textAlign = "left";
  basic.textBaseline = "bottom";
  basic.x = 10;
  basic.y = 20;
  basic.alpha = 0.6;
  var publish = new createjs.Text("authoring: Sublime Text 2 + Flash CC", "14px Arial", "#000000");
  stage.addChild(publish);
  publish.textAlign = "right";
  publish.textBaseline = "bottom";
  publish.x = canvas.width 10;
  publish.y = 20;
  publish.alpha = 0.6;
}
function resize(event) {
  renderer.domElement.style.right = (window.innerWidth bw)/2 + "px";
}
</script>
  <canvas id="canvas" width="600" height="500"></canvas>
</body>
</html>