I am facing issue as it looks like meshes moves along with the camera as they are far away from the camera. in following images shared the wall meshes look from different camera angle. I want to keep the wall mesh fixed irrespective of camera angle.
if enableZoom is true and we zoom in as much as possible and after that if we try to rotate then works correctly. I am not able to figure out how it works when we zoom in 100%
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = true;
this is how it looks like when we zoom out :
camera
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.set(
0,0,3
);
my animate function when isRotating is true, camera should rotate automatically.
let cameraRotationSpeed = 0.001;
function animate() {
requestAnimationFrame(animate);
controls.update(); // Update controls
// Room rotation handled by camera rotation
if (isRotating) {
const angle = Date.now() * cameraRotationSpeed;
const radius = 1.5; // Adjust the radius as needed
camera.position.x = radius * Math.sin(angle);
camera.position.y = 0; // Keep camera at a fixed height inside the room
camera.position.z = radius * Math.cos(angle);
camera.lookAt(new THREE.Vector3(0, 0, 0)); // Look at the center of the room
}
renderer.render(scene, camera);
}
okay the issue was fixed by keeping the value of z closer to 0.
I am seeking for the help in scene rotation with mouse drag, as it stucks sometimes for only when we try to rotate right to left side.
function animate() {
requestAnimationFrame(animate);
controls.update(); // Update controls
if (isRotating) {
const angle = Date.now() * cameraRotationSpeed;
const radius = Math.sqrt(
Math.pow(camera.position.x, 2) + Math.pow(camera.position.z, 2)
);
camera.position.x = radius * Math.sin(angle);
camera.position.z = radius * Math.cos(angle);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
renderer.render(scene, camera);
}
drag handling
//click event capture for updating texture on walls and floor
let isDragging = false;
let mouseDownPosition = new THREE.Vector2();
renderer.domElement.addEventListener("mousedown", (event) => {
mouseDownPosition.set(event.clientX, event.clientY);
isDragging = false;
});
renderer.domElement.addEventListener("mousemove", () => {
isDragging = true;
});
renderer.domElement.addEventListener("mouseup", (event) => {
const mouseUpPosition = new THREE.Vector2(event.clientX, event.clientY);
const distance = mouseUpPosition.distanceTo(mouseDownPosition);
if (distance < 3) {
// Considered a click
onMouseClick(event);
} else {
togglePlayPause(false);
// Considered a drag
}
});
please someone guide.
Thanks in advance 
here is the demo video of the issue. also wondering how can I start rotation from the current position of the camera.
Hey, bro, I want some help. If you don’t mind
bump
still stucked in issue. if anyone could guide
yes, I am beginner, still I will try
yes, I am trying to implement similar
I also want to create something like this, if you can help. I am new to Threejs. Just if you can help me do this, please. I found it everywhere. How can I achieve this, but I can’t find the perfect source?
yes, for that I am also learning the concepts and trying to achieve.
i also try to view your old codepen link and learn something about how can i make something like this but its now broken 
The issue is resolved, the rotation issue was caused due to a invisible divcovering the canvas
1 Like
Thanks @AshhadDevLab for the help. it worked perfectly
Bro actually what are you trying to implement or can you share the code
Again the issue is resolved 
1 Like
issue is resolved now with help of @AshhadDevLab
