Three.js导入FBX文件相机报错非THREE.Camera实例，如何转为合法实例？

Let's break down why you're hitting that "not instance of THREE.Camera" error and how to fix it:

First off, the FBXLoader doesn't always map FBX-native cameras directly to THREE.Camera subclasses. Instead, it often loads them as generic Object3D objects with camera-specific properties attached (like focal length, FOV, near/far planes). That's why your scene.getObjectByName('cam1') call returns something that isn't recognized as a proper Three.js camera.

Here's a step-by-step fix:

1. Inspect the FBX Camera Properties #

First, add a check in your traverse loop to log out the details of the camera object. This will tell you exactly what parameters you can work with:

object.traverse(function (child) {
    if (child.isMesh) {
        child.castShadow = true;
        child.receiveShadow = true;
    }
    // Log camera details
    if (child.name === 'cam1') {
        console.log('FBX Camera Details:', child);
        // You'll likely see properties like focalLength, fov, near, far, sensorWidth here
    }
});

2. Convert FBX Camera Data to a THREE.Camera #

Once you know what properties are available, create a standard Three.js camera and copy over the FBX camera's settings. For a perspective camera (which matches your mention of focal length effects), use this:

object.traverse(function (child) {
    if (child.isMesh) {
        child.castShadow = true;
        child.receiveShadow = true;
    }
    if (child.name === 'cam1') {
        // Extract FBX camera parameters (adjust based on your console log)
        const focalLength = child.focalLength || 50;
        const sensorWidth = child.sensorWidth || 36; // Default to full-frame 36mm
        const near = child.near || 0.1;
        const far = child.far || 1000;
        const aspect = window.innerWidth / window.innerHeight;

        // Calculate FOV from focal length (if FBX doesn't provide fov directly)
        const fov = 2 * Math.atan((sensorWidth / 2) / focalLength) * (180 / Math.PI);

        // Create proper Three.js PerspectiveCamera
        const importedCamera = new THREE.PerspectiveCamera(fov, aspect, near, far);
        
        // Copy position and rotation from the FBX camera object
        importedCamera.position.copy(child.position);
        importedCamera.quaternion.copy(child.quaternion);

        // Add the new camera to your scene
        scene.add(importedCamera);
        // Update your global camera variable
        camera = importedCamera;
    }
});

3. Handle Anamorphic/Focal Length Effects #

Since you mentioned the perspective camera has focal-related anamorphic effects, you might need to add extra handling:

• For mild distortion, you can adjust the camera's aspect ratio or modify its projection matrix directly.
• For more complex anamorphic effects, consider using a post-processing shader (like a barrel distortion shader) applied to your scene render.

Why This Works #

By creating a proper THREE.PerspectiveCamera and copying over the FBX camera's transform and optical properties, you're replacing the generic Object3D with a camera that Three.js recognizes natively. This will fix the "not instance of THREE.Camera" error and let you use the camera as expected in your scene.

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