Three.JS camera controls in a scene thats rendered onto a planes texture?

Question

Essentially I would like to rotate the box in the plane with the camera controls in the following example. Every time I try and add the camera controls I end up rotating the plane. Eventually I would like to move the plane with scrollevents and rotate the scene on the plane with controls.

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>
    );
}

score 0 · Answer 1 · answered Jan 20 '21 at 16:28

I was able to figure this out. I had to remove the camera component and create a camera manually. Then I could hook up the orbit controls to the camera normally and everything worked.

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>
    );
}

Three.JS camera controls in a scene thats rendered onto a planes texture?

1 Answers1