Search code examples
three.jsaframe

Spherical environment map blurry

I took an equirectangular envMap from the three.js docs sample where it appears sharp on a sphere.

If I load the same material into my scene with the following params

material="spherical-env-map: /assets/models/1/envtest.jpeg; roughness: 0; metalness: 1"

it appears blurry like this

blurry env map

What am I doing wrong?

Reproducible example via glitch: https://glitch.com/edit/#!/sepia-forest-keyboard

What I have noticed when setting up the glitch:

  • Using Aframe 1.0.3 it is blurry
  • Using Aframe 1.2.0 it remains black no matter what I do
Solution

  • That happens because you are using a PBR material in your code since the default material of A-Frame is MeshStandardMaterial. Meaning a material that tries to render physically correct. The official three.js example uses MeshLambertMaterial which is no PBR material. Both type of materials implement environment maps differently.

    When using a PBR material, it's recommended to use a HDR environment map which is also pre-processed with PMREMGenerator like in this example: https://threejs.org/examples/webgl_loader_gltf