ThreeJS Object rotation - object

Question

Two questions:
1) Why is it so hard to find an example where a 3D object is freely rotating according to mouse movement, for example, if I were to do the following for an object:
object.rotation.x += 1;
object.rotation.y += 1;
The object will not always rotate at the same degree, this seems to be a mathematical problem, does someone have an example or a mathematical explaination for how rotation works, I believe there's something that needs to be implemented for the change in the center of geometry.
When an object has more than 2 center of geometries, for example in the case of an object with different morph targets, why is there only one bounding box, is there an easy way to find the center of geometry for the bounding box at each morph target instead of just an average center of geometry?

Answer 1

Not sure what you're going for, but is it something like this:
https://jsfiddle.net/72p3z0Lh/27/
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var screenX = 0;
var screenY = 0;
var deltaX = 0;
var deltaY = 0;
renderer.domElement.addEventListener('mousemove', function(event) {
deltaX = event.screenX - screenX;
deltaY = event.screenY - screenY;
screenX = event.screenX;
screenY = event.screenY;
});
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.x = 5;
camera.position.y= 2;
camera.lookAt(new THREE.Vector3(0,0,0));
cube.geometry.translate( -.5, 0, 0 ); //Center Offset
var render = function() {
requestAnimationFrame(render);
cube.rotateOnAxis(cube.worldToLocal(camera.up.clone()).normalize(), deltaX / 20);
cube.rotateOnAxis(cube.worldToLocal(camera.getWorldDirection().clone().cross(camera.up)).normalize(), deltaY / 20);
deltaX = 0;
deltaY = 0;
renderer.render(scene, camera);
};
render();