Place link or “hotspot” inside equirectangular pan

Question

I am looking for a detailed tutorial or example or good documentation on how to place a link inside an equirectangular panorama with Three.js.

With the equirectangular panorama demo it would be great to learn how to for example place a circle or any kind of object in a part of that picture and when clicked it can open another equirectangular panorama or anything really.

What techniques do I need to research please? What dependencies do I need to look out for? What other libraries would I need for something like this?

I think that this surly can be done without using some of the pricey panorama viewers that have so called "hotsposts". No I want to learn this myself and what to be able to code this myself. Anyone can buy a plugin but I want to learn how to do this.

Because I am very new to Three.js and really like it I am really just asking for pointers or things to research. I don't mind if this takes time and effort. No pain no gain as they say. But my issue is that I would not even know where to start or what terms to research since I am a beginner in this field.

For example I am looking at the documentation of Three.js and wonder what terms I need to look up or find out about. I have also had a good look at similar questions on SO and see that they link the clickable objects example. Is this what I need to simply have a link in the equirectangular panorama?

I would really be happy to be given some terms or technical examples of what I am trying to do. For example this blog post really helped me understand the basics of the equirectangular panorama. If there is something similar concerning adding links to the equirectangular panorama that would be great.

Can you point me in the right direction?

Answer 1

The panorama is rendered through a skybox/cubemap, which could mean two things.

In either case, it involves 6 images, without distortion (so you would convert your 2:1 distorted image into 6 square images through something like ptgui).

Read on cubemaps

Now, this can be as simple of a concept as a skybox. These six images are mapped onto a mesh, cube - six planes, and this cube is always aligned with the camera's position, ie. the camera is always rendering the cube from the cube's center. The only magic needed in three.js is to set the .renderOrder to have it render first, and depthWrite to false, as to not affect the rendering of other objects (ie its infinitely far away).

//do for every face (plane)
myCubeMapFaceMaterial = new THREE.MeshBasicMaterial({
  map:cube.up.jpg, 
  depthWrite:false
});

Another, which the example shows, is to do an actual textureCube fetch in the shader. The example abstracts this, you just get the cube shader from the library, and apply it to a cube. This way you avoid making 6 planes, 6 different materials (6 draw calls), but load one cubemap struct (three.texture) and let three read it in the shader in one draw call.

Now lets say you add a sphere somewhere in the scene, anywhere. Since the skybox never wrote depth, it's as if it didnt exist, it just colored your background a certain way. Anything you draw next, will be drawn on top of it (inside the cube), doesnt matter if its much farther away than the cube extents, there is no depth information so it tests against nothing.

Thats your disc. You can do whatever you want, put particle systems, align sprites to cameras, make 3d stuff, the background stays the background.