How to implement a 360 image with best quality? In A-frame is great, but in R3F the quality is not good.

[cyango]

Hi, m trying to reproduce the awesome results that A-frame does regarding 360 images. In A-frame the quality of the 360 image is way superior than r3f using the same arguments.

The image (nadir view) on r3f is this, using these params:

 <mesh scale={[-1, 1, 1]}>
        <sphereBufferGeometry attach="geometry" args={[500, 64, 32]} />
        <meshBasicMaterial attach="material" map={texture} side={BackSide} />
      </mesh>

And the same image on A-frame is this using these params:

registerPrimitive('a-sky', utils.extendDeep({}, getMeshMixin(), {
  defaultComponents: {
    geometry: {
      primitive: 'sphere',
      radius: 500,
      segmentsWidth: 64,
      segmentsHeight: 32
    },
    material: {
      color: '#FFF',
      side: 'back',
      shader: 'flat',
      npot: true
    },
    scale: '-1 1 1'
  },

How can I achieve this quality with r3f?

https://github.com/aframevr/aframe/blob/b164623dfa0d2548158f4b7da06157497cd4ea29/src/extras/primitives/primitives/a-sky.js

Also the same quality that happens in r3f also happens in this example:
https://threejs.org/examples/#webgl_panorama_equirectangular

So I assume there's some tweak that A-frame does?

[CodyJasonBennett]

Are you setting the mapping of your texture?

const texture = useTexture( ... )
texture.mapping = THREE.EquirectangularReflectionMapping

[cyango]

Nope, made no noticeable difference... any clues?

[drcmda]

aframe is also just threejs. r3f is even less of an abstraction, you're using plain threejs. i think you'll find the answer quicker on threes own discourse. link them that official threejs example and they'll tell you which settings cause that.

[CodyJasonBennett]

Tried tweaking with this and found that changing the texture's minFilter to THREE.LinearFilter or THREE.NearestFilter to do the trick:

• https://codesandbox.io/s/9oy2u?file=/src/index.js:780-815

Default (LinearMipmapLinearFilter)	LinearFilter

[cyango]

This actually improves the texture quality.
My working settings are:
texture.mapping = EquirectangularReflectionMapping;
texture.encoding = sRGBEncoding;
texture.minFilter = texture.magFilter = LinearFilter;