Camera animations / Hotpsots

Questions
, ,
1

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

Link: https://sketchfab.com/3d-models/aaton-35-gltf-6498b1e966a7457f911e06dc16c77423

Images:

09%20PM
Screenshot 2019-08-27 at 3.51.09 PM.jpg2608Ă—1600 571 KB
19%20PM
Screenshot 2019-08-27 at 3.51.19 PM.jpg2608Ă—1600 582 KB
25%20PM
Screenshot 2019-08-27 at 3.51.25 PM.jpg2608Ă—1600 575 KB

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

2

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

https://threejs.org/examples/css2d_label

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.

3 Likes
3

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 );
});
4

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

1 Like
5

Implemented https://github.com/tweenjs/tween.js 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)
			.start();

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

		animate();

	});



function animate() {
	requestAnimationFrame(animate);
	TWEEN.update();
	renderer.render(scene, camera);
	controls.update();
}
1 Like