I have a different mesh objects in the map. I wanted the functionality where, when a user clicks on a mesh object, the camera get zoomed into that mesh object. I have tried to achieve
this functionality by trying different approaches but I am unable to achieve, you can find main click handler onfloorplanView.js file called siteClickHandler.
export const siteClickHandler = (location) => {
const object = location._polygon;
const mapX = parseFloat(location.mapX);
const mapY = parseFloat(location.mapY);
const intersects = raycaster.intersectObjects(scene.children, true);
object.geometry.computeBoundingBox();
let boundingBox = object.geometry.boundingBox;
const meshPosition = new THREE.Vector3();
// meshPosition.setFromMatrixPosition(object.matrixWorld)
meshPosition.subVectors( boundingBox.max, boundingBox.min );
meshPosition.multiplyScalar( 0.5 );
meshPosition.add( boundingBox.min );
meshPosition.applyMatrix4( object.matrixWorld );
// if (intersects.length) {
// console.log('fitCameraToObject ', { intersects, x: intersects[0].point.x, y: -(intersects[0].point.z) })
// }
// const vector = new THREE.Vector2(intersects[0].point.x, -(intersects[0].point.z))
// const newCameraPosition = new THREE.Vector3();
// newCameraPosition.lerpVectors(camera.position, vector, 0.5);
// camera.zoom = 4;
// const a = new THREE.Vector3();
// object.getWorldPosition(a);
// const distance = camera.position.distanceTo(a);
// camera.setXZ
// camera.position.set(meshPosition.x, meshPosition.y, meshPosition.z);
// camera.position.set(-110.54882971413657, 229.90824809485457, 598.2709912592538);
// camera.position.setX(meshPosition.x);
// camera.position.setY(-(meshPosition.z));
// camera.position.setZ(meshPosition.y);
// camera.lookAt(meshPosition);
// camera.position.copy(meshPosition);
// NEW TEST APPROACH START
// const aabb = new THREE.Box3().setFromObject(object);
// const center = aabb.getCenter( new THREE.Vector3() );
// const size = aabb.getSize( new THREE.Vector3() );
// camera.position.setX(center.x);
// camera.position.setY(center.y + 1);
// camera.position.setZ(center.z + size.z + 1);
// camera.lookAt( object.position ); //important
// NEW TEST APPROACH END
const cameraPosition = camera.position.clone();
console.log("cameraPosition : ", logVector3(cameraPosition));
const targetPosition = meshPosition;
console.log("targetPosition : ", logVector3(targetPosition));
const distance = cameraPosition.sub(targetPosition);
console.log("distance : ", logVector3(distance));
const direction = distance.normalize();
console.log("direction : ", logVector3(direction));
const offset = distance.clone().sub(direction);
console.log("offset : ", logVector3(offset));
let newPos = meshPosition.sub(offset);
// newPos.y = camera.position.y;
console.log('newPos ', logVector3(newPos))
console.log('meshPosition ', logVector3(meshPosition))
camera.position.setX(newPos.x);
camera.position.setY(newPos.y);
camera.position.setZ(newPos.z * 2);
camera.rotation.z = 0;
const zoomFactor = 0.5;
camera.fov *= zoomFactor;
camera.near *= 6;
camera.updateProjectionMatrix();
console.log({ camera, controls, object, mapX, mapY, intersects, meshPosition })
}