Animation 窗口加载上的动画

我正在使用three.js gltf loader加载一个对象并对其执行一些操作，一切都进展顺利，轨道控制和我的事件侦听器都在工作。我想添加另一个功能，这样当窗口加载时，它会从鸟瞰视图（如查看器位于对象上方）显示对象，并且相机会向正常正面视图前进，然后停止（如查看器与对象面对面）

我曾尝试在网上搜索现有的示例，但无法完全理解是否需要使用两个摄影机或缓慢更改摄影机y轴的动画片段。在Blender或类似工具中制作动画目前还不是一个选项。如果您能提供任何帮助，或给我指出目前的答案，我将不胜感激。 这是我的代码：

//scene
const scene = new THREE.Scene();

//Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 25;
camera.position.y = 6;

const myCanvas = document.getElementById('myCanvas');

const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

const light2 = new THREE.PointLight(0xffffff, 0.5);
scene.add(light2);

//renderer
const renderer = new THREE.WebGLRenderer({
  canvas: myCanvas,
  antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xcfd4d8);
renderer.setPixelRatio(window.deviceSPixelRatio);
document.body.appendChild(renderer.domElement);

//controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 1;
controls.maxDistance = 1000;

//hgroup
const hgroup = new THREE.Object3D();
const loader = new THREE.GLTFLoader();
loader.load(
  'content/hajdukzagltf_bronca.glb',
  function (gltf) {
    gltf.scene.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
          child.castShadow = true;
          child.receiveShadow = true;

        }

      });

    root = gltf.scene;
    hajduk = scene.add(root);
    hajduk.position.set(0, 0, 0);

    const h1 = root.getObjectByName('01');
    const h2 = root.getObjectByName('02');
    const h3 = root.getObjectByName('03');
    const a1 = root.getObjectByName('04');
    const a2 = root.getObjectByName('05');
    const a3 = root.getObjectByName('06');
    const j1 = root.getObjectByName('07');
    const j2 = root.getObjectByName('08');
    const d1 = root.getObjectByName('09');
    const d2 = root.getObjectByName('10');
    const d3 = root.getObjectByName('11');
    const u1 = root.getObjectByName('12');
    const u2 = root.getObjectByName('13');
    const u3 = root.getObjectByName('14');
    const k1 = root.getObjectByName('15');
    const k2 = root.getObjectByName('16');
    const k3 = root.getObjectByName('17');

    hgroup.add(h1);
    hgroup.add(h2);
    hgroup.add(h3);
    hgroup.add(a1);
    hgroup.add(a2);
    hgroup.add(a3);
    hgroup.add(j1);
    hgroup.add(j2);
    hgroup.add(d1);
    hgroup.add(d2);
    hgroup.add(d3);
    hgroup.add(u1);
    hgroup.add(u2);
    hgroup.add(u3);
    hgroup.add(k1);
    hgroup.add(k2);
    hgroup.add(k3);

    scene.add(hgroup);
    console.log(dumpObject(hajduk).join('\n'));
    console.log(hgroup.children);
  }
);

//Raycaster
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let INTERSECTED;

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize, false);

function onDocumentMouseMove(event) {
  event.preventDefault();

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  //console.log(mouse);
}

document.addEventListener('mousemove', onDocumentMouseMove, false);

function onMouseClick() {
  if (INTERSECTED !== null) {
    if (INTERSECTED.name == '01') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '02') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '03') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '04') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '05') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '06') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '07') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '08') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '09') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '10') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '11') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '12') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '13') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '14') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '15') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '16') {
      alert(INTERSECTED.name);
    }else if (INTERSECTED.name == '17') {
      alert(INTERSECTED.name);
    }
  }
}

document.addEventListener('click', onMouseClick, false);

const animate = () => {
  requestAnimationFrame(animate);
  controls.update();
  render();
};

function render() {
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(hgroup.children, true);
  if (intersects.length > 0) {
    if (INTERSECTED != intersects[0].object) {
      if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);

      INTERSECTED = intersects[0].object;
      INTERSECTED.currentHex = INTERSECTED.material.color.setHex();
      INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
    } else {
      if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
      INTERSECTED = null;
    }

    //console.log(INTERSECTED);
  }

  renderer.render(scene, camera);
}

render();
animate();

//object dump function
function dumpVec3(v3, precision = 3) {
  return `${v3.x.toFixed(precision)}, ${v3.y.toFixed(precision)}, ${v3.z.toFixed(precision)}`;
}

function dumpObject(obj, lines = [], isLast = true, prefix = '') {
  const localPrefix = isLast ? '└─' : '├─';
  lines.push(`${prefix}${prefix ? localPrefix : ''}${obj.name || '*no-name*'} [${obj.type}]`);
  const dataPrefix = obj.children.length
     ? (isLast ? '  │ ' : '│ │ ')
     : (isLast ? '    ' : '│   ');
  lines.push(`${prefix}${dataPrefix}  pos: ${dumpVec3(obj.position)}`);
  lines.push(`${prefix}${dataPrefix}  rot: ${dumpVec3(obj.rotation)}`);
  lines.push(`${prefix}${dataPrefix}  scl: ${dumpVec3(obj.scale)}`);
  const newPrefix = prefix + (isLast ? '  ' : '│ ');
  const lastNdx = obj.children.length - 1;
  obj.children.forEach((child, ndx) => {
    const isLast = ndx === lastNdx;
    dumpObject(child, lines, isLast, newPrefix);
  });

  return lines;
}

---

我使用tween.js库轻松地完成了这项工作，我更改了

camera.position.y=55

并添加了以下代码：

var tween = new TWEEN.Tween(camera.position);
tween.to({ y: 6 }, 6000);
tween.start();

我还补充说

TWEEN.update();

我的主要动画功能

---

无论如何，这都要感谢社区。

我使用tween.js库轻松做到了这一点，我更改了

camera.position.y=55

并添加了以下代码：

var tween = new TWEEN.Tween(camera.position);
tween.to({ y: 6 }, 6000);
tween.start();

我还补充说

TWEEN.update();

我的主要动画功能

不管怎样，还是要感谢社区