d3

Cursor Press

20 Oct 2016

カーソルキーイベント

スクリーン位置

仮想の球面上に設定した点を、カーソルキー(矢印キー)または、画面上の上下左右ボタンを使い

視線を移動して球の原点から見回します

実際は球体を回転させて視野を変更しています

var keyPressed = {};
d3.select('body')
  .on('keydown', function() {
    keyPressed[d3.event.keyIdentifier] = true;
  })
  .on('keyup', function() {
    keyPressed[d3.event.keyIdentifier] = false;
  });
var keyEvent = function() {
  if (keyPressed['Left']) {
    thetaZ -= rad;
    rotation();
  }
  if (keyPressed['Up']) {
    $window.scrollTop(scrollTop);
    thetaX += rad;
    rotation();
  }
  if (keyPressed['Right']) {
    thetaZ += rad;
    rotation();
  }
  if (keyPressed['Down']) {
    $window.scrollTop(scrollTop);
    thetaX -= rad;
    rotation();
  }
  draw();
};
d3.timer(keyEvent);

function rotation(){
    points = [];
    var count = points0.length;
    for (var i = 0; i < count; i++) {
        var x = points0[i].x;
        var y = points0[i].y;
        var z = points0[i].z;

        var x0 = x * Math.cos(thetaZ) + y * Math.sin(thetaZ); 
        var y0 = -x * Math.sin(thetaZ) + y * Math.cos(thetaZ);
        var z0 = z;

        var x1 = x0 * Math.cos(thetaY) - z0 * Math.sin(thetaY); 
        var y1 = y0;
        var z1 = -x0 * Math.sin(thetaY) + z0 * Math.cos(thetaY);

        var x2 = x1;
        var y2 = y1 * Math.cos(thetaX) + z1 * Math.sin(thetaX); 
        var z2 = -y1 * Math.sin(thetaX) + z1 * Math.cos(thetaX);

        if ( isInBound( x2, y2, z2 ) ){
            points.push( new Point3d( x2, y2, z2, points0[i].label, points0[i].r ) );
        }
    };
}

function Point3d(x, y, z, label, r){
    this.x = x;
    this.y = y;
    this.z = z;
    this.label = label;
    this.r = r;
};
// 点のデータ
var points0 = [],
    points = [];
var pi = Math.PI,
    aDegree = pi / 180,    
    theta = -pi/2;
for (var i = 0; i <= 23; i++) {
    var x = sphereRadius * Math.cos(i*aDegree*15);
    var y = sphereRadius * Math.sin(i*aDegree*15);
    var x_ = x * Math.cos(theta) + y * Math.sin(theta);
    var y_ = -x * Math.sin(theta) + y * Math.cos(theta);
    points0.push( new Point3d( x_, y_, 0, i, 4 ) );
};
theta = aDegree * 45;
var count = points0.length;
for (var i = 0; i < count; i++) {
    var x_ = points0[i].x * Math.cos(theta) - points0[i].z * Math.sin(theta);
    var y_ = points0[i].y;
    var z_ = points0[i].x * Math.sin(theta) + points0[i].z * Math.cos(theta);
    points0.push( new Point3d( x_, y_, z_, i+count, 4 ) );
};
// 天頂、天底
points0.push(new Point3d(0,0,sphereRadius,"Z",10));
points0.push(new Point3d(0,0,-sphereRadius,"Z-",10));
// 表示対象の点を選ぶ
for (var i = 0; i < points0.length; i++) {
   if ( isInBound( points0[i].x, points0[i].y, points0[i].z ) ){
     points.push( points0[i] );
   }
};