Whenever I click a button, the rotation function is activated and allows me to rotate an object by hovering over it with my mouse.
Now, I want to modify this behavior so that the object rotates only when I click on it and move the mouse (while holding down the mouse button). The rotation should stop once I release the mouse button.
Here's my code:
HTML:
<div class="model__3d" ref="panel3d">
<a class="button" @click.prevent="rotatemouse()">360</a>
JavaScript Code:
rotatemouse() {
document.querySelector('.model__3d').addEventListener('mousedown', () =>{
document.onmousemove = handleMouseMove;
});
//document.onmouseup = function () {
document.querySelector('.model__3d').addEventListener('mouseup', () =>{
document.onmousemove = null;
});
//function handleMouseMove(event) {
document.querySelector('.model__3d').addEventListener('mousemove', (event) =>{
let eventDoc, doc, body;
event = event || window.event;
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
if(maxX == 0){
maxX = event.pageX;
}
if(maxY == 0){
maxY = event.pageY;
}
if(event.pageX > maxX){
console.log("Right");
this.model.rotation.y = this.model.rotation.y + 0.08;
maxX = event.pageX;
}
else {
console.log("Left");
this.model.rotation.y = this.model.rotation.y - 0.08;
maxX = event.pageX;
}
if(event.pageY > maxY){
console.log("Up");
if(this.model.rotation.x < 0.32)
this.model.rotation.x = this.model.rotation.x + 0.08;
console.log(this.model.rotation.x);
maxY = event.pageY;
}
else {
console.log("Down");
if(this.model.rotation.x > -0.25)
this.model.rotation.x = this.model.rotation.x - 0.08;
console.log(this.model.rotation.x);
maxY = event.pageY;
}
});
}
Thank you!