I'm trying to achieve an effect where you could see the content of a page only through a 3D object. But I have no idea where to start, what should I search to do this effect.

My first idea would be to convert the 3D object to a "clipPath" but i do not find an easy way to do that.

here is a snippet example :

import { Canvas } from '@react-three/fiber';
import { Box } from '@react-three/drei';
import { useRef } from 'react';

export default function Home() {
  return (
    <div style={styles.page}>
      <div style={styles.overlay}>
        <h1>Here is some content hidden by default</h1>
        <p>This text is only visible through the cube.</p>
      </div>

      <Canvas style={styles.canvas}>
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        <Box position={ [0, 0, 0] }>
          <meshStandardMaterial color="orange" />
        </Box>
      </Canvas>
    </div>
  );
}

const styles = {
  page: {
    height: '100vh',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
    background: '#282c34',
    overflow: 'hidden',
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    color: 'white',
    fontSize: '2rem',
    zIndex: 2,
    pointerEvents: 'none',
    clipPath: 'url(#cubeClip)', // find a way to link it to the cube shape
  },
  canvas: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
  },
};