GroundProjectedEnv seems to be some problems

Questions
,
1

about some of my code

import { GroundProjectedEnv  } from 'three/examples/jsm/objects/GroundProjectedEnv'
import { Canvas,useLoader,useThree,useFrame} from '@react-three/fiber'
const three = useThree()
const texture = useLoader(THREE.TextureLoader, 'https://aito.auto/content/dam/aito/cn/model/m5/360-view-0415/files/assets/70321151/1/bg_1.jpg?t=ca07b363fd5dccd109d0f7e8f7400dcb')
const env = new GroundProjectedEnv( texture );
env.scale.setScalar( 100 );
three.scene.add( env );

But this scene has a white line

185590559-eb56c8de-f2bb-4b87-84c3-dcbb231995da

2

Do you mind modifying the official example to reproduce the seams? This would make it easier to investigate the issue.

Ideally, you share the modified code as a live example.

3

yes, A minimal example would help.

FWIW you do not need to use GroundProjectedEnv directly from three/examples/jsm/objects/GroundProjectedEnv when using with react-three-fiber. Instead use <Environment ground /> from react-three-drei. I do not see any seams when using the Environment component: bold-wind-b5krr1 - CodeSandbox

If you really want to use the GroundProjectedEnv class, then use this a base for your implimentation

4

@tsji Whats OS/GPU are you getting that with?

6

image is not .hdr you try .jpeg

7

image
image1024×444 48.3 KB

8

recursing-feather-pe2p11 - CodeSandbox.

9

But. HDR has no problem

10

As a work-around. edit
texture.generateMipmaps = false;

1 Like
11

Thank you! Got the same problem and this fixed it.