He estado tratando de resolver esto por un tiempo, ¡así que cualquier ayuda sería muy apreciada!

Lo que estoy tratando de hacer es dar la apariencia de que una imagen está atrapada dentro de una malla. La idea que tenía para hacer esto era tener una malla que tuviera un grosor y un índice de refracción, colocarla dentro de un entorno con una foto de 360°, luego ocultar la imagen de fondo a la cámara y aún tener la imagen a través de la malla visible para el Sin embargo, cada vez que trato de ocultar el fondo, la parte de refracción desaparece y todo lo que queda es la parte reflectante. aquí está mi código para el objeto en un entorno:

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

Si alguno de ustedes tiene algún consejo sobre cómo hacer esto, o un mejor enfoque para que parezca que una imagen 360 está atrapada dentro de un n-gon de vidrio, sería genial; ¡Gracias!