Added recommendations on Mario scene
This commit is contained in:
parent
deb976b97b
commit
dd5ad7f45a
|
@ -16,14 +16,14 @@ function toString(variable) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Test with THREE.Vector3
|
// Test with THREE.Vector3
|
||||||
t = [0,1];
|
// t = [0,1];
|
||||||
f = [new THREE.Vector3(0,0,0), new THREE.Vector3(1,1,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)];
|
// fp = [new THREE.Vector3(0,1,2), new THREE.Vector3(0,0,0)];
|
||||||
|
|
||||||
// Test with doubles
|
// Test with doubles
|
||||||
// t = [0,1];
|
t = [0,1];
|
||||||
// f = [0,1];
|
f = [0,1];
|
||||||
// fp = [-1,-1]0;
|
fp = [-1,-1];
|
||||||
|
|
||||||
var hermite = new Hermite.Polynom(t, f, fp);
|
var hermite = new Hermite.Polynom(t, f, fp);
|
||||||
|
|
||||||
|
|
|
@ -21,8 +21,8 @@ var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) {
|
||||||
direction.normalize();
|
direction.normalize();
|
||||||
|
|
||||||
this.target = this.position.clone();
|
this.target = this.position.clone();
|
||||||
this.target.add(Tools.mul(direction,10));
|
this.target.add(Tools.mul(direction,20));
|
||||||
this.up = new THREE.Vector3(0,0,1);
|
// this.up = new THREE.Vector3(0,0,1);
|
||||||
|
|
||||||
// Compute corners
|
// Compute corners
|
||||||
|
|
||||||
|
@ -30,55 +30,66 @@ var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) {
|
||||||
|
|
||||||
var geometry = new THREE.Geometry();
|
var geometry = new THREE.Geometry();
|
||||||
|
|
||||||
|
var position = this.position.clone();
|
||||||
var left = Tools.cross(direction, this.up);
|
var left = Tools.cross(direction, this.up);
|
||||||
var other = Tools.cross(direction, left);
|
var other = Tools.cross(direction, left);
|
||||||
|
|
||||||
|
position.sub(direction);
|
||||||
|
|
||||||
left.normalize();
|
left.normalize();
|
||||||
other.normalize();
|
other.normalize();
|
||||||
left = Tools.mul(left, 100);
|
left = Tools.mul(left, 0.2);
|
||||||
other = Tools.mul(other, 100);
|
other = Tools.mul(other, 0.2);
|
||||||
|
|
||||||
geometry.vertices.push(Tools.sum(Tools.sum(this.position, left), other),
|
geometry.vertices.push(Tools.sum( Tools.sum( position, left), other),
|
||||||
Tools.diff(Tools.sum(this.position, other),left),
|
Tools.diff(Tools.sum( position, other), left),
|
||||||
Tools.diff(Tools.diff(this.position, left),other),
|
Tools.diff(Tools.diff(position, left), other),
|
||||||
Tools.sum(Tools.diff(this.position, other), left)
|
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),
|
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) {
|
geometry.computeFaceNormals();
|
||||||
var material = new THREE.LineBasicMaterial({ color: '0x000000'});
|
|
||||||
|
(function(self, direction, left, other, position) {
|
||||||
|
var material = new THREE.LineBasicMaterial({ color: '0x000000', transparent: true});
|
||||||
var geometry = new THREE.Geometry();
|
var geometry = new THREE.Geometry();
|
||||||
var direction = Tools.mul(direction, -200);
|
// var direction = Tools.mul(direction, 1);
|
||||||
var target = Tools.sum(self.position, direction);
|
var target = Tools.sum(position, direction);
|
||||||
// geometry.vertices.push(self.position, target);
|
// geometry.vertices.push(position, target);
|
||||||
geometry.vertices.push(
|
geometry.vertices.push(
|
||||||
Tools.sum(Tools.sum(self.position, left), other),
|
Tools.sum(Tools.sum(position, left), other),
|
||||||
Tools.diff(Tools.sum(self.position, other),left),
|
Tools.diff(Tools.sum(position, other),left),
|
||||||
Tools.diff(Tools.diff(self.position, left),other),
|
Tools.diff(Tools.diff(position, left),other),
|
||||||
Tools.sum(Tools.diff(self.position, other), left),
|
Tools.sum(Tools.diff(position, other), left),
|
||||||
Tools.sum(Tools.sum(self.position, left), other),
|
Tools.sum(Tools.sum(position, left), other),
|
||||||
Tools.sum(Tools.diff(self.position, other), left),
|
Tools.sum(Tools.diff(position, other), left),
|
||||||
|
|
||||||
Tools.sum(self.position, direction),
|
Tools.sum(position, direction),
|
||||||
Tools.sum(Tools.sum(self.position, left), other),
|
Tools.sum(Tools.sum(position, left), other),
|
||||||
|
|
||||||
Tools.sum(self.position, direction),
|
Tools.sum(position, direction),
|
||||||
Tools.diff(Tools.sum(self.position, other),left),
|
Tools.diff(Tools.sum(position, other),left),
|
||||||
|
|
||||||
Tools.sum(self.position, direction),
|
Tools.sum(position, direction),
|
||||||
Tools.diff(Tools.diff(self.position, left),other),
|
Tools.diff(Tools.diff(position, left),other),
|
||||||
|
|
||||||
Tools.sum(self.position, direction),
|
Tools.sum(position, direction),
|
||||||
Tools.sum(Tools.diff(self.position, other), left)
|
Tools.sum(Tools.diff(position, other), left)
|
||||||
);
|
);
|
||||||
|
|
||||||
self.line = new THREE.Line(geometry, material);
|
self.border = new THREE.Line(geometry, material);
|
||||||
})(this, direction, left, other);
|
})(this, direction, left, other, position);
|
||||||
|
|
||||||
|
|
||||||
var material = new THREE.MeshBasicMaterial({
|
var material = new THREE.MeshLambertMaterial({
|
||||||
color : 0xff0000,
|
color : 0xff0000,
|
||||||
transparent : true,
|
transparent : true,
|
||||||
opacity : 0.5,
|
opacity : 0.5,
|
||||||
|
@ -95,15 +106,25 @@ FixedCamera.prototype.update = function(position) {
|
||||||
// Compute distance between center of camera and position
|
// Compute distance between center of camera and position
|
||||||
dist = Tools.norm2(Tools.diff(position, this.position));
|
dist = Tools.norm2(Tools.diff(position, this.position));
|
||||||
|
|
||||||
var low_bound = 500;
|
var low_bound = 1;
|
||||||
var high_bound = 500000;
|
var high_bound = 5;
|
||||||
|
var new_value;
|
||||||
|
|
||||||
if (dist < 500)
|
if (dist < low_bound) {
|
||||||
this.mesh.material.opacity = 0;
|
new_value = 0;
|
||||||
else if (dist > 500000)
|
}
|
||||||
this.mesh.material.opacity = 0.5;
|
else if (dist > high_bound) {
|
||||||
else
|
new_value = 1;
|
||||||
this.mesh.material.opacity = (dist - 50)*0.5/(high_bound - low_bound);
|
}
|
||||||
|
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
|
// Look function
|
||||||
|
@ -114,10 +135,10 @@ FixedCamera.prototype.look = function() {
|
||||||
FixedCamera.prototype.addToScene = function(scene) {
|
FixedCamera.prototype.addToScene = function(scene) {
|
||||||
scene.add(this);
|
scene.add(this);
|
||||||
scene.add(this.mesh);
|
scene.add(this.mesh);
|
||||||
scene.add(this.line);
|
scene.add(this.border);
|
||||||
}
|
}
|
||||||
|
|
||||||
FixedCamera.prototype.traverse = function(callback) {
|
FixedCamera.prototype.traverse = function(callback) {
|
||||||
callback(this.mesh);
|
callback(this.mesh);
|
||||||
callback(this.line);
|
callback(this.border);
|
||||||
}
|
}
|
||||||
|
|
|
@ -56,14 +56,15 @@ PointerCamera.prototype.constructor = PointerCamera;
|
||||||
// Update function
|
// Update function
|
||||||
PointerCamera.prototype.update = function() {
|
PointerCamera.prototype.update = function() {
|
||||||
if (this.moving) {
|
if (this.moving) {
|
||||||
|
// Linear version
|
||||||
var position_direction = Tools.diff(this.new_position, this.position);
|
var position_direction = Tools.diff(this.new_position, this.position);
|
||||||
var target_direction = Tools.diff(this.new_target, this.target);
|
var target_direction = Tools.diff(this.new_target, this.target);
|
||||||
|
|
||||||
this.position.add(Tools.mul(position_direction, 0.05));
|
this.position.add(Tools.mul(position_direction, 0.05));
|
||||||
this.target.add(Tools.mul(target_direction, 0.05));
|
this.target.add(Tools.mul(target_direction, 0.05));
|
||||||
|
|
||||||
if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.1 &&
|
if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.01 &&
|
||||||
Tools.norm2(Tools.diff(this.target, this.new_target)) < 0.1) {
|
Tools.norm2(Tools.diff(this.target, this.new_target)) < 0.01) {
|
||||||
// this.position = this.new_position.clone();
|
// this.position = this.new_position.clone();
|
||||||
// this.target = this.new_target.clone();
|
// this.target = this.new_target.clone();
|
||||||
this.moving = false;
|
this.moving = false;
|
||||||
|
@ -72,14 +73,38 @@ PointerCamera.prototype.update = function() {
|
||||||
var forward = Tools.diff(this.target, this.position);
|
var forward = Tools.diff(this.target, this.position);
|
||||||
forward.normalize();
|
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
|
// Don't know why this line works... But thanks Thierry-san and
|
||||||
// Bastien because it seems to work...
|
// 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 {
|
} else {
|
||||||
// Update angles
|
// Update angles
|
||||||
if (this.increasePhi) this.phi += this.sensitivity;
|
if (this.increasePhi) this.phi += this.sensitivity;
|
||||||
|
@ -133,6 +158,11 @@ PointerCamera.prototype.move = function(otherCamera) {
|
||||||
this.moving = true;
|
this.moving = true;
|
||||||
this.new_target = otherCamera.target.clone();
|
this.new_target = otherCamera.target.clone();
|
||||||
this.new_position = otherCamera.position.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
|
// 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 75: case 98: this.decreasePhi = toSet; break; // 2 Down for angle
|
||||||
case 74: case 100: this.increaseTheta = toSet; break; // 4 Left 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 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;
|
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
|
// Static members
|
||||||
PointerCamera.DISTANCE_X = 1000;
|
PointerCamera.DISTANCE_X = 1000;
|
||||||
PointerCamera.DISTANCE_Z = 300;
|
PointerCamera.DISTANCE_Z = 300;
|
||||||
|
|
|
@ -40,17 +40,19 @@ function init() {
|
||||||
container.appendChild(renderer.domElement);
|
container.appendChild(renderer.domElement);
|
||||||
|
|
||||||
// init light
|
// init light
|
||||||
// var directional_light = new THREE.DirectionalLight(0x999999);
|
var directional_light = new THREE.DirectionalLight(0xaaaaaa);
|
||||||
// directional_light.position.set(1, 0.5, 1).normalize();
|
directional_light.position.set(1, 0.5, 1).normalize();
|
||||||
// directional_light.castShadow = true;
|
directional_light.castShadow = true;
|
||||||
// scene.add(directional_light);
|
scene.add(directional_light);
|
||||||
|
|
||||||
var ambient_light = new THREE.AmbientLight(0xffffff);
|
var ambient_light = new THREE.AmbientLight(0x666666);
|
||||||
scene.add(ambient_light);
|
scene.add(ambient_light);
|
||||||
|
|
||||||
// on initialise la camera que l’on place ensuite sur la scène
|
// 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);
|
var camera1 = new PointerCamera(50, container_size.width / container_size.height, 0.01, 100000, container);
|
||||||
camera1.speed = 0.001;
|
camera1.speed = 0.001;
|
||||||
|
camera1.position = new THREE.Vector3(0,2,0);
|
||||||
|
camera1.phi = -0.1;
|
||||||
scene.add(camera1);
|
scene.add(camera1);
|
||||||
cameras.push(camera1);
|
cameras.push(camera1);
|
||||||
|
|
||||||
|
@ -76,6 +78,7 @@ function init() {
|
||||||
object.traverse(function (object) {
|
object.traverse(function (object) {
|
||||||
if (object instanceof THREE.Mesh) {
|
if (object instanceof THREE.Mesh) {
|
||||||
object.geometry.mergeVertices();
|
object.geometry.mergeVertices();
|
||||||
|
object.geometry.computeVertexNormals();
|
||||||
object.material.side = THREE.DoubleSide;
|
object.material.side = THREE.DoubleSide;
|
||||||
if (object.material.name === 'Material.103_princess_peaches_cast') {
|
if (object.material.name === 'Material.103_princess_peaches_cast') {
|
||||||
console.log(object.material.name);
|
console.log(object.material.name);
|
||||||
|
@ -102,6 +105,7 @@ function init() {
|
||||||
object.material.side = THREE.DoubleSide;
|
object.material.side = THREE.DoubleSide;
|
||||||
console.log(object.geometry.vertices.length);
|
console.log(object.geometry.vertices.length);
|
||||||
object.geometry.mergeVertices();
|
object.geometry.mergeVertices();
|
||||||
|
object.geometry.computeVertexNormals();
|
||||||
if (object.material.name === 'Material.054_777F0E0B_c.bmp' ||
|
if (object.material.name === 'Material.054_777F0E0B_c.bmp' ||
|
||||||
object.material.name === 'Material.061_5C3492AB_c.bmp' ) {
|
object.material.name === 'Material.061_5C3492AB_c.bmp' ) {
|
||||||
object.material.transparent = true;
|
object.material.transparent = true;
|
||||||
|
@ -111,17 +115,35 @@ function init() {
|
||||||
}, onProgress, onError );
|
}, onProgress, onError );
|
||||||
|
|
||||||
|
|
||||||
// var camera3 = new FixedCamera(
|
createCamera(
|
||||||
// 50,
|
new THREE.Vector3(-3.349895207953063, 5.148106346852601, 0.3365943929701533),
|
||||||
// container_size.width / container_size.height,
|
new THREE.Vector3(13.114421714865292, -7.783476327687569, -33.74713248359852)
|
||||||
// 1,
|
);
|
||||||
// 100000,
|
|
||||||
// new THREE.Vector3(500,0,500),
|
|
||||||
// new THREE.Vector3(0,0,0)
|
|
||||||
// );
|
|
||||||
|
|
||||||
// camera3.addToScene(scene);
|
createCamera(
|
||||||
// cameras.push(camera3);
|
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);
|
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() {
|
function loadScene() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -171,7 +208,12 @@ function click(event) {
|
||||||
y: - ((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1
|
y: - ((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Show all cameras
|
||||||
|
// cameras.map(show);
|
||||||
|
|
||||||
var camera = cameras.mainCamera();
|
var camera = cameras.mainCamera();
|
||||||
|
|
||||||
|
|
||||||
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
|
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
|
||||||
vector.unproject(camera);
|
vector.unproject(camera);
|
||||||
|
|
||||||
|
@ -185,11 +227,13 @@ function click(event) {
|
||||||
|
|
||||||
// Looking for cameras
|
// Looking for cameras
|
||||||
for (i in intersects) {
|
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
|
// We will not consider a line as clickable
|
||||||
if (! (intersects[i].object instanceof THREE.Line)) {
|
if (! (intersects[i].object instanceof THREE.Line)) {
|
||||||
minDistance = intersects[i].distance;
|
if (!(intersects[i].object instanceof THREE.Mesh && intersects[i].object.material.opacity < 0.1)) {
|
||||||
bestIndex = i;
|
minDistance = intersects[i].distance;
|
||||||
|
bestIndex = i;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -197,6 +241,7 @@ function click(event) {
|
||||||
if (bestIndex !== undefined) {
|
if (bestIndex !== undefined) {
|
||||||
if (cameras.getById(intersects[bestIndex].object.id) !== undefined) {
|
if (cameras.getById(intersects[bestIndex].object.id) !== undefined) {
|
||||||
var new_camera = cameras.getById(intersects[bestIndex].object.id);
|
var new_camera = cameras.getById(intersects[bestIndex].object.id);
|
||||||
|
// hide(new_camera);
|
||||||
cameras.get(0).move(new_camera);
|
cameras.get(0).move(new_camera);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue