Three.js加载含PerspectiveCamera的对象后切换相机的实现方法

嘿，我看了你的代码，发现你其实绕了个不必要的弯路——你完全不需要新建一个PerspectiveCamera，直接复用加载进来的那个相机就行！这不仅更简洁，还能避免复制参数时可能出现的疏漏，同时保证相机跟着你的avatar对象一起移动（如果需要的话）。

下面是针对你问题的具体修改方案：

1. 修正相机获取与使用逻辑 #

你之前新建了一个相机，但其实可以直接把加载到的相机设为场景的活跃相机，省去参数复制的步骤：

const fAddSc = function (obj) {
    // 获取加载对象中的相机（确保名字和模型里的完全匹配！）
    const cam = obj.getObjectByName("PerspectiveCamera 1");
    if (!cam) {
        console.warn("没有找到名为'PerspectiveCamera 1'的相机");
        return;
    }

    // 直接将全局camera变量指向加载的相机，同时设置场景活跃相机
    camera = cam;
    scene.activeCamera = camera;

    // 设置avatar的位置
    obj.position.set(0, 0.5, -4);
    scene.add(obj);

    // 初始化OrbitControls，绑定到加载的相机上
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enabled = true;
    // 可选：开启阻尼效果，让旋转更平滑
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;

    console.log("已切换到加载的相机", camera);
    console.log("场景活跃相机", scene.activeCamera);
};

2. 修正OrbitControls的导入方式 #

你使用的第三方orbit-controls-es6包可能和当前Three.js版本不兼容，建议换成Three.js官方提供的OrbitControls：

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

3. 关键补充：处理窗口Resize与渲染循环 #

别忘了在你的代码中添加窗口Resize事件监听，保证相机的宽高比正确更新；同时在渲染循环里调用controls.update()（如果开启了阻尼效果的话必须加）：

// 窗口Resize监听
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

// 渲染循环示例
function animate() {
    requestAnimationFrame(animate);
    // 如果开启了阻尼，必须调用update
    controls.update();
    renderer.render(scene, camera);
}
animate();

可能的排查点 #

• 确认模型中的相机名字确实是"PerspectiveCamera 1"（注意大小写、空格，名字完全匹配才能获取到）
• 如果加载的相机是avatar的子对象，当你移动avatar时，相机会自动跟着移动，这是正常的（如果你不想让相机跟着移动，可以把相机从avatar上移除，再添加到场景中）

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