Improved stuff
This commit is contained in:
parent
647843d51b
commit
06976bd845
|
@ -4,16 +4,20 @@ block title
|
|||
title #{title} - Prototype
|
||||
|
||||
block extrajs
|
||||
script(src="/static/js/prototype/ArrowCamera.js")
|
||||
script(src="/static/js/prototype/FixedCamera.js")
|
||||
script(src="/static/js/prototype/OldFixedCamera.js")
|
||||
script(src="/static/js/prototype/ReverseCamera.js")
|
||||
script(src="/static/js/prototype/initScene.js")
|
||||
script(src="/static/js/prototype/raycasterTools.js")
|
||||
script(src="/static/js/prototype/Previewer.js")
|
||||
script(src="/static/js/prototype/ButtonManager.js")
|
||||
if cameraStyle == 'arrows'
|
||||
script Recommendation = FixedCamera;
|
||||
script RecommendedCamera = FixedCamera;
|
||||
else if cameraStyle == 'viewports'
|
||||
script Recommendation = OldFixedCamera;
|
||||
script RecommendedCamera = OldFixedCamera;
|
||||
else if cameraStyle == 'reverse'
|
||||
script Recommendation = ReverseCamera
|
||||
script RecommendedCamera = ReverseCamera
|
||||
script(src="/static/js/prototype/main.js")
|
||||
|
||||
block extrahead
|
||||
|
|
|
@ -50,20 +50,10 @@ CameraContainer.prototype.get = function(i) {
|
|||
return this.cameras[i];
|
||||
}
|
||||
|
||||
CameraContainer.prototype.getById = function(id) {
|
||||
CameraContainer.prototype.getByObject = function(object) {
|
||||
for (var i in this.cameras) {
|
||||
if (this.cameras[i] instanceof FixedCamera || this.cameras[i] instanceof ReverseCamera) {
|
||||
if (this.cameras[i].object3D !== undefined) {
|
||||
if (this.cameras[i].object3D.id == id) {
|
||||
return this.get(i);
|
||||
}
|
||||
}
|
||||
} else if (this.cameras[i] instanceof OldFixedCamera) {
|
||||
if (this.cameras[i].mesh !== undefined) {
|
||||
if (this.cameras[i].mesh.id == id) {
|
||||
return this.get(i);
|
||||
}
|
||||
}
|
||||
if (this.cameras[i].containsObject(object)) {
|
||||
return this.get(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,215 +0,0 @@
|
|||
// Initialization
|
||||
|
||||
// class camera extends THREE.PerspectiveCamera
|
||||
var ReverseCamera = function(arg1, arg2, arg3, arg4, position, target) {
|
||||
THREE.PerspectiveCamera.apply(this, arguments);
|
||||
|
||||
// Set Position
|
||||
if (position === undefined) {
|
||||
this.position = new THREE.Vector3(0,0,5);
|
||||
} else {
|
||||
this.position.x = position.x;
|
||||
this.position.y = position.y;
|
||||
this.position.z = position.z;
|
||||
}
|
||||
|
||||
if (target === undefined)
|
||||
target = new THREE.Vector3(0,0,0);
|
||||
|
||||
var direction = target.clone();
|
||||
direction.sub(this.position);
|
||||
direction.normalize();
|
||||
|
||||
this.target = this.position.clone();
|
||||
this.target.add(Tools.mul(direction,20));
|
||||
|
||||
var geometry = new THREE.Geometry();
|
||||
|
||||
this.center = this.position.clone();
|
||||
var left = Tools.cross(direction, this.up);
|
||||
var other = Tools.cross(direction, left);
|
||||
|
||||
this.center.sub(direction);
|
||||
|
||||
left.normalize();
|
||||
other.normalize();
|
||||
left = Tools.mul(left, 0.1);
|
||||
other = Tools.mul(other, 0.1);
|
||||
|
||||
var pyramidCenter = Tools.diff(this.position, Tools.mul(direction,0.25))
|
||||
geometry.vertices.push(
|
||||
Tools.sum( Tools.sum( this.position, left), other),
|
||||
Tools.diff(Tools.sum( this.position, other), left),
|
||||
Tools.diff(Tools.diff(this.position, left), other),
|
||||
Tools.sum( Tools.diff(this.position, other), left),
|
||||
|
||||
Tools.sum( Tools.sum( this.position, left), other),
|
||||
Tools.diff(Tools.sum( this.position, other), left),
|
||||
Tools.diff(Tools.diff(this.position, left), other),
|
||||
Tools.sum( Tools.diff(this.position, other), left)
|
||||
// Tools.diff(this.position, direction)
|
||||
);
|
||||
|
||||
var lambda = 0.6;
|
||||
for (var i = 0; i < 4; i++)
|
||||
geometry.vertices[i] = Tools.mul(Tools.diff(geometry.vertices[i], Tools.mul(pyramidCenter,lambda)), 1/(1-lambda));
|
||||
|
||||
|
||||
geometry.faces.push(new THREE.Face3(2,0,1), // new THREE.Face3(0,2,1),
|
||||
new THREE.Face3(3,0,2), // new THREE.Face3(0,3,2)
|
||||
|
||||
new THREE.Face3(1,0,4),
|
||||
new THREE.Face3(1,4,5),
|
||||
|
||||
new THREE.Face3(2,1,5),
|
||||
new THREE.Face3(2,5,6),
|
||||
|
||||
new THREE.Face3(7,2,6),
|
||||
new THREE.Face3(7,3,2),
|
||||
|
||||
new THREE.Face3(3,7,4),
|
||||
new THREE.Face3(3,4,0)
|
||||
|
||||
);
|
||||
|
||||
geometry.computeFaceNormals();
|
||||
|
||||
var material = new THREE.MeshLambertMaterial({
|
||||
color : 0xff0000,
|
||||
transparent : true,
|
||||
opacity : 0.5,
|
||||
side: THREE.FrontSide
|
||||
});
|
||||
|
||||
this.mesh = new THREE.Mesh(geometry, material);
|
||||
this.arrow = new THREE.Mesh(new THREE.Geometry(), new THREE.MeshLambertMaterial({color: 0xff0000, side:THREE.BackSide}));
|
||||
|
||||
this.object3D = new THREE.Object3D();
|
||||
this.object3D.add(this.mesh);
|
||||
this.object3D.add(this.arrow);
|
||||
|
||||
this.fullArrow = false;
|
||||
}
|
||||
ReverseCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
|
||||
ReverseCamera.prototype.constructor = ReverseCamera;
|
||||
|
||||
// Update function
|
||||
ReverseCamera.prototype.update = function(mainCamera) {
|
||||
// Compute distance between center of camera and position
|
||||
dist = Tools.norm2(Tools.diff(mainCamera.position, this.center));
|
||||
|
||||
var low_bound = 1;
|
||||
var high_bound = 5;
|
||||
var new_value;
|
||||
|
||||
if (dist < low_bound) {
|
||||
new_value = 0;
|
||||
}
|
||||
else if (dist > high_bound) {
|
||||
new_value = 1;
|
||||
}
|
||||
else {
|
||||
new_value = (dist - low_bound)/(high_bound - low_bound);
|
||||
}
|
||||
|
||||
// Update opacity
|
||||
this.object3D.traverse(function(elt) {
|
||||
if (elt instanceof THREE.Mesh) {
|
||||
elt.material.transparent = new_value < 0.9;
|
||||
elt.material.opacity = new_value;
|
||||
|
||||
if (new_value < 0.1)
|
||||
elt.material.transparent = elt.visible = false;
|
||||
}
|
||||
});
|
||||
|
||||
this.regenerateArrow(mainCamera);
|
||||
}
|
||||
|
||||
ReverseCamera.prototype.regenerateArrow = function(mainCamera) {
|
||||
var vertices = new Array();
|
||||
var t = [0,1];
|
||||
var f0 = mainCamera.position.clone();
|
||||
f0.add(Tools.sum(Tools.mul(this.up,-1), Tools.diff(this.target, this.position).normalize()));
|
||||
var f = [Tools.sum(mainCamera.position, Tools.diff(this.target, this.position)).normalize(), this.position.clone()];
|
||||
|
||||
var first = Tools.diff(mainCamera.target, mainCamera.position);
|
||||
first.normalize();
|
||||
|
||||
var fp = [Tools.mul(first,40), Tools.diff(this.target, this.position)];
|
||||
fp[1].normalize();
|
||||
fp[1].multiplyScalar(4);
|
||||
var hermite = new Hermite.special.Polynom(f0, f[1], fp[1]);
|
||||
|
||||
var up = this.up.clone();
|
||||
var point;
|
||||
var deriv;
|
||||
var limit = this.fullArrow ? 0.1 : 0.3;
|
||||
|
||||
// for (var i = this.fullArrow ? 0 : 0.5; i <= 1.001; i += 0.05) {
|
||||
for (var i = 1; i > limit; i -= 0.025) {
|
||||
point = hermite.eval(i);
|
||||
deriv = hermite.prime(i);
|
||||
up.cross(deriv);
|
||||
up.cross(deriv);
|
||||
up.multiplyScalar(-1);
|
||||
up.normalize();
|
||||
|
||||
var coeff = 0.1;
|
||||
var left = Tools.cross(up, deriv); left.normalize(); left.multiplyScalar(coeff);
|
||||
var other = Tools.cross(deriv, left); other.normalize(); other.multiplyScalar(coeff);
|
||||
|
||||
vertices.push(
|
||||
Tools.sum(Tools.sum(point, left), other),
|
||||
Tools.sum(Tools.diff(point, left), other),
|
||||
Tools.diff(point, Tools.sum(other,left)),
|
||||
Tools.sum(Tools.diff(point, other), left)
|
||||
);
|
||||
}
|
||||
|
||||
var faces = new Array();
|
||||
|
||||
for (var i = 0; i < vertices.length - 4; i+= 4) {
|
||||
faces.push(new THREE.Face3(i,i+1,i+5),new THREE.Face3(i,i+5,i+4),
|
||||
new THREE.Face3(i+1,i+2,i+6),new THREE.Face3(i+1,i+6,i+5),
|
||||
new THREE.Face3(i+2,i+3,i+7),new THREE.Face3(i+2,i+7,i+6),
|
||||
new THREE.Face3(i,i+7,i+3), new THREE.Face3(i,i+4,i+7));
|
||||
}
|
||||
|
||||
var len = vertices.length;
|
||||
faces.push(new THREE.Face3(len-4,len-3,len-2), new THREE.Face3(len-4,len-2,len-1));
|
||||
|
||||
|
||||
this.arrow.geometry.vertices = vertices;
|
||||
this.arrow.geometry.faces = faces;
|
||||
|
||||
// this.arrow.geometry.mergeVertices();
|
||||
this.arrow.geometry.computeFaceNormals();
|
||||
// this.arrow.geometry.computeVertexNormals();
|
||||
this.arrow.geometry.computeBoundingSphere();
|
||||
|
||||
// this.arrow.geometry.vertices[0] = new THREE.Vector3(); // mainCamera.position.clone();
|
||||
// this.arrow.geometry.vertices[1] = this.position.clone();
|
||||
|
||||
this.arrow.geometry.dynamic = true;
|
||||
this.arrow.geometry.verticesNeedUpdate = true;
|
||||
this.arrow.geometry.elementsNeedUpdate = true;
|
||||
this.arrow.geometry.groupsNeedUpdate = true;
|
||||
this.arrow.geometry.normalsNeedUpdate = true;
|
||||
// this.arrow.geometry.facesNeedUpdate = true;
|
||||
|
||||
}
|
||||
|
||||
// Look function
|
||||
ReverseCamera.prototype.look = function() {
|
||||
this.lookAt(this.target);
|
||||
}
|
||||
|
||||
ReverseCamera.prototype.addToScene = function(scene) {
|
||||
scene.add(this);
|
||||
scene.add(this.object3D);
|
||||
}
|
||||
|
||||
ReverseCamera.prototype.traverse = function(callback) {
|
||||
this.object3D.traverse(callback);
|
||||
}
|
|
@ -1,7 +1,7 @@
|
|||
// Initialization
|
||||
|
||||
// class camera extends THREE.PerspectiveCamera
|
||||
var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) {
|
||||
var ArrowCamera = function(arg1, arg2, arg3, arg4, position, target) {
|
||||
THREE.PerspectiveCamera.apply(this, arguments);
|
||||
|
||||
// Set Position
|
||||
|
@ -20,16 +20,34 @@ var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) {
|
|||
direction.sub(this.position);
|
||||
direction.normalize();
|
||||
|
||||
this.center = this.position.clone();
|
||||
this.center.sub(direction);
|
||||
|
||||
this.target = this.position.clone();
|
||||
this.target.add(Tools.mul(direction,20));
|
||||
|
||||
|
||||
this.arrow = new THREE.Mesh(new THREE.Geometry(), new THREE.MeshLambertMaterial({color: 0xff0000, side:THREE.BackSide}));
|
||||
|
||||
this.object3D = new THREE.Object3D();
|
||||
this.object3D.add(this.initExtremity());
|
||||
this.object3D.add(this.arrow);
|
||||
|
||||
this.fullArrow = false;
|
||||
}
|
||||
ArrowCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
|
||||
ArrowCamera.prototype.constructor = ArrowCamera;
|
||||
|
||||
ArrowCamera.prototype.initExtremity = function() {
|
||||
var geometry = new THREE.Geometry();
|
||||
|
||||
this.center = this.position.clone();
|
||||
var direction = this.target.clone();
|
||||
direction.sub(this.position);
|
||||
direction.normalize();
|
||||
|
||||
var left = Tools.cross(direction, this.up);
|
||||
var other = Tools.cross(direction, left);
|
||||
|
||||
this.center.sub(direction);
|
||||
|
||||
left.normalize();
|
||||
other.normalize();
|
||||
|
@ -61,19 +79,11 @@ var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) {
|
|||
});
|
||||
|
||||
this.mesh = new THREE.Mesh(geometry, material);
|
||||
this.arrow = new THREE.Mesh(new THREE.Geometry(), new THREE.MeshLambertMaterial({color: 0xff0000, side:THREE.BackSide}));
|
||||
|
||||
this.object3D = new THREE.Object3D();
|
||||
this.object3D.add(this.mesh);
|
||||
this.object3D.add(this.arrow);
|
||||
|
||||
this.fullArrow = false;
|
||||
return this.mesh;
|
||||
}
|
||||
FixedCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
|
||||
FixedCamera.prototype.constructor = FixedCamera;
|
||||
|
||||
// Update function
|
||||
FixedCamera.prototype.update = function(mainCamera) {
|
||||
ArrowCamera.prototype.update = function(mainCamera) {
|
||||
// Compute distance between center of camera and position
|
||||
dist = Tools.norm2(Tools.diff(mainCamera.position, this.center));
|
||||
|
||||
|
@ -105,7 +115,7 @@ FixedCamera.prototype.update = function(mainCamera) {
|
|||
this.regenerateArrow(mainCamera);
|
||||
}
|
||||
|
||||
FixedCamera.prototype.regenerateArrow = function(mainCamera) {
|
||||
ArrowCamera.prototype.regenerateArrow = function(mainCamera) {
|
||||
var vertices = new Array();
|
||||
var t = [0,1];
|
||||
var f0 = mainCamera.position.clone();
|
||||
|
@ -180,15 +190,19 @@ FixedCamera.prototype.regenerateArrow = function(mainCamera) {
|
|||
}
|
||||
|
||||
// Look function
|
||||
FixedCamera.prototype.look = function() {
|
||||
ArrowCamera.prototype.look = function() {
|
||||
this.lookAt(this.target);
|
||||
}
|
||||
|
||||
FixedCamera.prototype.addToScene = function(scene) {
|
||||
ArrowCamera.prototype.addToScene = function(scene) {
|
||||
scene.add(this);
|
||||
scene.add(this.object3D);
|
||||
}
|
||||
|
||||
FixedCamera.prototype.traverse = function(callback) {
|
||||
ArrowCamera.prototype.traverse = function(callback) {
|
||||
this.object3D.traverse(callback);
|
||||
}
|
||||
|
||||
ArrowCamera.prototype.containsObject = function(object) {
|
||||
return object.parent === this.object3D;
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
// Initialization
|
||||
|
||||
// class camera extends THREE.PerspectiveCamera
|
||||
var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) {
|
||||
ArrowCamera.apply(this, arguments);
|
||||
}
|
||||
FixedCamera.prototype = Object.create(ArrowCamera.prototype);
|
||||
FixedCamera.prototype.constructor = FixedCamera;
|
||||
|
|
@ -130,3 +130,8 @@ OldFixedCamera.prototype.traverse = function(callback) {
|
|||
callback(this.mesh);
|
||||
callback(this.line);
|
||||
}
|
||||
|
||||
OldFixedCamera.prototype.containsObject = function(object) {
|
||||
return object === this.mesh;
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
// Initialization
|
||||
|
||||
// class camera extends THREE.PerspectiveCamera
|
||||
var ReverseCamera = function(arg1, arg2, arg3, arg4, position, target) {
|
||||
ArrowCamera.apply(this, arguments);
|
||||
}
|
||||
ReverseCamera.prototype = Object.create(ArrowCamera.prototype);
|
||||
ReverseCamera.prototype.constructor = ReverseCamera;
|
||||
|
||||
// Overload init
|
||||
ReverseCamera.prototype.initExtremity = function() {
|
||||
var geometry = new THREE.Geometry();
|
||||
|
||||
var direction = this.target.clone();
|
||||
direction.sub(this.position);
|
||||
direction.normalize();
|
||||
|
||||
var left = Tools.cross(direction, this.up);
|
||||
var other = Tools.cross(direction, left);
|
||||
|
||||
left.normalize();
|
||||
other.normalize();
|
||||
left = Tools.mul(left, 0.1);
|
||||
other = Tools.mul(other, 0.1);
|
||||
|
||||
var pyramidCenter = Tools.diff(this.position, Tools.mul(direction,0.25))
|
||||
geometry.vertices.push(
|
||||
Tools.sum( Tools.sum( this.position, left), other),
|
||||
Tools.diff(Tools.sum( this.position, other), left),
|
||||
Tools.diff(Tools.diff(this.position, left), other),
|
||||
Tools.sum( Tools.diff(this.position, other), left),
|
||||
|
||||
Tools.sum( Tools.sum( this.position, left), other),
|
||||
Tools.diff(Tools.sum( this.position, other), left),
|
||||
Tools.diff(Tools.diff(this.position, left), other),
|
||||
Tools.sum( Tools.diff(this.position, other), left)
|
||||
// Tools.diff(this.position, direction)
|
||||
);
|
||||
|
||||
var lambda = 0.6;
|
||||
for (var i = 0; i < 4; i++)
|
||||
geometry.vertices[i] = Tools.mul(Tools.diff(geometry.vertices[i], Tools.mul(pyramidCenter,lambda)), 1/(1-lambda));
|
||||
|
||||
|
||||
geometry.faces.push(new THREE.Face3(2,0,1), // new THREE.Face3(0,2,1),
|
||||
new THREE.Face3(3,0,2), // new THREE.Face3(0,3,2)
|
||||
|
||||
new THREE.Face3(1,0,4),
|
||||
new THREE.Face3(1,4,5),
|
||||
|
||||
new THREE.Face3(2,1,5),
|
||||
new THREE.Face3(2,5,6),
|
||||
|
||||
new THREE.Face3(7,2,6),
|
||||
new THREE.Face3(7,3,2),
|
||||
|
||||
new THREE.Face3(3,7,4),
|
||||
new THREE.Face3(3,4,0)
|
||||
|
||||
);
|
||||
|
||||
geometry.computeFaceNormals();
|
||||
|
||||
var material = new THREE.MeshLambertMaterial({
|
||||
color : 0xff0000,
|
||||
transparent : true,
|
||||
opacity : 0.5,
|
||||
side: THREE.FrontSide
|
||||
});
|
||||
|
||||
this.mesh = new THREE.Mesh(geometry, material);
|
||||
return this.mesh;
|
||||
|
||||
}
|
|
@ -1,5 +1,5 @@
|
|||
// Define Recommendation if not defined
|
||||
var Recommendation = Recommendation || FixedCamera;
|
||||
// Define RecommendedCamera if not defined
|
||||
var RecommendedCamera = RecommendedCamera || FixedCamera;
|
||||
|
||||
function initPeachCastle(scene, collidableObjects, loader, static_path) {
|
||||
// Create loader if not already done
|
||||
|
@ -68,7 +68,7 @@ function createPeachCameras(width, height) {
|
|||
var cams = [];
|
||||
|
||||
var createCamera = function(position, target) {
|
||||
return new Recommendation(
|
||||
return new RecommendedCamera(
|
||||
50,
|
||||
width / height,
|
||||
1,
|
||||
|
|
|
@ -185,7 +185,7 @@ function render() {
|
|||
// Update recommendations (set raycastable if shown)
|
||||
var transform = buttonManager.showArrows ? show : hide;
|
||||
cameras.map(function(camera) {
|
||||
if (camera instanceof Recommendation) {
|
||||
if (camera instanceof RecommendedCamera) {
|
||||
transform(camera);
|
||||
|
||||
camera.traverse(function(elt) {
|
||||
|
@ -213,7 +213,7 @@ function render() {
|
|||
previewer.clear();
|
||||
|
||||
// Hide arrows in recommendation
|
||||
cameras.map(function(camera) { if (camera instanceof Recommendation) hide(camera); });
|
||||
cameras.map(function(camera) { if (camera instanceof RecommendedCamera) hide(camera); });
|
||||
|
||||
// Render preview
|
||||
previewer.render(cameraSelecter.prev, container_size.width(), container_size.height());
|
||||
|
|
|
@ -41,11 +41,7 @@ CameraSelecter.prototype.pointedCamera = function() {
|
|||
if (bestIndex !== undefined) {
|
||||
// if (this.cameras.getById(intersects[bestIndex].object.parent.id) !== undefined) {
|
||||
var obj = intersects[bestIndex].object;
|
||||
if (Recommendation === FixedCamera || Recommendation === ReverseCamera) {
|
||||
return this.cameras.getById(intersects[bestIndex].object.parent.id);
|
||||
} else {
|
||||
return this.cameras.getById(intersects[bestIndex].object.id);
|
||||
}
|
||||
return this.cameras.getByObject(intersects[bestIndex].object);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
|
|
@ -12,9 +12,6 @@ block js
|
|||
script(src="/static/js/Cube.js")
|
||||
script(src="/static/js/ProgressiveSphere.js")
|
||||
script(src="/static/js/Camera.js")
|
||||
script(src="/static/js/FixedCamera.js")
|
||||
script(src="/static/js/OldFixedCamera.js")
|
||||
script(src="/static/js/ReverseCamera.js")
|
||||
script(src="/static/js/BouncingCube.js")
|
||||
script(src="/static/js/BufferGeometryToGeometry.js")
|
||||
script(src="/static/js/PointerCamera.js")
|
||||
|
|
Loading…
Reference in New Issue