三个 Js React 如何让网格折射它的环境但将环境背景隐藏到相机答案

【问题标题】：Three Js React how to have mesh refract it's environment but hide the environment background to the camera三个 Js React 如何让网格折射它的环境但将环境背景隐藏到相机
【发布时间】：2022-01-28 19:46:37
【问题描述】：

我一直在尝试解决这个问题，所以任何帮助将不胜感激！

我想要做的是让图像看起来像被困在网格中。我必须这样做的想法是有一些具有厚度和折射率的网格，将其放置在具有 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 边形中，那就太好了；谢谢！

【问题讨论】：

标签： javascript reactjs three.js react-three-fiber

【解决方案1】：

将 prop 更改为 background={false}

您也可以直接将此图像应用到您的 n-gon，并确保将材质侧属性设置为“Backside”，而不是这样做，它会产生相同的效果

【讨论】：