Clicking on a Mesh Object and zooming into it

Questions
, , ,
1

Hi, 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 clickLocationHandler I have created a sandbox for your reference https://codesandbox.io/s/tender-edison-nhnszt?file=/src/App.js

2

since you’re already using react, use r3f and you get an eco system that has all these things done for you.

had a mapping prototype lying around as well if it helps: SVG maps with HTML annotations - CodeSandbox

3

The same functionality has been used over different maps of my application. So, refactoring will take a lot of time. Is it possible to do this in the native THREE.sj way ?

4

that is the problem, there is no threejs way, because imperative systems don’t have eco systems. you will write mostly everything yourself scraping bits and pieces off stack overflow. that is why react exists, it used to be the same with the dom, but nowadays you npm install whatever package you need and use it. math is math though, the second link has a simple quaternion.slerp towards goal position, you can re-use that code.

5

I ended up resolving this by changing the controls target position because of which my camera lookAt was only pointing at (0,0,0). Thank you for your help.

	const object = location._polygon;

	object.geometry.computeBoundingBox();

	let boundingBox = object.geometry.boundingBox;
	const meshPosition = new THREE.Vector3();
	meshPosition.subVectors(boundingBox.max, boundingBox.min);
	meshPosition.multiplyScalar(0.5);
	meshPosition.add(boundingBox.min);
	meshPosition.applyMatrix4(object.matrixWorld);

	camera.position.setX(meshPosition.x + 100);
	camera.position.setY(meshPosition.y + 200);
	camera.position.setZ(meshPosition.z + 100);

	controls.target.setX(meshPosition.x);
	controls.target.setY(meshPosition.y);
	controls.target.setZ(meshPosition.z);
	controls.update();
1 Like