使用NEXT js将等长形全景图转换为cubemap格式的三个JS

Question

我正在尝试将等长形全景图像转换为cubemap格式，使用下一个JS。场景被渲染，但背景不适用。我也不会犯错！

import { useLoader, useThree } from "@react-three/fiber";
import * as THREE from "three";

const Background = (props) => {
    const texture = useLoader(THREE.TextureLoader, "/autoshop.jpg");

    const { gl } = useThree();

    const formatted = new THREE.WebGLCubeRenderTarget(
        texture.image.height
    ).fromEquirectangularTexture(gl, texture);

    console.log("formatted", formatted);

    return <primitive attach="background" object={formatted} />;
};

export default Background;

我称它为悬念：

<Suspense fallback={null}>
    <Background />
</Suspense>

Answer 1

感谢@Marquizzo评论。我发现我可以用另一种方式做同样的事。通过替换：

const formatted = new THREE.WebGLCubeRenderTarget(
    texture.image.height
).fromEquirectangularTexture(gl, texture);

出自：

texture.encoding = THREE.sRGBEncoding;
texture.mapping = THREE.EquirectangularReflectionMapping;