三个 js 使用 NEXT JS 将 equirectangular 全景图转换为 cubemap 格式

Question

我正在尝试使用 NEXT 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：

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

三个 js 使用 NEXT JS 将 equirectangular 全景图转换为 cubemap 格式

Three js converting an equirectangular panorama to cubemap format using NEXT JS

three.js

reactjs

next.js

react-three-fiber