Three.js单画布多场景嵌入专属相机无法渲染问题求助

问题原因 #

核心问题是自定义Scene类中内置的相机未设置合理位置参数：

• Three.js的PerspectiveCamera默认坐标是(0, 0, 0)，如果场景物体也在该坐标附近，相机会和物体重叠，导致无法渲染出内容。
• 你外部创建的相机应该是在未贴出的代码中设置了位置（比如camera.position.z = 10），因此能正常显示场景。

另外可以顺带检查灯光位置：如果场景添加了灯光，需确保灯光位置正确，不过从外部相机能正常渲染来看，灯光应该不存在问题。

修复代码示例 #

修改CustomScene1.js，给内置相机设置合理位置：

//... imports
export class CustomScene1 extends THREE.Scene {
     constructor() {
        super();
        this.camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 0.1, 1000);
        // 关键：设置相机位置，避免与场景物体重叠
        this.camera.position.z = 10;
        // 可根据场景物体位置灵活调整，比如物体在原点时相机往后拉即可
        // instantiate 3D objects...
        this.add(meshes);
      }
      //Do the scene stuff...
}

可行架构方案 #

方案1：增强自定义Scene类（延续你当前思路） #

让每个自定义Scene类内置相机、灯光、控制器，封装自身初始化与更新逻辑，实现场景的完全独立：

export class CustomScene1 extends THREE.Scene {
     constructor(rendererDom) {
        super();
        // 初始化相机
        this.camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 0.1, 1000);
        this.camera.position.set(0, 0, 10);
        // 初始化灯光
        this.add(new THREE.AmbientLight(0xffffff, 0.5));
        const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
        dirLight.position.set(5, 5, 5);
        this.add(dirLight);
        // 添加场景物体
        const mesh = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshStandardMaterial());
        this.add(mesh);
        // 封装相机控制器
        this.controls = new OrbitControls(this.camera, rendererDom);
      }
      // 封装场景更新逻辑
      update(deltaTime) {
          this.controls.update();
          // 可添加物体动画等自定义更新逻辑
      }
}

Main.js中调用方式：

//... 导入
const cScene1 = new CustomScene1(renderer.domElement);
const cScene2 = new CustomScene2(renderer.domElement);
let showScene1 = true;
const clock = new THREE.Clock();

const animate = () => {
     requestAnimationFrame(animate);
     const deltaTime = clock.getDelta();
     if(showScene1) {
          cScene1.update(deltaTime);
          renderer.render(cScene1, cScene1.camera);
      } else {
          cScene2.update(deltaTime);
          renderer.render(cScene2, cScene2.camera);
     }
}

方案2：场景管理器模式 #

创建独立管理器类，统一管理所有场景、相机与切换逻辑，避免分散的状态管理：

class SceneManager {
    constructor(renderer) {
        this.renderer = renderer;
        this.scenes = new Map();
        this.activeSceneKey = null;
        this.clock = new THREE.Clock();
    }

    addScene(key, sceneInstance) {
        this.scenes.set(key, sceneInstance);
    }

    switchScene(key) {
        if(this.scenes.has(key)) {
            this.activeSceneKey = key;
        }
    }

    update() {
        const deltaTime = this.clock.getDelta();
        const activeScene = this.scenes.get(this.activeSceneKey);
        if(activeScene && activeScene.update) {
            activeScene.update(deltaTime);
        }
    }

    render() {
        const activeScene = this.scenes.get(this.activeSceneKey);
        if(activeScene) {
            this.renderer.render(activeScene, activeScene.camera);
        }
    }
}

// 使用方式
const sceneManager = new SceneManager(renderer);
sceneManager.addScene('scene1', new CustomScene1(renderer.domElement));
sceneManager.addScene('scene2', new CustomScene2(renderer.domElement));
sceneManager.switchScene('scene1');

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

方案3：独立场景单元类（不继承THREE.Scene） #

不直接继承THREE.Scene，而是创建包含场景、相机、灯光的单元类，解耦性更强，后续修改更灵活：

export class SceneUnit1 {
    constructor(rendererDom) {
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 0.1, 1000);
        this.camera.position.z = 10;
        // 初始化灯光与物体
        this.scene.add(new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshStandardMaterial()));
        this.controls = new OrbitControls(this.camera, rendererDom);
    }

    update(deltaTime) {
        this.controls.update();
        // 自定义更新逻辑
    }
}

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