I am trying to rotate an object along the world axis while considering the direction of the camera, so that the rotation remains consistent even when the camera changes direction.
The current code allows me to rotate a sphere along the world axis. However, when the camera rotates, the sphere's rotation does not take into account the camera's direction. How can I incorporate the camera's direction when rotating the sphere?
const viewport = { width: window.innerWidth, height: window.innerHeight };
// Setting up the scene
let canvas, renderer, camera, scene, controls;
{
renderer = new THREE.WebGLRenderer();
renderer.setSize(viewport.width, viewport.height);
renderer.setPixelRatio(window.devicePixelRatio);
canvas = renderer.domElement;
document.body.appendChild(canvas);
document.body.style.margin = '0px';
}
{
const fov = 45;
const aspect = viewport.width / viewport.height;
const near = 1;
const far = 100;
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.lookAt(0, 0, 0);
camera.position.z = 10;
}
{
scene = new THREE.Scene();
}
{
controls = new THREE.OrbitControls(camera, canvas);
controls.enableDamping = false;
controls.enableZoom = true;
controls.enableRotate = false;
controls.enablePan = false;
controls.autoRotate = true;
}
// Adding objects to the scene
let axesHelper, light, light1, light2, sphere, texture;
{
axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);
}
{
light = new THREE.HemisphereLight(0xffffff, 0x000000);
light1 = new THREE.PointLight(0xffffff);
light1.position.set(10, 0, 0);
light2 = new THREE.PointLight(0xffffff);
light2.position.set(-10, 0, 0);
scene.add(light);
scene.add(light1);
scene.add(light2);
}
{
texture = new THREE.TextureLoader().load('https://threejs.org/manual/examples/resources/images/wall.jpg');
const geometry = new THREE.SphereBufferGeometry(5, 32, 16);
const material = new THREE.MeshPhongMaterial({ color: 0xff0000, map: texture });
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
}
// Function for sphere rotation
const prevCoords = new THREE.Vector2();
const deltaCoords = new THREE.Vector2();
function handleEvent(event) {
const isFirst = event.type === 'mousedown';
const isLast = event.type === 'mouseup';
if(isFirst) {
this.moving = true;
prevCoords.set(event.clientX, event.clientY);
}
else if(isLast) {
this.moving = false;
}
else if(!this.moving) {
return;
}
deltaCoords.set(event.clientX - prevCoords.x, event.clientY - prevCoords.y);
rotateSphere();
prevCoords.set(event.clientX, event.clientY);
}
const vector = new THREE.Vector3();
const quaternion = new THREE.Quaternion();
let axis, angle;
function rotateSphere() {
sphere.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), deltaCoords.y * 0.001);
sphere.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), deltaCoords.x * 0.001);
}
window.addEventListener('mousedown', handleEvent);
window.addEventListener('mousemove', handleEvent);
window.addEventListener('mouseup', handleEvent);
// Rendering the scene
function loop(time) {
controls.update();
renderer.render(scene, camera);
window.requestAnimationFrame(loop);
}
window.requestAnimationFrame(loop);<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>I have managed to obtain the camera direction using:
camera.getWorldDirection(vector);
However, I'm unsure of how to utilize this direction vector to adjust the axis change when the camera's direction changes.