How to calculate the 'right' lookat position of camera while chose a Object on scene?

Questions
1

as topic, just want a feature like bellow:

while select a object on scene , then move camera view focus on the selected object, although we can use lookat method to focus the selected object with fixed arguments, but it is too trouble if we have many objects parts on the scene …

so that is why I want more simply but effectively solution for the focus eye view .

appreciate with your answers!

2

Not sure if I understood correctly, but if what you mean is that you have complex models with submeshes and want the camera to focus on the root model instead of submesh when clicked, then for example:

// NOTE When loading models do this:
new GLTFLoader().load('./model.glb', (gltf) => {
  scene.add(gltf.scene);

  gltf.scene.traverse(child => {
    child.userData.clickTarget = gltf.scene;
  });
});

// NOTE When listening to clicks do this:
const raycaster = new Three.Raycaster();
const hits = raycaster.intersectObjects(scene.children, true);

if (hits.length) {
  const { object } = hits[0];
  const target = object.userData.clickTarget || object;

  const position = new Three.Vector3();
  target.getWorldPosition(position);

  camera.lookAt(position);
}
1 Like
3

good code , I want focus the part of a object which includes many different sub objects ( parts), not whole object view, just move camera focus on the sub object ( part)

4

I meaning if scene load a complex model which contains many different mesh parts, if pick one then camera focus on it with suitable view point, the camera position / lookAt value might calculate with some formula or solution ?

hope my explain is clean, thanks for your time !

5

But then you don’t really need any additional code, like the above, you just:

const position = new Three.Vector3();
mesh.getWorldPosition(position);

camera.lookAt(position);

(If the submeshes aren’t centered properly, you can also use Box3.getCenter() to calculate proper centre of gravity for the mesh.)

6

thanks for share the code, I use some code example as follows:

function cameraFocusAnimate(foucsData,camera,orbit) {
    new TWEEN.Tween(camera.position)
        .to(
            {
                x: foucsData.camPos.x,
                y: foucsData.camPos.y,
                z: foucsData.camPos.z,
            },
            500
        )
        .easing(TWEEN.Easing.Cubic.Out)
        .start()

    new TWEEN.Tween(orbit.target)
        .to(
            {
                x: foucsData.lookAt.x,
                y: foucsData.lookAt.y,
                z: foucsData.lookAt.z,
            },
            500
        )
        .easing(TWEEN.Easing.Cubic.Out)
        .start()
 
}

above code apply animation, also the camera have to move to right position then lookAt somewhere …

I am fresh on 3js, I just want the feature, if we typing a part object name which contains in the gltf objects tree, then the camera focus on the part object directly . although we can hard code set the position and lookAt value but we still want another solution : may we can calculate the target position & lookAt variable with some way?

7

hi, mesh position is no big problem, question is how to calculate or estimate a ‘correct’ or ‘most good view’ of the camera position ? put the camera to right (maybe should most good view point’) position and look at the target mesh