Three Js React how to have mesh refract it's environment but hide the environment background to the camera

Question

I have been trying to solve this for a while, so any help would be greatly appreciated!

What I am trying to do is give the appearance that an image is trapped within a mesh. The thought I had to do this was to have some mesh that has a thickness and a refractive index, place it inside an environment with a 360 photo, then hide the background image to the camera and still have the image through the mesh visible to the user, every time I try to hide the background though, the refraction part vanishes and all that is left is the reflective part. here is my code for the object in an environment:

import { useRef } from "react";
import { Suspense } from "react";
import { Canvas, useFrame, useLoader } from "@react-three/fiber";
import { OrbitControls, Environment } from "@react-three/drei";
import * as THREE from "three";

function Thing() {
  const ref = useRef();
  useFrame(() => (ref.current.rotation.x = ref.current.rotation.y += 0.0));
  return (
    <mesh
      ref={ref}
      onClick={(e) => console.log("click")}
      onPointerOver={(e) => console.log("hover")}
      onPointerOut={(e) => console.log("unhover")}
    >
      <meshPhysicalMaterial roughness={0} transmission={1} thickness={2} />
      <icosahedronGeometry attach="geometry" args={[2, 0]} />
    </mesh>
  );
}

export default function MomentsObject() {
  return (
    <Canvas
      style={{
        height: 700,
        width: 700,
      }}
    >
      <Suspense fallback={null}>
        <Thing />
        <OrbitControls
          enablePan={true}
          enableZoom={false}
          enableRotate={true}
        />
        <Environment preset="sunset" background={true} />
      </Suspense>
    </Canvas>
  );
}

If any of you have any advice on how to do this, or a better approach to make it appear like a 360 image is trapped within a glass n-gon, that would be great; Thank you!

Answer 1

Change the prop to background={false}

Instead of doing this, you can also directly apply this image to your n-gon and make sure the material side property is set to 'Backside', it would give the same effect