From ecee155751168bf570a33c7b09c938fe479d606d Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Mon, 22 Jun 2015 14:39:41 +0200 Subject: [PATCH] Color of gun sight change when hovering element --- js/Logger.js | 10 ++--- js/MousePointer.js | 80 +++++++++++++++++++++++++--------- js/ProgressiveLoader.js | 4 -- js/prototype/raycasterTools.js | 4 ++ 4 files changed, 68 insertions(+), 30 deletions(-) diff --git a/js/Logger.js b/js/Logger.js index 6251023..318e1ea 100644 --- a/js/Logger.js +++ b/js/Logger.js @@ -11,11 +11,11 @@ BD.Private.sendData = function(url, data) { xhr.open("POST", url, true); xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8"); - xhr.onreadystatechange = function() { - if(xhr.readyState == 4 && xhr.status == 200) { - console.log("Done : " + xhr.responseText); - } - } + // xhr.onreadystatechange = function() { + // if(xhr.readyState == 4 && xhr.status == 200) { + // console.log("Done : " + xhr.responseText); + // } + // } xhr.send(JSON.stringify(data)); } diff --git a/js/MousePointer.js b/js/MousePointer.js index 13ec218..d4c26db 100644 --- a/js/MousePointer.js +++ b/js/MousePointer.js @@ -1,4 +1,5 @@ var MousePointer = function(camera) { + this.domElement = document.createElement('canvas'); this.domElement.style.position = 'absolute'; this.domElement.style.cssFloat = 'top-left'; @@ -6,39 +7,76 @@ var MousePointer = function(camera) { this.size = 10; this.drawn = false; camera.mousePointer = this; + this.style = MousePointer.NONE; } -MousePointer.prototype.render = function() { +MousePointer.NONE = 0; +MousePointer.BLACK = 1; +MousePointer.RED = 2; - if (!this.drawn) { - this.drawn = true; +MousePointer.toColor = function(style) { - var i = container_size.width() / 2; - var imin = i - this.size; - var imax = i + this.size; + switch (style) { - var j = container_size.height() / 2; - var jmin = j - this.size; - var jmax = j + this.size; + case MousePointer.NONE: + return null; + case MousePointer.BLACK: + return '#000000'; + case MousePointer.RED: + return '#ff0000'; - this.ctx.stokeStyle = "black"; - this.ctx.beginPath(); - this.ctx.moveTo(imin, j); - this.ctx.lineTo(imax, j); - this.ctx.moveTo(i, jmin); - this.ctx.lineTo(i, jmax); + } + +} + +MousePointer.prototype.render = function(style) { + + if (this.style !== style) { + + if (style === MousePointer.NONE) { + + // Clear canvas + this.domElement.width = this.domElement.width; + this.style = MousePointer.NONE; + + } else { + + this.domElement.width = this.domElement.width; + + var i = container_size.width() / 2; + var imin = i - this.size; + var imax = i + this.size; + + var j = container_size.height() / 2; + var jmin = j - this.size; + var jmax = j + this.size; + + this.ctx.beginPath(); + this.ctx.moveTo(imin, j); + this.ctx.lineTo(imax, j); + this.ctx.moveTo(i, jmin); + this.ctx.lineTo(i, jmax); + this.ctx.closePath(); + + + this.ctx.lineWidth = 5; + this.ctx.strokeStyle = '#ffffff'; + this.ctx.stroke(); + + this.ctx.lineWidth = 2; + this.ctx.strokeStyle = MousePointer.toColor(style); + this.ctx.stroke(); + + this.style = style; + + } - this.ctx.closePath(); - this.ctx.stroke(); } } MousePointer.prototype.clear = function() { - if (this.drawn) { - this.drawn = false; - this.domElement.width = this.domElement.width; - } + this.render(MousePointer.NONE); } diff --git a/js/ProgressiveLoader.js b/js/ProgressiveLoader.js index 3a97b4f..e586d5d 100644 --- a/js/ProgressiveLoader.js +++ b/js/ProgressiveLoader.js @@ -276,10 +276,6 @@ ProgressiveLoader.prototype.initIOCallbacks = function() { this.socket.on('disconnect', function() { console.log('Finished !'); - self.currentMesh.geometry.computeBoundingSphere(); - if (self.currentMesh.geometry.attributes.normal === undefined) { - self.currentMesh.geometry.computeVertexNormals(); - } self.finished = true; }); } diff --git a/js/prototype/raycasterTools.js b/js/prototype/raycasterTools.js index e355978..6acd441 100644 --- a/js/prototype/raycasterTools.js +++ b/js/prototype/raycasterTools.js @@ -105,6 +105,10 @@ CameraSelecter.prototype.update = function(event, y) { } document.getElementById('container').style.cursor = hovered ? "pointer" : "auto"; + + if (this.cameras.mainCamera().pointerLocked) + this.cameras.mainCamera().mousePointer.render(hovered ? MousePointer.RED : MousePointer.BLACK); + } CameraSelecter.prototype.click = function(event) {