How to rotate a 3D object on axis - three.js

Question

Here I'm looking to rotate only the object using camera instead of rotating the whole camera around the object. First, the center origin point of the object remains the same where it works properly, but once I pan the object the center of the origin differs and rotates the camera around the object.
https://jsfiddle.net/1ax8hf07/
var scene, renderer, camera;
var cube;
var controls;
var containerWidth = window.innerWidth,
containerHeight = window.innerHeight;
var isDragging = false;
var previousMousePosition = {
x: 0,
y: 0
};
init();
animate();
function init() {
configureRenderer();
scene = new THREE.Scene();
configureCube();
configureCamera();
configureLight();
configureControls();
}
function configureRenderer() {
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.onresize = function () {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
if (controls)
controls.handleResize();
}
}
function configureCube() {
var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000
});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(50, 0, 0);
scene.add(cube);
cubeGeometry.center();
}
function configureCamera() {
camera = new THREE.PerspectiveCamera(45, containerWidth / containerHeight, 1, 1000);
camera.position.set(0, 160, 400);
camera.lookAt(scene);
}
function configureLight() {
pointLight = new THREE.PointLight(0xffffff, 1.0, 100000);
pointLight.position.set(0, 300, 200);
scene.add(pointLight);
}
function configureControls() {
controls = new THREE.TrackballControls(camera, renderer.domElement);
// controls.enabled = false;
controls.update();
controls.object.up.set(0, 0, 1);
}
function animate() {
controls.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
}

Answer 1

I don't know if there is a simpler method but personally when i need to move or rotate something i do it by my self.
In your case i suggest to track the mouse movement and add the rotation to the transformation matrix.
This is how it will be on your code
var scene, renderer, camera;
var cube;
var controls;
var containerWidth = window.innerWidth,
containerHeight = window.innerHeight;
var isDragging = false;
var previousMousePosition = {
x: 0,
y: 0
};
init();
animate();
function init() {
configureRenderer();
scene = new THREE.Scene();
configureCube();
configureCamera();
configureLight();
configureControls();
}
function configureRenderer() {
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.onresize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
if (controls) controls.handleResize();
};
}
function configureCube() {
var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000
});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(50, 0, 0);
scene.add(cube);
cubeGeometry.center();
}
function configureCamera() {
camera = new THREE.PerspectiveCamera(
45,
containerWidth / containerHeight,
1,
1000
);
camera.position.set(0, 160, 400);
camera.lookAt(scene);
}
function configureLight() {
pointLight = new THREE.PointLight(0xffffff, 1.0, 100000);
pointLight.position.set(0, 300, 200);
scene.add(pointLight);
}
function configureControls() {
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.enabled = false;
controls.update();
document.addEventListener("mousedown", onMouseDown, false);
document.addEventListener("mouseup", onMouseUp, false);
}
function onMouseDown() {
previousMousePosition.x = event.clientX;
previousMousePosition.y = event.clientY;
document.addEventListener("mousemove", onMouseMove, false);
}
function onMouseMove(event) {
var rotationX = event.clientX - previousMousePosition.x;
var rotationY = event.clientY - previousMousePosition.y;
previousMousePosition.x = event.clientX;
previousMousePosition.y = event.clientY;
if (rotationX || rotationY) {
rotateAroundWorldAxis(cube, new THREE.Vector3(0, 1, 0), rotationX * 0.01);
rotateAroundWorldAxis(cube, new THREE.Vector3(1, 0, 0), rotationY * 0.01);
}
}
function onMouseUp() {
document.removeEventListener("mousemove", onMouseMove, false);
}
function rotateAroundWorldAxis(object, axis, radians) {
var rotationMatrix = new THREE.Matrix4();
rotationMatrix.makeRotationAxis(axis.normalize(), radians);
rotationMatrix.multiply(object.matrix);
object.matrix = rotationMatrix;
object.rotation.setFromRotationMatrix(object.matrix);
}
function animate() {
controls.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
}