PointerLock should now work correctly
This commit is contained in:
Thomas FORGIONE
parent
3b44c4fd64
commit
38d2b1a4e0
|
|
@ -4,7 +4,8 @@ block title
|
|||
title #{title} - Prototype - Arrows
|
||||
|
||||
block mainjs
|
||||
script(src="/static/js/sponza.min.js")
|
||||
script initMainScene = initSponza
|
||||
script(src="/static/js/prototypeinteractive.min.js")
|
||||
|
||||
block configjs
|
||||
script RecommendedCamera = FixedCamera;
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ PrototypeTools:
|
|||
--js Camera.js \
|
||||
--js PointerCamera.js \
|
||||
--js CameraContainer.js \
|
||||
--js MousePointer.js \
|
||||
--js prototype/ArrowCamera.js \
|
||||
--js prototype/FixedCamera.js \
|
||||
--js prototype/OldFixedCamera.js \
|
||||
|
|
|
|||
|
|
@ -85,7 +85,10 @@ PointerCamera.prototype.lockPointer = function() {
|
|||
|
||||
document.documentElement.requestPointerLock();
|
||||
this.pointerLocked = true;
|
||||
this.mousePointer.render();
|
||||
|
||||
this.mouse.x = this.renderer.domElement.width/2;
|
||||
this.mouse.y = this.renderer.domElement.height/2;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -103,6 +106,7 @@ PointerCamera.prototype.onPointerLockChange = function() {
|
|||
|
||||
this.dragging = false;
|
||||
this.pointerLocked = false;
|
||||
this.mousePointer.clear();
|
||||
|
||||
this.mouseMove.x = 0;
|
||||
this.mouseMove.y = 0;
|
||||
|
|
@ -132,7 +136,7 @@ PointerCamera.prototype.linearMotion = function(time) {
|
|||
if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.01 &&
|
||||
Tools.norm2(Tools.diff(this.target, this.new_target)) < 0.01) {
|
||||
this.moving = false;
|
||||
this.anglesFromVectors();
|
||||
this.anglesFromVectors();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -354,15 +358,17 @@ PointerCamera.prototype.onKeyUp = function(event) {
|
|||
}
|
||||
|
||||
PointerCamera.prototype.onMouseDown = function(event) {
|
||||
this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
|
||||
this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
|
||||
if (!this.shouldLock) {
|
||||
this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
|
||||
this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
|
||||
|
||||
this.dragging = true;
|
||||
this.mouseMoved = false;
|
||||
this.dragging = true;
|
||||
this.mouseMoved = false;
|
||||
}
|
||||
}
|
||||
|
||||
PointerCamera.prototype.onMouseMove = function(event) {
|
||||
if (this.dragging) {
|
||||
if (!this.shouldLock && this.dragging) {
|
||||
var mouse = {x: this.mouse.x, y: this.mouse.y};
|
||||
this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
|
||||
this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ var spheres = new Array(mesh_number);
|
|||
var visible = 0;
|
||||
var stats;
|
||||
var previewer;
|
||||
|
||||
var camera1;
|
||||
var loader;
|
||||
var coins = [];
|
||||
var previousTime;
|
||||
|
|
@ -61,6 +61,9 @@ function init() {
|
|||
// renderer.setSize(container_size.width(), container_size.height());
|
||||
renderer.setClearColor(0x87ceeb);
|
||||
|
||||
// Initialize pointer camera
|
||||
camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, container);
|
||||
|
||||
// Initialize previewer
|
||||
previewer = new Previewer(renderer, scene);
|
||||
previewer.domElement.style.position ="absolute";
|
||||
|
|
@ -74,15 +77,18 @@ function init() {
|
|||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.cssFloat = "top-left";
|
||||
|
||||
// Initialize pointer for pointer lock
|
||||
var pointer = new MousePointer(camera1);
|
||||
pointer.domElement.width = container_size.width();
|
||||
pointer.domElement.height = container_size.height();
|
||||
|
||||
// Add elements to page
|
||||
container.appendChild( stats.domElement );
|
||||
container.appendChild(pointer.domElement);
|
||||
container.appendChild(previewer.domElement);
|
||||
container.appendChild(Coin.domElement);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
// Initialize pointer camera
|
||||
var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, container);
|
||||
|
||||
cameras = initMainScene(camera1, scene, static_path, coins);
|
||||
// cameras = initPeach(camera1, scene, static_path, coins);
|
||||
// cameras = initBobomb(camera1, scene, static_path, coins);
|
||||
|
|
@ -97,6 +103,13 @@ function init() {
|
|||
function initListeners() {
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
// Transmit click event to camera selecter
|
||||
document.addEventListener('mousedown', function(event) {
|
||||
if (event.which == 1)
|
||||
cameraSelecter.clickPointer(event);
|
||||
}, false
|
||||
);
|
||||
|
||||
// Transmit click event to camera selecter
|
||||
container.addEventListener('mousedown', function(event) {
|
||||
if (event.which == 1)
|
||||
|
|
@ -106,9 +119,8 @@ function initListeners() {
|
|||
|
||||
// Update camera selecter when mouse moved
|
||||
container.addEventListener('mousemove', function(event) {
|
||||
cameraSelecter.update(event);
|
||||
}, false
|
||||
);
|
||||
cameraSelecter.update(event);
|
||||
});
|
||||
|
||||
// Escape key to exit fullscreen mode
|
||||
document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
|
||||
|
|
|
|||
|
|
@ -17,6 +17,15 @@ CameraSelecter.prototype.pointedCamera = function() {
|
|||
|
||||
var camera = this.cameras.mainCamera();
|
||||
|
||||
if (camera.pointerLocked) {
|
||||
|
||||
this.mouse.x = this.renderer.domElement.width/2 ;
|
||||
this.mouse.y = this.renderer.domElement.height/2 ;
|
||||
x = 0;
|
||||
y = 0;
|
||||
|
||||
}
|
||||
|
||||
var vector = new THREE.Vector3(x, y, 0.5);
|
||||
vector.unproject(camera);
|
||||
|
||||
|
|
@ -57,12 +66,17 @@ CameraSelecter.prototype.pointedCamera = function() {
|
|||
this.currentPointedCamera = null;
|
||||
}
|
||||
|
||||
CameraSelecter.prototype.update = function(event) {
|
||||
CameraSelecter.prototype.update = function(event, y) {
|
||||
if (event !== undefined) {
|
||||
this.mouse.x = event.offsetX == undefined ? event.layerX : event.offsetX;
|
||||
this.mouse.y = event.offsetY == undefined ? event.layerY : event.offsetY;
|
||||
}
|
||||
|
||||
if (y !== undefined) {
|
||||
this.mouse.x = this.renderer.domElement.width/2;
|
||||
this.mouse.y = this.renderer.domElement.height/2;
|
||||
}
|
||||
|
||||
var previousCamera = this.currentPointedCamera;
|
||||
var hovered = this.pointedCamera();
|
||||
|
||||
|
|
@ -111,3 +125,24 @@ CameraSelecter.prototype.click = function(event) {
|
|||
newCamera.get();
|
||||
}
|
||||
}
|
||||
|
||||
CameraSelecter.prototype.clickPointer = function(event) {
|
||||
if (this.cameras.mainCamera().pointerLocked) {
|
||||
var newCamera = this.pointedCamera();
|
||||
if (newCamera !== undefined && !(newCamera instanceof Coin)) {
|
||||
var event = new BD.Event.ArrowClicked();
|
||||
event.arrow_id = this.cameras.cameras.indexOf(newCamera);
|
||||
event.send();
|
||||
|
||||
newCamera.check();
|
||||
this.cameras.mainCamera().moveHermite(newCamera);
|
||||
buttonManager.updateElements();
|
||||
} else if (newCamera instanceof Coin) {
|
||||
// Coin found, notify server
|
||||
var event = new BD.Event.CoinClicked();
|
||||
event.coin_id = this.coins.indexOf(newCamera);
|
||||
event.send();
|
||||
newCamera.get();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,248 +0,0 @@
|
|||
var isFullscreen = false;
|
||||
var beenFullscreen = false;
|
||||
|
||||
var main_section = document.getElementById('main-section');
|
||||
// var container_size = {
|
||||
// width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
|
||||
// height: function() {
|
||||
// if (!isFullscreen)
|
||||
// return main_section.clientHeight
|
||||
// - document.getElementById('nav').offsetHeight
|
||||
// - document.getElementById('main-div').offsetHeight;
|
||||
// else
|
||||
// return screen.height;
|
||||
// }
|
||||
// };
|
||||
|
||||
var container_size = {
|
||||
width: function() { return 1024; },
|
||||
height: function() { return 768; }
|
||||
}
|
||||
|
||||
// Let's be sure we avoid using global variables
|
||||
var onWindowResize = (function() {
|
||||
|
||||
// Disable scrolling
|
||||
window.onscroll = function () { window.scrollTo(0, 0); };
|
||||
|
||||
var mesh_number = 25;
|
||||
var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0};
|
||||
var bigmesh;
|
||||
var raycaster;
|
||||
var objects = [];
|
||||
var cameras, cameraSelecter;
|
||||
var spheres = new Array(mesh_number);
|
||||
var visible = 0;
|
||||
var stats;
|
||||
var previewer;
|
||||
|
||||
var loader;
|
||||
var coins = [];
|
||||
var previousTime;
|
||||
|
||||
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
BD.disable();
|
||||
|
||||
// Initialize scene
|
||||
scene = new THREE.Scene();
|
||||
renderer = new THREE.WebGLRenderer({alpha:true});
|
||||
|
||||
// Collidable objects to prevent camera from traversing objects
|
||||
var collidableObjects = new Array();
|
||||
|
||||
// Initialize renderer
|
||||
container = document.getElementById('container');
|
||||
container.style.height = container_size.height() + 'px';
|
||||
container.style.width = container_size.width() + 'px';
|
||||
renderer.setSize(container_size.width(), container_size.height());
|
||||
// renderer.setSize(container_size.width(), container_size.height());
|
||||
renderer.shadowMapEnabled = false;
|
||||
renderer.setClearColor(0x87ceeb);
|
||||
|
||||
// Initialize previewer
|
||||
previewer = new Previewer(renderer, scene);
|
||||
previewer.domElement.style.position ="absolute";
|
||||
previewer.domElement.style.cssFloat = 'top-left';
|
||||
previewer.domElement.width = container_size.width();
|
||||
previewer.domElement.height = container_size.height();
|
||||
|
||||
// Initialize stats counter
|
||||
stats = new Stats();
|
||||
stats.setMode(0);
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.cssFloat = "top-left";
|
||||
|
||||
// Add elements to page
|
||||
container.appendChild( stats.domElement );
|
||||
container.appendChild(previewer.domElement);
|
||||
container.appendChild(Coin.domElement);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
// Initialize pointer camera
|
||||
var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.1, 1000, renderer, container);
|
||||
|
||||
// cameras = initMainScene(camera1, scene, static_path, coins);
|
||||
// cameras = initPeach(camera1, scene, static_path, coins);
|
||||
// cameras = initBobomb(camera1, scene, static_path, coins);
|
||||
// cameras = initWhomp(camera1, scene, static_path, coins);
|
||||
// cameras = initMountain(camera1, scene, static_path, coins);
|
||||
cameras = initSponza(camera1, scene, static_path, coins);
|
||||
|
||||
// Add listeners
|
||||
initListeners();
|
||||
}
|
||||
|
||||
function initListeners() {
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
// Transmit click event to camera selecter
|
||||
container.addEventListener('mousedown', function(event) {
|
||||
if (event.which == 1)
|
||||
cameraSelecter.click(event);
|
||||
}, false
|
||||
);
|
||||
|
||||
// Update camera selecter when mouse moved
|
||||
container.addEventListener('mousemove', function(event) {
|
||||
cameraSelecter.update(event);
|
||||
}, false
|
||||
);
|
||||
|
||||
// Escape key to exit fullscreen mode
|
||||
document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
|
||||
|
||||
// HTML Bootstrap buttons
|
||||
buttonManager = new ButtonManager(cameras, previewer);
|
||||
|
||||
// Camera selecter for hover and clicking recommendations
|
||||
cameraSelecter = new CameraSelecter(renderer, scene, cameras, coins, buttonManager);
|
||||
}
|
||||
|
||||
function render() {
|
||||
cameraSelecter.update();
|
||||
|
||||
// Update recommendations (set raycastable if shown)
|
||||
var transform = buttonManager.showArrows ? show : hide;
|
||||
cameras.map(function(camera) {
|
||||
if (camera instanceof RecommendedCamera) {
|
||||
transform(camera);
|
||||
|
||||
camera.traverse(function(elt) {
|
||||
elt.raycastable = buttonManager.showArrows;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Update coins
|
||||
coins.forEach(function(coin) { coin.update(); });
|
||||
|
||||
// Update main camera
|
||||
var currentTime = Date.now() - previousTime;
|
||||
cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime);
|
||||
previousTime = Date.now();
|
||||
|
||||
// Update the recommendations
|
||||
cameras.update(cameras.mainCamera());
|
||||
|
||||
|
||||
// Set current position of camera
|
||||
cameras.look();
|
||||
|
||||
var left = 0, bottom = 0, width = container_size.width(), height = container_size.height();
|
||||
renderer.setScissor(left, bottom, width, height);
|
||||
renderer.enableScissorTest(true);
|
||||
renderer.setViewport(left, bottom, width, height);
|
||||
renderer.render(scene, cameras.mainCamera());
|
||||
|
||||
// Remove borders of preview
|
||||
previewer.clear();
|
||||
|
||||
// Hide arrows in recommendation
|
||||
cameras.map(function(camera) { if (camera instanceof RecommendedCamera) hide(camera); });
|
||||
|
||||
// Render preview
|
||||
previewer.render(cameraSelecter.prev, container_size.width(), container_size.height());
|
||||
}
|
||||
|
||||
function animate() {
|
||||
// Render each frame
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// stats count the number of frames per second
|
||||
stats.begin();
|
||||
render();
|
||||
stats.end();
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
|
||||
container.style.width = container_size.width() + "px";
|
||||
container.style.height = container_size.height() + "px";
|
||||
|
||||
previewer.domElement.width = container_size.width();
|
||||
previewer.domElement.height = container_size.height();
|
||||
|
||||
renderer.setSize(container_size.width(), container_size.height());
|
||||
cameras.forEach(function(camera) {camera.aspect = container_size.width() / container_size.height();});
|
||||
cameras.forEach(function(camera) {camera.updateProjectionMatrix();});
|
||||
render();
|
||||
}
|
||||
|
||||
function hide(object) {
|
||||
object.traverse(function(object) {object.visible = false;});
|
||||
}
|
||||
|
||||
function show(object) {
|
||||
object.traverse(function(object) {object.visible = true;});
|
||||
}
|
||||
|
||||
// onWindowResize will be the only global function
|
||||
return onWindowResize;
|
||||
|
||||
})();
|
||||
|
||||
function fullscreen() {
|
||||
var container = document.getElementById('container');
|
||||
isFullscreen = true;
|
||||
|
||||
if (!beenFullscreen) {
|
||||
beenFullscreen = true;
|
||||
alert('To quit fullscren mode, type ESC key');
|
||||
}
|
||||
|
||||
container.style.position = "absolute";
|
||||
container.style.cssFloat = "top-left";
|
||||
container.style.top = "50px";
|
||||
container.style.bottom = "0px";
|
||||
container.style.left = "0px";
|
||||
container.style.right = "0px";
|
||||
container.style.width="";
|
||||
container.style.height="";
|
||||
container.style.overflow = "hidden";
|
||||
|
||||
onWindowResize();
|
||||
}
|
||||
|
||||
function stopFullscreen() {
|
||||
isFullscreen = false;
|
||||
|
||||
var container = document.getElementById('container');
|
||||
|
||||
container.style.position = "";
|
||||
container.style.cssFloat = "";
|
||||
container.style.top = "";
|
||||
container.style.bottom = "";
|
||||
container.style.left = "";
|
||||
container.style.right = "";
|
||||
container.style.width = container_size.width() + "px";
|
||||
container.style.height = container_size.height() + "px";
|
||||
|
||||
onWindowResize();
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue