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.
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:
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.
+
+
+
+
+
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.
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
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?
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.