三个使用 NEXT JS 将 equirectangular 全景图转换为立方体贴图格式的 js答案

【问题标题】：Three js converting an equirectangular panorama to cubemap format using NEXT JS三个使用 NEXT JS 将 equirectangular 全景图转换为立方体贴图格式的 js
【发布时间】：2022-01-29 16:49:09
【问题描述】：

我正在尝试使用 NEXT JS 将 equirectangular 全景图像转换为立方体贴图格式。场景被渲染，但背景不适用。而且我没有错误！

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>

【问题讨论】：

从这个工具 (jaxry.github.io/panorama-to-cubemap) 生成的立方体贴图在您的应用程序中是否有效？您还可以将您正在使用的图片添加到您的问题中吗？
是的，生成的立方体贴图工作正常！但我无法上传图片，因为它大于允许的尺寸。谢谢。
为了一致性，我将使用这个：flickr.com/photos/jonragnarsson/2294472375
@MohammadTbeishat 这张图片正是in this Three.js example 使用的图片。看看源代码（角落里的< > 图标），看看他们是怎么做的。

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

【解决方案1】：

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

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

作者：

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

【讨论】：