Adding hotspot to sphere geometry 360 image texture

Questions
,
1

Hi, I am totally new to THREEJS. All I was able to do so far is load 360 image. I am looking to add hotspots on the image, on click of which it opens the dialog popup with some information. As I am new can somebody please point me in the right direction with links, documentation anything helpful.

2

There’s probably no way to do it automatically, but you can try some creativity:

  1. Put OrbitControls on the scene and simulate first-person view - basically, just place controls target very close to the camera.
  2. Use CSS2DRenderer or CSS3DRenderer to create points in the 360 space around the camera (you have to define these points, ie. your hotspots on the image, manually.) Something like this - just imagine that cube is your camera. Using CSS2D/CSS3D will allow you to later add HTML text and popups to these hotspots easily.
  3. Set your image as the Scene.background texture.
1 Like
3

used rayCaster to get 3-dimensional coordinates from 2D canvas.

don’t mind syntax

           let mouse = new THREE.Vector2( (e.clientX / window.innerWidth) * 2 - 1,

            -(e.clientY / window.innerHeight) * 2 + 1

        );

        rayCaster.setFromCamera(mouse, camera);

        let intersects = rayCaster.intersectObjects(scene.children);

        intersects.forEach(intersect=>{

        if (intersects.length > 0 ) {

            console.log(intersects[0].point);

        }
4

If you are new, you may find some things to the problem in the Collection of examples from discourse.threejs.org .

See
* discourse.threejs.hofk.de

2020
MultipleIcons - @author Mugen87
ObjectFollowCursor - @author Mugen87
AddMarkerOnMouseClick - @author prisoner849
Annotations - @author makc3d
ContextMenu - @author prisoner849

2018
LabelsOnSphere - @author vasilii helped by Mugen87
SetRemoveMarkers - @author prisoner849
Planes on Sphere - @author blackInk, Mugen87

2017
PictureBall - @author hofk

2 Likes