this.rotateAroundPoint = function (angDist, axis) {
angDist *= (Math.PI / 180);
var cCamera = this.camera.position;
var cTarget;
if (this.targetObject) {
cTarget = this.camera.target.position;
} else {
cTarget = {x:0, y:0, z:0};
}
var offsetX = cCamera.x - cTarget.x;
var offsetY = cCamera.y - cTarget.y;
var offsetZ = cCamera.z - cTarget.z;
switch(axis) {
case 'x':
rx = offsetX;
ry = (offsetY * Math.cos(angDist)) - (offsetZ *Math.sin(angDist));
rz = (offsetY * Math.sin(angDist)) + (offsetZ *Math.cos(angDist));
break;
case 'y':
rx = (offsetX * Math.cos(angDist)) - (offsetZ *Math.sin(angDist));
ry = offsetY;
rz = (offsetX * Math.sin(angDist)) + (offsetZ *Math.cos(angDist));
break;
case 'z':
rx = (offsetX * Math.cos(angDist)) - (offsetY *Math.sin(angDist));
ry = (offsetX * Math.sin(angDist)) + (offsetY *Math.cos(angDist));
rz = offsetZ;
break;
}
return new THREE.Vector3( cTarget.x+rx, cTarget.y+ry, cTarget.z+rz );
}
In addition, I wrote a special Ray tracing algorithm that sends a ray from the mouse touch point through 3D space, and checks every particle or object in the way, and returns an array of those that are intersected by the line. A variant of this was added to the Three.JS library (my first pull request, yay!). I rewrote the algorithm from this math course:
target_point = object.geometry.vertices.position;
starter_vector = target_point.clone().subSelf(origin_point);
var c1 = starter_vector.dot ( direction_vector );
var c2 = direction_vector.dot ( direction_vector );
var b = c1 / c2;
var intersect_point = origin_point.clone().addSelf(direction_vector.multiplyScalar(b));
var dist = target_point.distanceTo(intersect_point);
As you touch a star, the touch finds the closest star (within a certain touch radius), and then highlights that by redrawing a canvas shell around it. This then also searches through the star json database and shows the 4 closest stars (highlighted in their star color and info) at the bottom left of the screen.
//=======================================
function generateSunTexture(color, size, showShell) {
var size = (size) ? parseInt(size*24) : 24;
var showShell = (showShell) ? showShell : false;
var canvas = document.createElement( 'canvas' );
canvas.width = size;
canvas.height = size;
var col = new THREE.Color(color);
var context = canvas.getContext( '2d' );
var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
gradient.addColorStop( 0, col.rgbaString);
gradient.addColorStop( 0.1, col.rgbaString);
gradient.addColorStop( 0.6, 'rgba(125, 20, 0, 0.2)' );
if (showShell) {
gradient.addColorStop( 0.88, 'rgba(0, 20, 0, 1)' );
gradient.addColorStop( 0.9, 'rgba(255, 255, 255, 0.2)' );
}
gradient.addColorStop( .92, 'rgba(0,0,0,0)' );
context.fillStyle = gradient;
context.fillRect( 0, 0, canvas.width, canvas.height );
return canvas;
}
Sorting is done by overloading the standard sort function (subtracting the distance field of object a from b to do a mergesort or selectionsort):
var closest_sorted = starscopy.sort( function ( a, b ) { return objectClicked.position.distanceTo (a.position)-objectClicked.position.distanceTo (b.position); } );
Much of the work was done to get the Star library, catch the touch events, and clean things up so that it would render all in Canvas (so that it looks good on iPhone, Android browser, as well as other common browsers). You can view it in action here.
