I'm currently working on converting an equirectangular panorama image into cubemap format using NEXT JS. The scene is being rendered but I'm facing an issue where the background isn't applying, and surprisingly, no errors are showing up!
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;
This component is then wrapped inside Suspense:
<Suspense fallback={null}>
<Background />
</Suspense>