React Three Fiber / WebGLCubeRenderTarget not rendering in BG

Questions
1

Hello

I am using :
“react-three-fiber”: “^6.0.13”,
“three”: “^0.147.0”,

This code gives me a black bacskground :

   const Background = props => {
        const texture = useLoader(THREE.TextureLoader, "/03milkyway.jpg")
        const { gl } = useThree();
        const formatted = new THREE.WebGLCubeRenderTarget(texture.image.height/2).fromEquirectangularTexture(gl, texture)
        return (
            <primitive attach='environment' object={formatted} />
        )
    }

When I try to attach to “background” , result is white background.

No more info in console
Image size : 4000 x 2000
texture.image.height is 2000
gl Object is not empty

Any idea ?

2

the background of what, exactly, scene? you are using “environment”, which will not affect the background, the correct prop in that case would be “background”.

changing that prop would probably already work, but i’d prefer this tbh:

function Bg({ url }) {
  const texture = useTexture(url)
  const scene = useThree(state => state.scene)
  useLayoutEffect(() => {
    const old = scene.background
    scene.background = texture
    return () => scene.background = old
  }, [texture])
}

you can mount/unmount this component without side effects.

i would also look into dreis environment component, it can do a lot and it has a cubecam inbuilt GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

this would also allow you to make a background that can be rotated: Rotate environments - CodeSandbox

3

Not just background, but also environment background wich also follows camera orbit movement.

4

yes, you’re using the wrong prop then for sure. it’s “background”. though it would make sense to set both, “environment” provides lighting.

5

it doesn’t work also when I attach to background

6

then it’s related to this line:

new THREE.WebGLCubeRenderTarget(texture.image.height/2).fromEquirectangularTexture(gl, texture)

7

According to the documentation, It doesn’t look something is missing

8

i think there is: three.js docs

scene.background expects a texture not a render target, it might be object={formatted.texture}

9

btw something else, this is using a r3f that is ancient and deprecated. the correct namespace is @react-three/fiber and @react-three/drei

10

it also expects

Texture cubes (CubeTexture) or equirectangular textures for defining a skybox

Which is what I am trying to achieve.

I am importing RTF with this syntax :

import { Canvas, useFrame, extend, useThree, useLoader } from '@react-three/fiber'

which seems ok according to the github

11

CubeTexture and WebGLCubeRenderTarget are not the same, but the latter has a property “texture”

12

I don’t know… I have tried everything…

13

best make a quick codesandbox that includes your code and that texture. i have never used webglcuberendertarget before but maybe i see something obvious. just scraping through docs without being able to run something doesn’t work in this case.

14

Same code works with these settings :

"react-three-fiber": "^5.1.5",
"three": "^0.122.0",