如何在Three.js中使用从GLTF导入的相机？

没问题，我来一步步教你怎么在Three.js里用上从GLTF导入的相机——其实流程很清晰，跟着下面的步骤来就行：

1. 加载GLTF资源 #

首先你得确保已经正确引入了GLTFLoader，然后用它加载你的GLTF文件：

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
// 初始化渲染器和场景的基础代码...

const loader = new GLTFLoader();
loader.load('your-model-file.gltf', function(gltf) {
  // 加载完成后在这里处理相机逻辑
});

2. 获取导入的相机 #

GLTFLoader会自动把模型里的相机收集到gltf.cameras数组里，同时相机也可能作为子节点存在于gltf.scene中，你可以任选一种方式获取：

方式一：直接从cameras数组提取 #

这是最直接的方法，适合你确定模型里有相机的情况：

// 假设模型中只有一个相机，取数组第一个元素
const importedCamera = gltf.cameras[0];

// 保险起见可以先检查数组长度
if (gltf.cameras.length > 0) {
  const importedCamera = gltf.cameras[0];
  // 接下来使用相机
} else {
  console.warn('导入的GLTF文件里没有相机哦');
}

方式二：遍历场景节点查找 #

如果相机是嵌套在场景层级里的，用遍历的方式更稳妥：

let importedCamera = null;
// 遍历场景所有子节点，找到第一个相机对象
gltf.scene.traverse((child) => {
  if (child.isCamera) {
    importedCamera = child;
    return true; // 找到后停止遍历
  }
});

if (importedCamera) {
  // 拿到相机了，开始用
} else {
  console.warn('在GLTF场景里没找到相机');
}

进阶：按相机名称筛选 #

如果模型里有多个相机，你可以通过名称精准定位：

const targetCamera = gltf.cameras.find(cam => cam.name === 'MainCamera');
if (targetCamera) {
  // 使用这个指定名称的相机
}

3. 用上导入的相机 #

获取到相机后，你只需要确保它在场景中，然后在渲染循环里用它来渲染即可：

// 确保相机被添加到主场景（如果还没在里面的话）
if (!importedCamera.parent) {
  scene.add(importedCamera);
}

// 在渲染循环中使用这个相机
function animate() {
  requestAnimationFrame(animate);
  // 这里用导入的相机代替你原来的相机
  renderer.render(scene, importedCamera);
}
animate();

额外提示 #

• 导入的相机会保留它在建模软件里设置的位置、旋转、投影参数（比如透视相机的fov、近远裁剪面），所以直接用就能还原建模时的视角。
• 如果需要调整相机参数，修改后记得调用importedCamera.updateProjectionMatrix()来更新投影矩阵。

内容的提问来源于stack exchange，提问作者subhashish