Camera movement and points

Questions
,
1

Hello again community. I would like to create camera movements that are related to the sprite points I have added on my model. I looked at this examples here and it’s a really good example of what I would like to achieve but I don’t want to use pre-defined positions for camera and .lookAt function SBEDIT : Online Code Editor.

Screenshot from 2024-08-02 15-16-04
Screenshot from 2024-08-02 15-16-041599×812 39.8 KB

I am doing a more general approach so that I can be able to upload any model and then have points on that model and still achieve the same outcome. On the screenshot provided, I would like to click on a point (indicated by the black arrow) and then my camera should zoom in to the relative position (indicated by the red rectangle) and then it should be displayed on my canvas. I would like to do that for each and every point I have on that model. You contribution would be highly appreciated.

I have this code so far, it’s almost doing what I want but it’s zooming on other parts of the model instead of the ones where the points actually are

let onPointerClick = () => {
                raycaster.setFromCamera(pointer, camera);
                const intersects = raycaster.intersectObjects(getPoints);

                if (intersects.length > 0) {
                    const intersectedPoint = intersects[0].object;

                    const worldScale = new THREE.Vector3();
                    intersectedPoint.getWorldScale(worldScale);
                    const offset = new THREE.Vector3(worldScale.x * 10, worldScale.y * 10, worldScale.z * 10);
                    const newCameraPosition = intersectedPoint.position.clone().add(offset)
                    
                    camera.position.set(intersectedPoint.position.x, intersectedPoint.position.y, intersectedPoint.position.z);
                    camera.position.copy(newCameraPosition);
                    camera.lookAt(intersectedPoint.position);
                    camera.zoom = 3;
                    camera.updateProjectionMatrix();
                } else
                    console.log('No interceptions on this point');

                const intersectedMapLevel = raycaster.intersectObjects(getMapLevels);
                if (intersectedMapLevel.length > 0) {
                    const mapLevel = intersectedMapLevel[0].object;
                } else
                    console.log('No Map Level Intersected');
            }
2

here is another example where the camera zooms to a point relative the target.

2 Likes
3

Was very similar topic here, maybe you will catch some ideas…

1 Like
4

You ought not lookAt the same point as you’re setting the position. It’s the equivalent of trying to look at your own eyeball.
If you need the camera to stay looking forward, you can do something like…

camera.lookAt(camera.localToWorld(new THREE.Vector3(0,0,-1))

Secondly… OrbitControls will Also override what the camera is looking at, since OrbitControls orbits around it’s own .target point. so you will want to do something like:

controls.target.copy( camera.localToWorld(new THREE.Vector3(0,0,-1)) );
2 Likes
5

If anyone is having the same problem as me then I highly recommend checking this example. Thank you very much @seanwasere

1 Like