tforgione
/
3d-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added recommendations on Mario scene

This commit is contained in:
Thomas FORGIONE 2015-04-16 12:23:47 +02:00
parent deb976b97b
commit dd5ad7f45a
4 changed files with 172 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
HermiteTest/js/HermiteTest.js
View File

@ -16,14 +16,14 @@ function toString(variable) {
}
// Test with THREE.Vector3
t = [0,1];
f = [new THREE.Vector3(0,0,0), new THREE.Vector3(1,1,1)];
fp = [new THREE.Vector3(0,1,2), new THREE.Vector3(0,0,0)];
// t = [0,1];
// f = [new THREE.Vector3(0,0,0), new THREE.Vector3(1,1,1)];
// fp = [new THREE.Vector3(0,1,2), new THREE.Vector3(0,0,0)];
// Test with doubles
// t = [0,1];
// f = [0,1];
// fp = [-1,-1]0;
t = [0,1];
f = [0,1];
fp = [-1,-1];
var hermite = new Hermite.Polynom(t, f, fp);

103
js/FixedCamera.js
View File

@ -21,8 +21,8 @@ var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) {
direction.normalize();
this.target = this.position.clone();
this.target.add(Tools.mul(direction,10));
this.up = new THREE.Vector3(0,0,1);
this.target.add(Tools.mul(direction,20));
// this.up = new THREE.Vector3(0,0,1);
// Compute corners
@ -30,55 +30,66 @@ var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) {
var geometry = new THREE.Geometry();
var position = this.position.clone();
var left = Tools.cross(direction, this.up);
var other = Tools.cross(direction, left);
position.sub(direction);
left.normalize();
other.normalize();
left = Tools.mul(left, 100);
other = Tools.mul(other, 100);
left = Tools.mul(left, 0.2);
other = Tools.mul(other, 0.2);
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)
geometry.vertices.push(Tools.sum( Tools.sum( position, left), other),
Tools.diff(Tools.sum( position, other), left),
Tools.diff(Tools.diff(position, left), other),
Tools.sum( Tools.diff(position, other), left),
Tools.sum(position, direction)
);
geometry.faces.push(new THREE.Face3(0,1,2), // new THREE.Face3(0,2,1),
new THREE.Face3(0,2,3) // new THREE.Face3(0,3,2)
new THREE.Face3(0,2,3), // new THREE.Face3(0,3,2)
new THREE.Face3(4,1,2),
new THREE.Face3(4,0,1),
new THREE.Face3(4,3,0),
new THREE.Face3(4,2,3)
);
(function(self, direction, left, other) {
var material = new THREE.LineBasicMaterial({ color: '0x000000'});
geometry.computeFaceNormals();
(function(self, direction, left, other, position) {
var material = new THREE.LineBasicMaterial({ color: '0x000000', transparent: true});
var geometry = new THREE.Geometry();
var direction = Tools.mul(direction, -200);
var target = Tools.sum(self.position, direction);
// geometry.vertices.push(self.position, target);
// var direction = Tools.mul(direction, 1);
var target = Tools.sum(position, direction);
// geometry.vertices.push(position, target);
geometry.vertices.push(
Tools.sum(Tools.sum(self.position, left), other),
Tools.diff(Tools.sum(self.position, other),left),
Tools.diff(Tools.diff(self.position, left),other),
Tools.sum(Tools.diff(self.position, other), left),
Tools.sum(Tools.sum(self.position, left), other),
Tools.sum(Tools.diff(self.position, other), left),
Tools.sum(Tools.sum(position, left), other),
Tools.diff(Tools.sum(position, other),left),
Tools.diff(Tools.diff(position, left),other),
Tools.sum(Tools.diff(position, other), left),
Tools.sum(Tools.sum(position, left), other),
Tools.sum(Tools.diff(position, other), left),
Tools.sum(self.position, direction),
Tools.sum(Tools.sum(self.position, left), other),
Tools.sum(position, direction),
Tools.sum(Tools.sum(position, left), other),
Tools.sum(self.position, direction),
Tools.diff(Tools.sum(self.position, other),left),
Tools.sum(position, direction),
Tools.diff(Tools.sum(position, other),left),
Tools.sum(self.position, direction),
Tools.diff(Tools.diff(self.position, left),other),
Tools.sum(position, direction),
Tools.diff(Tools.diff(position, left),other),
Tools.sum(self.position, direction),
Tools.sum(Tools.diff(self.position, other), left)
Tools.sum(position, direction),
Tools.sum(Tools.diff(position, other), left)
);
self.line = new THREE.Line(geometry, material);
})(this, direction, left, other);
self.border = new THREE.Line(geometry, material);
})(this, direction, left, other, position);
var material = new THREE.MeshBasicMaterial({
var material = new THREE.MeshLambertMaterial({
color : 0xff0000,
transparent : true,
opacity : 0.5,
@ -95,15 +106,25 @@ FixedCamera.prototype.update = function(position) {
// Compute distance between center of camera and position
dist = Tools.norm2(Tools.diff(position, this.position));
var low_bound = 500;
var high_bound = 500000;
var low_bound = 1;
var high_bound = 5;
var new_value;
if (dist < 500)
this.mesh.material.opacity = 0;
else if (dist > 500000)
this.mesh.material.opacity = 0.5;
else
this.mesh.material.opacity = (dist - 50)*0.5/(high_bound - low_bound);
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.mesh.material.transparent = new_value < 0.9;
this.border.material.transparent = new_value < 0.9;
this.mesh.material.opacity = new_value;
this.border.material.opacity = new_value;
}
// Look function
@ -114,10 +135,10 @@ FixedCamera.prototype.look = function() {
FixedCamera.prototype.addToScene = function(scene) {
scene.add(this);
scene.add(this.mesh);
scene.add(this.line);
scene.add(this.border);
}
FixedCamera.prototype.traverse = function(callback) {
callback(this.mesh);
callback(this.line);
callback(this.border);
}

45
js/PointerCamera.js
View File

@ -56,14 +56,15 @@ PointerCamera.prototype.constructor = PointerCamera;
// Update function
PointerCamera.prototype.update = function() {
if (this.moving) {
// Linear version
var position_direction = Tools.diff(this.new_position, this.position);
var target_direction = Tools.diff(this.new_target, this.target);
this.position.add(Tools.mul(position_direction, 0.05));
this.target.add(Tools.mul(target_direction, 0.05));
if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.1 &&
Tools.norm2(Tools.diff(this.target, this.new_target)) < 0.1) {
if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.01 &&
Tools.norm2(Tools.diff(this.target, this.new_target)) < 0.01) {
// this.position = this.new_position.clone();
// this.target = this.new_target.clone();
this.moving = false;
@ -72,14 +73,38 @@ PointerCamera.prototype.update = function() {
var forward = Tools.diff(this.target, this.position);
forward.normalize();
this.phi = Math.asin(forward.z);
this.phi = Math.asin(forward.y);
// Don't know why this line works... But thanks Thierry-san and
// Bastien because it seems to work...
this.theta = Math.atan2(forward.y, forward.x);
this.theta = Math.atan2(forward.x, forward.z);
}
// Hermite polynom version
// var eval = this.hermite.eval(this.t);
// this.position.x = eval.x;
// this.position.y = eval.y;
// this.position.z = eval.z;
// this.target = Tools.sum(this.position, this.hermite.prime(this.t));
// this.t += 0.005;
// if (this.t > 1) {
// this.moving = false;
// // Update phi and theta so that return to reality does not hurt
// var forward = Tools.diff(this.target, this.position);
// forward.normalize();
// this.phi = Math.asin(forward.y);
// // Don't know why this line works... But thanks Thierry-san and
// // Bastien because it seems to work...
// this.theta = Math.atan2(forward.x, forward.z);
// }
} else {
// Update angles
if (this.increasePhi) this.phi += this.sensitivity;
@ -133,6 +158,11 @@ PointerCamera.prototype.move = function(otherCamera) {
this.moving = true;
this.new_target = otherCamera.target.clone();
this.new_position = otherCamera.position.clone();
var t = [0,1];
var f = [this.position.clone(), this.new_position];
var fp = [Tools.diff(this.target, this.position), Tools.diff(this.new_target, this.new_position)];
this.hermite = new Hermite.Polynom(t,f,fp);
this.t = 0;
}
// Look function
@ -162,6 +192,8 @@ PointerCamera.prototype.onKeyEvent = function(event, toSet) {
case 75: case 98: this.decreasePhi = toSet; break; // 2 Down for angle
case 74: case 100: this.increaseTheta = toSet; break; // 4 Left for angle
case 76: case 102: this.decreaseTheta = toSet; break; // 6 Right for angle
case 13: if (toSet) this.log(); break;
}
}
@ -196,6 +228,11 @@ PointerCamera.prototype.onMouseUp = function(event) {
this.dragging = false;
}
PointerCamera.prototype.log = function() {
console.log(this.position.x, this.position.y, this.position.z);
console.log(this.target.x, this.target.y, this.target.z);
}
// Static members
PointerCamera.DISTANCE_X = 1000;
PointerCamera.DISTANCE_Z = 300;

77
prototype/js/main.js vendored
View File

@ -40,17 +40,19 @@ function init() {
container.appendChild(renderer.domElement);
// init light
// var directional_light = new THREE.DirectionalLight(0x999999);
// directional_light.position.set(1, 0.5, 1).normalize();
// directional_light.castShadow = true;
// scene.add(directional_light);
var directional_light = new THREE.DirectionalLight(0xaaaaaa);
directional_light.position.set(1, 0.5, 1).normalize();
directional_light.castShadow = true;
scene.add(directional_light);
var ambient_light = new THREE.AmbientLight(0xffffff);
var ambient_light = new THREE.AmbientLight(0x666666);
scene.add(ambient_light);
// on initialise la camera que l’on place ensuite sur la scène
var camera1 = new PointerCamera(50, container_size.width / container_size.height, 0.01, 100000, container);
camera1.speed = 0.001;
camera1.position = new THREE.Vector3(0,2,0);
camera1.phi = -0.1;
scene.add(camera1);
cameras.push(camera1);
@ -76,6 +78,7 @@ function init() {
object.traverse(function (object) {
if (object instanceof THREE.Mesh) {
object.geometry.mergeVertices();
object.geometry.computeVertexNormals();
object.material.side = THREE.DoubleSide;
if (object.material.name === 'Material.103_princess_peaches_cast') {
console.log(object.material.name);
@ -102,6 +105,7 @@ function init() {
object.material.side = THREE.DoubleSide;
console.log(object.geometry.vertices.length);
object.geometry.mergeVertices();
object.geometry.computeVertexNormals();
if (object.material.name === 'Material.054_777F0E0B_c.bmp' ||
object.material.name === 'Material.061_5C3492AB_c.bmp' ) {
object.material.transparent = true;
@ -111,17 +115,35 @@ function init() {
}, onProgress, onError );
// var camera3 = new FixedCamera(
// 50,
// container_size.width / container_size.height,
// 1,
// 100000,
// new THREE.Vector3(500,0,500),
// new THREE.Vector3(0,0,0)
// );
createCamera(
new THREE.Vector3(-3.349895207953063, 5.148106346852601, 0.3365943929701533),
new THREE.Vector3(13.114421714865292, -7.783476327687569, -33.74713248359852)
);
// camera3.addToScene(scene);
// cameras.push(camera3);
createCamera(
new THREE.Vector3(4.659399030971226, 0.018674883050052597, -2.578139604982815),
new THREE.Vector3(-24.57865295128155, -14.475635296016854, -25.70931529313326)
);
createCamera(
new THREE.Vector3(2.625389073616235, 1.2252620948239699, -4.818718135555419),
new THREE.Vector3(-19.756833131355208, -16.20027570329664, -33.02132017177813)
);
createCamera(
new THREE.Vector3(1.3304975149911331, 0.4836093721106701, -8.60618907952783),
new THREE.Vector3(-1.7713635815431914, 6.271997833695163, -48.06341930106774)
);
createCamera(
new THREE.Vector3(1.2976081760482443, 1.1520399813234647, -10.258148122402845),
new THREE.Vector3(-26.00651734173549, -9.19681009597505, -37.596510029925945)
);
createCamera(
new THREE.Vector3(0.15727187830660858, 2.7251137440572855, -5.84333603646124),
new THREE.Vector3(19.33738702531091, -13.614383891308975, -36.91010284556961)
);
window.addEventListener('resize', onWindowResize, false);
@ -133,6 +155,21 @@ function init() {
}
function createCamera(position, target) {
var camera = new FixedCamera(
50,
container_size.width / container_size.height,
1,
100000,
position,
target
);
camera.addToScene(scene);
cameras.push(camera);
}
function loadScene() {
}
@ -171,7 +208,12 @@ function click(event) {
y: - ((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1
}
// Show all cameras
// cameras.map(show);
var camera = cameras.mainCamera();
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
vector.unproject(camera);
@ -185,18 +227,21 @@ function click(event) {
// Looking for cameras
for (i in intersects) {
if ((intersects[i].distance > 50 && minDistance === undefined) || (intersects[i].distance < minDistance )) {
if ((intersects[i].distance > 0.5 && minDistance === undefined) || (intersects[i].distance < minDistance )) {
// We will not consider a line as clickable
if (! (intersects[i].object instanceof THREE.Line)) {
if (!(intersects[i].object instanceof THREE.Mesh && intersects[i].object.material.opacity < 0.1)) {
minDistance = intersects[i].distance;
bestIndex = i;
}
}
}
}
if (bestIndex !== undefined) {
if (cameras.getById(intersects[bestIndex].object.id) !== undefined) {
var new_camera = cameras.getById(intersects[bestIndex].object.id);
// hide(new_camera);
cameras.get(0).move(new_camera);
}
}