I'm currently developing a simple editor for Three.js. My goal is to enable the rotation, movement, and scaling of objects with ease.
While utilizing the basic functions gets the job done, I find it slightly perplexing at times.
cube.rotation.z = Math.PI * val;
cube.rotation.x = Math.PI * val;
cube.position.z = val * -1;
cube.scale.y = val;
My aim is to rotate the object in a direction rather than along an axis, considering the angle of the camera's view.
You can see this concept demonstrated in action through a codepen: https://codepen.io/arpo/pen/LxyoRJ
The functionality works smoothly when all other inputs remain untouched. When you adjust the "Rotate Left Right" range, the cube rotates on the z-axis. However, if you move the "Rotate Back Front" range all the way to the right and then manipulate "Rotate Left Right" again, the rotation seems to happen around the Y-axis. This behavior applies to the other inputs as well.
Although I comprehend why this occurs, I am uncertain how to achieve the desired effect. Additionally, I would like this interaction to be based on the camera's perspective. For example, if you shift the camera to the left and then modify the "Move Back Forward" range, the cube should either move away or closer to the user.
Essentially, I wish for the cube to swing left or right from the user's viewpoint when using the rotate function and to be pushed further away if adjusting the move feature.