Camera animations / Hotpsots

I was on Sketchfab where i saw this model, and it had hotspots enabled, wherein the camera pans into a specific part of the model



Can anyone help me replicate the same, I have already loaded a 3d car

The labels are HTML based so you can use CSS2DRenderer like demonstrated in the following example to achieve a similar effect.

The animation of the camera can be implemented in various ways. One way is to use tween.js in order to move the camera from one to another position. Per update step, you use Object3D.lookAt() to orient the camera to the hot spot.


Whats the 2020 way for this? i have a imported GLTF and want to change the camera position on clicking a link. My Code below will do it “unsmooth”.

$(".changeCamera").on("click", function(){
	camera.position.set( -100, 200, -100 );
	cameraTarget.position.set( 0, 0, 0 );

So you want to with an animation, right? The mentioned tween.js library is still a good choice for this.

1 Like

Implemented an changed the Code! Thanks a lot. Works.

$(".changeCamera").on("click", function(){

		var tweenTarget = new TWEEN.Tween(cameraTarget.position)
			.to({ x: 0, y: 50, z: 50 }, 2000)

		var tweenCamera = new TWEEN.Tween(camera.position)
			.to({ x: -175, y: 100, z: 125 }, 2000)



function animate() {
	renderer.render(scene, camera);
1 Like