使用多个@theatreJs PerspectiveCamera 进行局部和全局摄像机动画

问：

我正在尝试创造一种视觉错觉，允许从一个场景平滑过渡到另一个场景。为了实现这一点，我尝试使用from for the mobile的相机，但我对局部位置和全局位置知之甚少。所以我决定使用两个，一个放在里面，另一个放在外面。在花了一些时间调整相机参数后，我设法让它按预期工作，有点卡顿，但它起作用了。我在代码下方附上了一个 gif。MeshPortalMaterialreact/three-dreiPerspectiveCameratheatre.jsPerspectiveCameraMeshPortalMaterialthreatre.js

1. 我想知道我是否在整个体验过程中只能使用一台相机？

2. 有没有更好的方法可以做到这一点？

3. 使用时我应该知道的任何注意事项？MeshPortalMaterial

4. 此外，我一直在使用 like 和 的组件，我注意到打开会弄乱材质的颜色和透明度，我尝试使用色彩空间管理，但颜色仍然关闭。这在下面的 gif 中非常明显。react-three/dreiSkySparklesEffectComposerlinear

如果您需要更多信息，请告诉我，我非常感谢我能得到的任何帮助，我一直在挣扎。谢谢。

import { useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { MeshPortalMaterial, ScrollControls, useScroll } from '@react-three/drei'
import { getProject, val } from '@theatre/core'
import studio from '@theatre/studio'
import extension from '@theatre/r3f/dist/extension'
import { editable as e, SheetProvider, PerspectiveCamera } from '@theatre/r3f'

import HomeScene from '@/src/components/scene/HomeScene'

const sheet = getProject('Portfolio Project').sheet('Portfolio Sheet')
studio.initialize()
studio.extend(extension)

const cameraConfig = {
    fov: 60,
    near: 0.1,
    far: 40
}

function Scene() {
    const windowPortalRef = useRef(null)
    const scroll = useScroll()

    useFrame(() => {
        const sequenceLength = val(sheet.sequence.pointer.length)
        sheet.sequence.position = scroll.offset * sequenceLength
    })

    return (
        <>
            <PerspectiveCamera
                theatreKey='Camera'
                makeDefault
                fov={cameraConfig.fov}
                near={cameraConfig.near}
                far={cameraConfig.far}
            />
            <mesh>
                <planeGeometry args={[5, 5, 1]} />
                <MeshPortalMaterial ref={windowPortalRef} blend={0}>
                    <PerspectiveCamera
                        theatreKey='Camera2'
                        makeDefault
                        fov={cameraConfig.fov}
                        near={cameraConfig.near}
                        far={cameraConfig.far}
                    />
                    <HomeScene windowPortalRef={windowPortalRef} />
                </MeshPortalMaterial>
            </mesh>
        </>
    )
}

export default function Experience() {
    return (
        <main className='fixed left-0 top-0 z-0 h-full w-full overflow-hidden'>
            <Canvas
                flat
                // linear
                // eventPrefix='client'
                // eventSource={document.getElementById('root') as HTMLElement}

                gl={{ preserveDrawingBuffer: true }}
            >
                <ScrollControls pages={1} damping={0.5} maxSpeed={1}>
                    <SheetProvider sheet={sheet}>
                        <Scene />
                    </SheetProvider>
                </ScrollControls>
            </Canvas>
        </main>
    )
}