Make Camera position to zoom & center the obj file

Questions
,
1

I am new with Three jS ,
I have perspective camera , I need is after AddModel() is loaded , the camera should be fit the model

like below → Expected output

Screenshot 2022-12-26 at 9.57.37 PM
Screenshot 2022-12-26 at 9.57.37 PM1918×1224 52.9 KB

I have following code

function init() {
  camera = new THREE.PerspectiveCamera(
    5,
    window.innerWidth / window.innerHeight,
    1,
    100000
  );
  camera.position.set(0, 0, 500);
  // camera.translateZ(500);
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x23262a);
  group = new THREE.Group();
  scene.add(group);
  // lights

  let light = new THREE.PointLight(0x6c6b6b, 0.1);
    light.position.set(50, 500, 12000/1.5);
    camera.add(light);
    let light2 = new THREE.PointLight(0x969696, 0.5);
    light2.position.set(-50, -250, -11000/1.5);
    camera.add(light2);
    let light3 = new THREE.PointLight(0x969696, 0.5);
    light3.position.set(50, -250, 11000/1.5);
    camera.add(light3);
    let light4 = new THREE.PointLight(0x969696, 0.5);
    light4.position.set(50, -250, -11000/1.5);
    camera.add(light4);

      scene.add(camera);
     
    //let ambientLight = new THREE.AmbientLight(0x6c6b6b, 1);
    let ambientLight = new THREE.AmbientLight(0x6F6F6F, 1.9);
    scene.add(ambientLight);
  // renderer
  renderer = new THREE.WebGLRenderer({
    canvas: webgl,
    antialias: true,
  });
  renderer.setClearColor(0x313339);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.outputEncoding = THREE.sRGBEncoding;
  // controls
  orbit_ctrl = new THREE.OrbitControls(camera, renderer.domElement);
  orbit_ctrl.enableDamping = true;
  orbit_ctrl.dampingFactor = 0.5;
  orbit_ctrl.minDistance = 200;
  orbit_ctrl.maxDistance = 3400;
  orbit_ctrl.keyDownEventZoom = false;
  orbit_ctrl.keyDownEventPAN = false;

  orbit_ctrl.addEventListener("change", render);
  trfm_ctrl = new THREE.TransformControls(camera, renderer.domElement);
  trfm_ctrl.size = 0.05;
  trfm_ctrl.addEventListener("change", render);
  scene.add(trfm_ctrl);
  trfm_ctrl.addEventListener("objectChange", function (e) {
    updateLattice();
    deform();
  });
    
    trfm_ctrl.addEventListener('mouseDown', function () {
        orbit_ctrl.enabled = false;
    });
    trfm_ctrl.addEventListener('mouseUp', function () {
        orbit_ctrl.enabled = true;
    });
  window.addEventListener("resize", onWindowResize);
  window.addEventListener("mousemove", onDocumentMouseMove);
  window.addEventListener("mousedown", onDocumentMouseDown);
  window.addEventListener("keydown", keyDown, false);
  webgl.addEventListener("touchend", touchEndHandle, false);
  webgl.addEventListener("touchstart", touchStartHandle, false);
  webgl.addEventListener("dblclick", handleDblclick, false);
   addModels();
}

function addModels() {
    for (let i = 0; i < filenames.length; i++) {
        addSingleModel(filenames[i]);
    }
}

function addSingleModel(fileName) {
    let properPath = folderpath + "/" + fileName;
    let subd_modifier = new THREE.SubdivisionModifier(0);
    let orig_geom = new THREE.Geometry();
    if (fileName.toLowerCase().includes(".obj")) {
      loaderObj.load(
        properPath,
        function (object) {
          orig_geom = object.children[0].geometry;
          orig_geom = new THREE.Geometry().fromBufferGeometry(orig_geom);
          smooth_geom = orig_geom.clone();
          smooth_geom.mergeVertices();
          smooth_geom.computeFaceNormals();
          smooth_geom.computeVertexNormals();
          subd_modifier.modify(smooth_geom);
          if (
              fileName.includes("jaw") ||
              fileName.toLowerCase().includes("origin")  ||  fileName.toLowerCase() == "lower.obj"
            || fileName.toLowerCase().includes("io post op") ) {
            smooth_mesh = THREE.SceneUtils.createMultiMaterialObject(
              smooth_geom,
              [smooth_materials_jaw[0], smooth_materials_teeth[1]]
            );
          } else
            smooth_mesh = THREE.SceneUtils.createMultiMaterialObject(
              smooth_geom,
              smooth_materials_teeth
            );
          smooth_mesh.position.set(0, 0, 0);
          smooth_mesh.name = fileName;
          objects.push(smooth_mesh);
          group.add(smooth_mesh);
        },
        function (xhr) {
          console.log(
            fileName +
              " " +
              Math.round((xhr.loaded / xhr.total) * 100) +
              "% loaded"
          );
        },
        function (error) {
          console.log("Error loading model: " + error);
        }
      );
    }
}

I have tried but it doesn’t work , I don’t know what’s the problem

function fixTheZOOM() {
    
    let jaw_mesh = group.children.find(function (child) {
      return (
        child.name.includes("jaw") || child.name.toLowerCase().includes("origin")
      );
    });

    
    const boundingBox = new THREE.Box3();
     boundingBox.setFromObject(jaw_mesh.children[0]);

     var center = new THREE.Vector3();
     center = boundingBox.center()


     var size = new THREE.Vector3();
     size = boundingBox.size();

     const fov = camera.fov * (Math.PI / 180);
     const maxDim = Math.max(size.x, size.y, size.z);
     let cameraZ = Math.abs((maxDim / 4) * Math.tan(fov * 2));

     camera.position.z = cameraZ;
    camera.position.y = center.y * 2;
    camera.position.x = center.x;
    camera.updateProjectionMatrix();

    const minZ = boundingBox.min.z;
    const cameraToFarEdge = ( minZ < 0 ) ? -minZ + cameraZ : cameraZ - minZ;

    camera.far = cameraToFarEdge * 3;
    camera.updateProjectionMatrix();

    orbit_ctrl.target = center;
    orbit_ctrl.maxDistance = cameraToFarEdge * 2;


}

Please help me to fix this issue

Thanks in advance

2

Can any one help ?

3

What is the result of your code? Can you share an image or the code on codePen or something else?

4

This topic has been discussed in the past. Have a look at this topic and see if any of the provided sippets work for you.