Move the camera towards the object

Questions
1

I have a ball and two meshes on the surface. the camera always looks to the center. I use orbitControls. When clicking on an object, I have an callback event with the name of the object. My goal is to move the Camera in orbit so that it looks exactly at the object. I’m new to Тhreejs. Help me please.

image
image734×643 27.5 KB
to
image
image734×643 29.2 KB 

cameraToObject( name : string ): void{
      
     const object = this.scene.getObjectByName(name);

     .... ???
  
}
3

Have you tried:

controls.target.copy( object.position );
controls.update();
4

position is 0 and the camera does not change position

image
image745×504 29.4 KB

5

if i do like this:

const object = this.scene.getObjectByName(name);
const __box = new Box3().setFromObject( object )
const center = __box.getCenter( new Vector3() )
this.controls.orbitControls.target.copy(center);
this.controls.orbitControls.update();

the camera changes its center of rotation to the center of the object.

ball

6

@R88S

  1. You know position of the ball in world coordinates.
  2. You know position of that part with reddish line “target1” in world coordinates.
  3. Instantiate a new vector and subtract (1) from (2), thus you’ll get kind of direction.
  4. Use .setLength() to set the desired length for (3), something like radius of the ball + some value.
  5. Add (1) to (3) and use this.controls.orbitControls.object.position.copy( _(3)_ ).
  6. this.controls.orbitControls.target.copy( _(1)_ )

After all that stuff, your camera is in front of that part with the reddish line “target1”.

7

i tried to implement it:

  const object = this.scene.getObjectByName(name);
  if (  object == undefined ) return;
  
  const worldOrbit = new Vector3();
  const worldObject = new Vector3();
  
  this.camera.getWorldDirection( worldOrbit ); 
       object.getWorldDirection( worldObject ); 

  const __sub = (new Vector3()).subVectors(worldOrbit, worldObject);
  __sub.setLength( this.camera.getFocalLength());

  this.controls.orbitControls.object.position.copy( __sub )
  this.controls.orbitControls.target.copy( worldOrbit )
  this.controls.orbitControls.update();

ball2
ball2928×714 1.51 MB

I expanded the orbitControl module with a function that rotates the camera at a given angle:

this.rotatPlusAngle = function( theta, phi ){
        scope.lightAnchor.rotateY(-theta);
        sphericalDelta.theta -= theta;
        sphericalDelta.phi -= phi;
        scope.update();
}

it works well.
if I knew how to calculate the angle - theta and phi,
then the question would be reshon
thank, that you helping