三个 Js 反应如何让网格折射它的环境，但将环境背景隐藏到相机

Question

我已经尝试解决这个问题一段时间了，所以如果有任何帮助，我们将不胜感激！

我想做的是给人一种图像被困在网格中的感觉。我不得不这样做的想法是，制作一些有厚度和折射率的网格，将其放置在一个360度照片的环境中，然后将背景图像隐藏在相机面前，用户仍然可以通过网格看到图像，但每次我试图隐藏背景时，折射部分都会消失，只剩下反射部分。这是我在一个环境中为对象编写的代码：

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

如果你们中的任何人对如何做到这一点有任何建议，或者有更好的方法让它看起来像一个360度的图像被困在一个玻璃n形内，那就太好了；非常感谢。

Answer 1

将道具更改为background=｛false｝

与其这样做，您还可以直接将此图像应用于n边形，并确保材质侧属性设置为"Backside"，这将产生相同的效果