Seeking assistance in tweening the rotation of a group in three.js. While I can successfully rotate it, the issue arises when attempting to rotate the group again - it resets back to its original position. I believe there is a simple solution to this problem, but I am struggling to pinpoint it. Any guidance or suggestions would be greatly appreciated.
Please refer to my fiddle for reference: https://jsfiddle.net/jacob_truax/bw3pmLk1/59/
This is the code snippet I have used for the tweening effect:
let isMouseDown = false
let startX = 0
let startY = 0
document.addEventListener("mousedown", function () {
isMouseDown = true
startX = event.pageX
startY = event.pageY
document.body.style.cursor = 'grabbing';
})
document.addEventListener("mouseup", function () {
isMouseDown = false
document.body.style.cursor = 'grab';
})
document.addEventListener("mousemove", function (event) {
if (isMouseDown) {
document.body.style.cursor = 'grabbing'
}
aimX = ((window.innerWidth / 2) - event.pageX) * 0.35
aimY = ((window.innerHeight / 2) - event.pageY) * 0.5
if(isMouseDown) {
aimX = aimX + (event.pageX - startX)
aimY = aimY + (event.pageY - startY)
group.rotation.set(0, ((aimX + (event.pageX - startX)) + (aimY
+ (event.pageY - startY))) / 900, 0)
}
})