diff --git a/web-service/public/js/bundle.js b/web-service/public/js/bundle.js index 12435e5dfcebf01802f2141c6a69515427285e08..072259d60106fa43fd922c7b1b06f5aba2019643 100644 --- a/web-service/public/js/bundle.js +++ b/web-service/public/js/bundle.js @@ -8959,15 +8959,6 @@ function FTLStream(peer, uri, element) { } this.outer.appendChild(this.play_button); - // Create some controls - this.control_up = document.createElement("BUTTON"); - this.control_up.innerHTML = "Up"; - this.control_up.onclick = () => { - this.translateY += 0.05; - this.updatePose(); - }; - this.outer.appendChild(this.control_up); - this.element.onkeypress = (event) => { console.log(event); switch(event.code) { @@ -8978,6 +8969,15 @@ function FTLStream(peer, uri, element) { } } + this.element.onmousemove = (event) => { + console.log(event); + if (event.buttons == 1) { + this.rotationX += event.movementY * (1/25) * 5.0; + this.rotationY -= event.movementX * (1/25) * 5.0; + this.updatePose(); + } + } + this.rotationX = 0; this.rotationY = 0; this.rotationZ = 0; @@ -9039,7 +9039,7 @@ FTLStream.prototype.updatePose = function() { let poseRY = rematrix.rotateY(this.rotationY); let poseRZ = rematrix.rotateZ(this.rotationZ); let poseT = rematrix.translate3d(this.translateX, this.translateY, this.translateZ); - let pose = [poseT,poseRX,poseRY,poseRZ].reduce(rematrix.multiply); + let pose = [poseRX,poseRY,poseRZ,poseT].reduce(rematrix.multiply); this.setPose(pose); } diff --git a/web-service/public/js/index.js b/web-service/public/js/index.js index 583ff5e01ce176a1d2d3eb8c6515a2bc320ab090..ed196791a7d151a6656793e2769c0c6aade724cd 100644 --- a/web-service/public/js/index.js +++ b/web-service/public/js/index.js @@ -148,15 +148,6 @@ function FTLStream(peer, uri, element) { } this.outer.appendChild(this.play_button); - // Create some controls - this.control_up = document.createElement("BUTTON"); - this.control_up.innerHTML = "Up"; - this.control_up.onclick = () => { - this.translateY += 0.05; - this.updatePose(); - }; - this.outer.appendChild(this.control_up); - this.element.onkeypress = (event) => { console.log(event); switch(event.code) { @@ -167,6 +158,15 @@ function FTLStream(peer, uri, element) { } } + this.element.onmousemove = (event) => { + console.log(event); + if (event.buttons == 1) { + this.rotationX += event.movementY * (1/25) * 5.0; + this.rotationY -= event.movementX * (1/25) * 5.0; + this.updatePose(); + } + } + this.rotationX = 0; this.rotationY = 0; this.rotationZ = 0;