Zoom Camera to Object

Questions
1

Hi
I want to achieve one thing when if click the button the camera zoom to image but in my code the box zoom toward me i want camera zoom toward the image in that case background is also which i want
import { OrbitControls } from “https://cdn.jsdelivr.net/npm/three@0.124.0/examples/jsm/controls/OrbitControls.js”;

const canvas = document.querySelector(“canvas”);
const leftZoomBtn = document.querySelector(“.left-box-btn”);
const originalBtn = document.querySelector(“.original-btn”);
const rightZoomBtn = document.querySelector(“.right-box-btn”);

let scene, camera, renderer;
let rotateAroundGroup = true;

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(
45,
canvas.clientWidth / canvas.clientHeight,
0.1,
100
);
camera.position.set(0, 0, 15);

const light = new THREE.HemisphereLight(0xffffff, “cornflowerblue”, 1);
scene.add(light);

const group = new THREE.Group();

const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial();

const box = new THREE.Mesh(geometry, material);
box.position.set(-4, -1, 2);
group.add(box);

const box2 = new THREE.Mesh(geometry, material);
box2.position.set(4, 3.5, -2);
group.add(box2);

const sphere = new THREE.Mesh(
new THREE.SphereBufferGeometry(1, 2, 2),
new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true })
);
group.add(sphere);

scene.add(group);

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.outputEncoding = THREE.sRGBEncoding;
canvas.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableRotate = false;
controls.enableZoom = true; // Enable zooming

const onWindowResize = () => {
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
};

window.addEventListener(“resize”, onWindowResize, false);

const animate = () => {
renderer.render(scene, camera);
requestAnimationFrame(animate);
};

leftZoomBtn.addEventListener(“click”, () => {
camera.position.copy(box.position).add(new THREE.Vector3(0, 0, 5));
controls.target.copy(box.position);
controls.update();
rotateAroundGroup = false;
});

originalBtn.addEventListener(“click”, () => {
camera.position.set(0, 0, 15);
controls.target.set(0, 0, 0);
controls.update();
rotateAroundGroup = true;
});

rightZoomBtn.addEventListener(“click”, () => {
camera.position.copy(box2.position).add(new THREE.Vector3(0, 0, 5));
controls.target.copy(box2.position);
controls.update();
rotateAroundGroup = false;
});

animate();

2

From your code, the camera is zooming:

leftZoomBtn.addEventListener(“click”, () => {
    camera.position.copy(box.position).add(new THREE.Vector3(0, 0, 5));
    controls.target.copy(box.position);
...

It’s just an optical illusion. I’m guessing you have a single box in your scene. You can’t make a difference since the result would be the same. If you add some reference objects around your box, you’ll see that everything is being zoomed in.

1 Like
3

i would not use OC for that, use CC GitHub - yomotsu/camera-controls: A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.

it has a method called fitToBox. it is overall a better orbitcontrols with much more functionality. it will also properly animate towards the goal position instead of just snapping there.

1 Like
4

Thank you I have achieved target which i want