CODEWITHSUNDEEP
javascriptthree.js360-panorama
user6795317
user6795317

Reputation: 141

How to add div element or hotspot inside 360 panaroma image in three.js?

I'm creating virtual tour by uploading 360 images and want to include hotspot or any div element inside that 360 image on the clicked position in 360 image. What should i save in database from event value like i can get angle value and event.clientX or event.clientY value from clicked event. If i create div then on rotating 360 image the div remains on the same position but i want that div to be hidden while rotating camera.

I already tried using sprite material. It works fine but cannot use any css inside that sprite material. So i want div element outside canvas where i can set top, left position value and display hotspot or any div element.

onMouseMove( event ) {
    const intersects = raycaster.intersectObjects(spheremesh, true);
    if (intersects[0]) {
        var infoHotspotsPoint = intersects[0].point;
        $('#hotspotdiv').css({
            top: `${event.offsetY}px`,
            left: `${event.offsetX}px`
        });
    }
 }

This will display only at one position in 360 image on rotation. But i want that div also to be moved and hidden if that particular clicked part is not visible.

I want something like this:

https://dubai360.com/scene/5526-49-al-seef-walkabout-49/en

Upvotes: 2

Views: 3760

Answers (1)

Umashankar
Umashankar

Reputation: 709

Here are some libraries where you can use hotspotting

https://github.com/naver/egjs-view360 (I like this one)

https://pchen66.github.io/Panolens/examples/panorama_infospot_focus.html

Upvotes: 2

Related Questions