Understanding Object Rotation in Three.js

The issue you're experiencing with your object's position changing unexpectedly during rotation is a common challenge in 3D graphics. This behavior occurs because of how rotations work in Three.js and 3D space in general.

Why Position Changes During Rotation

When you apply rotations to an object in Three.js using rotation.set(), you're applying Euler angle rotations. These rotations are applied in a specific order (by default XYZ), and each rotation is relative to the already rotated coordinate system, not the original world coordinates. This can lead to what's known as "gimbal lock" and unexpected position changes, especially when:

1. The object's pivot point (origin) is not at its visual center
2. Multiple rotations are applied sequentially
3. The object is a child of another transformed object

Solutions to Consider

1. Use Quaternions Instead of Euler Angles

Quaternions can help avoid gimbal lock issues:

JAVASCRIPTCopied
// Convert your Euler angles to quaternion
const quaternion = new THREE.Quaternion();
const euler = new THREE.Euler(this.degX / 10, this.degY / 10, this.degZ / 10);
quaternion.setFromEuler(euler);
this.activatedObject.quaternion.copy(quaternion);

2. Reset Position After Rotation

If the object needs to stay at a specific position:

JAVASCRIPTCopied
// Store the original position
const originalPosition = this.activatedObject.position.clone();

// Apply rotation
this.activatedObject.rotation.set(this.degX / 10, this.degY / 10, this.degZ / 10);

// Reset to original position
this.activatedObject.position.copy(originalPosition);

3. Adjust the Pivot Point

If the object is rotating around a point that's not its center:

JAVASCRIPTCopied
// Create a group to serve as a pivot point
const pivotGroup = new THREE.Group();
scene.add(pivotGroup);

// Add your object to the group and offset it
pivotGroup.add(this.activatedObject);
this.activatedObject.position.set(offsetX, offsetY, offsetZ); // Offset from pivot

// Then rotate the group instead
pivotGroup.rotation.set(this.degX / 10, this.degY / 10, this.degZ / 10);

4. Use Object3D.rotateOnAxis()

For more controlled rotations around specific axes:

JAVASCRIPTCopied
// Define rotation axes
const xAxis = new THREE.Vector3(1, 0, 0);
const yAxis = new THREE.Vector3(0, 1, 0);
const zAxis = new THREE.Vector3(0, 0, 1);

// Reset rotation first if needed
this.activatedObject.rotation.set(0, 0, 0);

// Apply rotations one by one
this.activatedObject.rotateOnAxis(xAxis, this.degX / 10);
this.activatedObject.rotateOnAxis(yAxis, this.degY / 10);
this.activatedObject.rotateOnAxis(zAxis, this.degZ / 10);

Additional Considerations

• Make sure your camera controls (if using OrbitControls or similar) aren't affecting your perception of the object's position
• If using ArcballControls, be aware that unlike OrbitControls, it doesn't maintain a fixed "up" vector, which can make rotations appear to affect position
• Check if your object has any parent objects with transformations that might be affecting its global position

Try these approaches and see which one resolves your specific issue with unexpected position changes during rotation.