Initialize scene with camera view from imported glb (with OrbitControls on)

Questions
, ,
1

Hey there!

I need some help with the camera handling in connection with the OrbitControls.

In my code (and please don’t judge. It’s the first time in 3 years I coded) I imported the glb-File with the GLTFLoader.

When I console.log(glbFile) I can see the PerspectiveCamera-Object in that glb.
Then I want to add the camera to the scene and add some OrbitControls (also with that camera from the glb file).
But how do I set the initial view of the scene to the view from the camera with OrbitControls on?
I know that there is the controls.target.set() method, but I only have the camera position.
When I set the controls.target to the camera.position it’s not quite the view I’m looking for.
In theory the controls.target point must be set the “middle point of the viewing object”.

Or there’s another solution?

Please help!

Greetings,
Nicole

Here is my glb loader function:

loader.setDRACOLoader(dracoLoader);
loader.load(glbFile, function (gltf) {
  /* TODO GLB-Datei*/

  const model = gltf.scene;
  console.log(gltf);

  const cameraName = $("#Container").data("modellid").replace(/ /g, "_");
  const cameraFromGLB = gltf.cameras.find(obj => obj.name == cameraName);
  console.log(cameraFromGLB);
  if (cameraFromGLB == undefined) {
    camera.position.set(1, 1, 1);
    controls = new OrbitControls(camera, renderer.domElement);
    error.innerHTML += `<p class="error">Camera with name ${cameraName} not found. Standard camera will be used.</p>`;
  } else {
    camera = cameraFromGLB;
    controls = new OrbitControls(camera, renderer.domElement); // this is the HOT PART
    controls.target.set(camera.position.x, camera.position.y, -camera.position.z);
  }

  scene.add(camera);
  scene.add(new THREE.GridHelper(20, 10));
  scene.add(model);

  controls.update();
  controls.enablePan = true;
  controls.enableDamping = false;

  mixer = new THREE.AnimationMixer(model);
  mixer.addEventListener('finished', function(e) {
    stopActionButton.className = 'btn-viewer hidden';
    element.className = 'btn-viewer active';
    if (activeAction) {
      activeAction.reset();
      activeAction.timeScale = 0;
    }
  });
  actions = {}

  const animationList = gltf.animations;
  /* TODO Suche eine Animation und erzeuge Button dafür*/
  const animationName = $("#Container").data("modellid");

  let clip = animationList.find(obj => obj.name == animationName);
  let action = null;
  if (clip !== undefined) {
    action = mixer.clipAction(clip);
  } else {
    clip = animationList[0];
    action = mixer.clipAction(clip);
    error.innerHTML += `<p class="error">Animation with name ${animationName} could not be found. First animation will be played.</p>`;
  }

  action.clampWhenFinished = true;
  action.loop = THREE.LoopOnce;
  actions[clip.name] = action

  element.type = 'button';
  // element.value = clip.name; TO DO
  element.value = 'Play';
  element.name = clip.name;
  element.className = 'btn-viewer active';
  element.onclick = function () {
    fadeToAction(clip.name, 0.5)
  };
  document.getElementById("AnimationControll").appendChild(element);

  if (clip && action) {
    stopActionButton.type = 'button';
    // element.value = clip.name; TO DO
    stopActionButton.value = 'Stop';
    stopActionButton.name = 'Stop';
    stopActionButton.className = 'btn-viewer hidden';
    stopActionButton.onclick = function () {
      stopAciveAction()
    };
    document.getElementById("AnimationControll").appendChild(stopActionButton);
  }

  document.getElementById('loading').remove();
  animate();
  changeRatio();


}