渲染到平面纹理的场景中的 Three.JS 相机控件？答案

【问题标题】：Three.JS camera controls in a scene thats rendered onto a planes texture?渲染到平面纹理的场景中的 Three.JS 相机控件？
【发布时间】：2021-01-15 19:36:18
【问题描述】：

基本上我想在以下示例中使用相机控件在平面中旋转框。每次我尝试添加相机控件时，我都会旋转飞机。最终我想用scrollevents移动飞机并用控件旋转飞机上的场景。

function Box(props) {
    return (
        <mesh {...props}>
            <boxBufferGeometry args={[60, 60, 60]} />
            <meshNormalMaterial />
        </mesh>
    );
}

function Plane() {
    const cam = useRef();
    const [scene, target] = React.useMemo(() => {
        const scene = new THREE.Scene();
        scene.background = new THREE.Color('orange');
        const target = new THREE.WebGLMultisampleRenderTarget(
            window.innerWidth,
            window.innerHeight,
            {
                minFilter: THREE.LinearFilter,
                magFilter: THREE.LinearFilter,
                format: THREE.RGBFormat,
                stencilBuffer: false,
            },
        );
        target.samples = 8;
        return [scene, target];
    }, []);

    useFrame((state) => {
        cam.current.position.z = 200;
        state.gl.setRenderTarget(target);
        state.gl.render(scene, cam.current);
        state.gl.setRenderTarget(null);
    });

    return (
        <>
            <PerspectiveCamera ref={cam} />
            {createPortal(<Box />, scene)}
            <mesh>
                <planeBufferGeometry attach="geometry" args={[160, 90]} />
                <meshStandardMaterial attach="material" map={target.texture} />
            </mesh>
        </>
    );
}

function App() {
    return (
        <Canvas
            style={{ background: '#324466' }}
            orthographic={true}
            camera={{ position: [0, 0, 200] }}
        >
            <ambientLight intensity={0.5} />
            <Plane />
        </Canvas>
    );
}

【问题讨论】：

标签： three.js camera controls react-three-fiber rendertarget

【解决方案1】：

我能够弄清楚这一点。我不得不删除相机组件并手动创建相机。然后我可以正常地将轨道控制连接到相机，一切正常。

function Box(props) {
    return (
        <mesh {...props}>
            <boxBufferGeometry args={[60, 60, 60]} />
            <meshNormalMaterial />
        </mesh>
    );
}

function Plane() {
    const {
        gl: { domElement },
    } = useThree();

    const camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
       10000,
    );

    const controls = useRef<OrbitControls>();

    const [scene, target] = React.useMemo(() => {
        const scene = new THREE.Scene();
        scene.background = new THREE.Color('orange');
        const target = new THREE.WebGLMultisampleRenderTarget(
            window.innerWidth,
            window.innerHeight,
            {
                minFilter: THREE.LinearFilter,
                magFilter: THREE.LinearFilter,
                format: THREE.RGBFormat,
                stencilBuffer: false,
            },
        );
        target.samples = 8;
        return [scene, target];
    }, []);

    camera.position.set(0, 50, 100);

    useFrame((state) => {
        controls.current.update();
        state.gl.setRenderTarget(target);
        state.gl.render(scene, camera);
        state.gl.setRenderTarget(null);
    });

    return (
        <>
            <orbitControls
                ref={controls}
                args={[camera, domElement]}
                enableDamping={true}
            />
            {createPortal(<Box />, scene)}
            <mesh>
                <planeBufferGeometry attach="geometry" args={[window.innerWidth / 2, window.innerHeight / 2]} />
                <meshStandardMaterial attach="material" map={target.texture} />
            </mesh>
        </>
    );
}

function App() {
    return (
        <Canvas
            style={{ background: '#324466' }}
            orthographic={true}
            camera={{ position: [0, 0, 200] }}
        >
            <ambientLight intensity={0.5} />
            <Plane />
        </Canvas>
    );
}

【讨论】：