Currently, I can provide a partial solution;
I'm unsure of your query, please elaborate.
Your camera is presently controlled by the mouse's position on the page.
function onPointerMove( event ) {
if ( event.isPrimary === false ) return;
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
The provided code processes the movement event and stores the x/y positions
When rendering your scene here
function render() {
// Scene camera position is altered based on cursor position giving 'control' effect
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
..........
renderer.render( scene, camera );
}
If you wish to add zoom functionality, it can be done easily! PerspectiveCamera has native support for zooming:
Simply detect mouse wheel changes (or pinches on mobile) and adjust zoom during rendering!
Mousewheel event in modern browsers
Alternatively; You can discard this code and utilize one of Threejs' built-in control libraries like OrbitControls or FlyControls
EDIT:
In response to a comment:
To globally increase text size, modify the size attribute in your material
material2 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite2, alphaTest: 0.5, transparent: true } );
Threejs provides comprehensive documentation, consider exploring it to understand common parameters!
Moreover, adding zoom capability to the camera allows you to navigate through the depth of the words, enhancing the visual appeal, but the choice depends on your objective.
If my responses have been helpful, please consider marking my answer as "accepted" - Best of luck!