How can create an environmental map or cube map

Questions
1

I want to create something like this https://threejs.org/examples/webgl_panorama_equirectangular.html or this https://threejs.org/examples/webgl_materials_envmaps.html but i havent seen anything in the doc or reference on how to start, can someone please lead me on the right path.

2

Beginner level explanation:

If you closely look in the example. The envMap may contain different types of images. A few of the popular types are equirectanglar or cubeMap.

Equirectanglar :

Equirectangular images contains a single 360degree image and it looks like this:
2294472375_24a3b8ef46_o

Image Credit : jonragnarsson

These images does not required to be stitched when implementing using threejs.

Such images are implemented by following snippet:

var textureLoader = new THREE.TextureLoader();
textureLoader.load('your/path/to/the/image/file.jpg', function (texture){
         var material = new THREE.MeshBasicMaterial();
         material.envMap = texture;
});

CubeMap :
A cubemap consists of a group of 6 images. Each image corresponds to each sides of an imaginary cube which is surrounding your object. These images when implemented gets stitched together as a single textures and give a continuous appearance as a single envMap.
A cube images can look like this.
positiveZ
+
positiveX
+
positiveY
+
negativeY
+
negativeZ
+
negativeX

Image credit : plus360degree carvisualizer

var loader = new THREE.CubeTextureLoader();
loader.setPath( 'textures/cube/pisa/' );

var textureCube = loader.load( [
	'px.jpg', 'nx.jpg',
	'py.jpg', 'ny.jpg',
	'pz.jpg', 'nz.jpg'
] );

var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );

Behaviorial differences :
A major difference between these two types are:

For Equirectangular, the image center will be facing towards the camera. So no matter from what angle you see you object, the reflected image will be the same.

For CubeMap, each of 6 images in cubemap are projected on the surface of the object from each sides of the imaginary cube enclosing that object., hence the reflection result will vary from every other angle.

Experts might explain it well.

3

I think that’s not true. This description is correct for SphericalReflectionMapping. You can easily verify this with the following example:

https://threejs.org/examples/#webgl_materials_envmaps

Also see: three.js docs

1 Like
4

Thanks for the correction. I always had this confusion with SpericalReflectionMapping and EquirectangularReflectionMapping.

Now, this leads to ask if there’s any noticable visual difference in Equirectangular and CubeReflection.
If no, is there any conversion happening internally between equirectangular to cube or vice versa?

5

Yes, due to its mapping technique EquirectangularReflectionMapping produces distorted results at the poles. This is actually visible in the three.js demo. CubeReflectionMapping does not have this issue.

1 Like