Three.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>

- Mohammad Tbeishat

---

从这个工具（https://jaxry.github.io/panorama-to-cubemap/）生成的立方体贴图在你的应用程序中能够正常工作吗？你能否将你正在使用的图像添加到你的问题中？ - Enijar

是的，生成的立方体贴图效果很好！但是我无法上传该图像，因为它超过了允许的大小。谢谢。 - Mohammad Tbeishat

为了保持一致性，我将使用这个链接：https://www.flickr.com/photos/jonragnarsson/2294472375/ - Mohammad Tbeishat

@MohammadTbeishat 那张图片正是在这个Three.js示例中使用的（https://threejs.org/examples/#webgl_materials_cubemap_dynamic）。只需查看源代码（角落处的< >图标），看看他们是如何做到的即可。 - M -

Answer 1

感谢 @Marquizzo 的评论。我发现还有另一种方法可以做到相同的效果，就是将以下内容替换：

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

通过：

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

- Mohammad Tbeishat

---

注意：gl是渲染器 - Kyle Baker