ADD HOTSPOT

[GiveEXP]

I have a source code for my view page as follows. I want to add a hotspot to the panorama by adding it to the view of a list of paronama. However, after adding and formatting the default scene as panoB, it successfully loaded the default scene. attached to hotspot but when I click on hotspot, logically it should go to panoC scene but it still reloads to panoB scene.

@{
    ViewData["Title"] = "Hutech View";
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/css/Style.css" />
<style>
    #panorama-container {
        width: 1000px;
        height: 500px;
        margin-left: auto;
        margin-right: auto;
    }
</style>

<div class="jumbotron">
    <br />
    <h1>QUẢN LÝ HÌNH ẢNH 360</h1>
    <p class="lead">360DEGREE</p>
</div>

<div class="row">
    <div id="panorama-container"></div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const panoramas = [
                { idHsp: "a", id: 'panoA', img: '/Image/winter.jpg', pitch: 0, yaw: 0, hfov: 110 },
                { idHsp: "b", id: 'panoB', img: '/Image/river.jpg', pitch: 0, yaw: 90, hfov: 110 },
                { idHsp: "c", id: 'panoC', img: '/Image/winter.jpg', pitch: 0, yaw: 180, hfov: 110 },
            ];
            const hotspots = [
                { idHsp: "b", from: 'panoA', to: 'panoB', text: 'Hotspot B', pitch: 50, yaw: 50 },
                { idHsp: "c", from: 'panoB', to: 'panoC', text: 'Hotspot C', pitch: 50, yaw: 50 },
                { idHsp: "a", from: 'panoC', to: 'panoA', text: 'Hotspot A', pitch: 50, yaw: 50 },
            ];

            const scenes = panoramas.map(panorama => ({
                id: panorama.id,
                type: 'equirectangular',
                panorama: panorama.img,
                pitch: panorama.pitch,
                yaw: panorama.yaw,
                hfov: panorama.hfov,
                autoLoad: true,
                hotSpots: [], 
            }));

           /*  let currentScene; */ // Biến để lưu trữ thông tin về cảnh hiện tại

            const viewer = pannellum.viewer('panorama-container', {
                default: scenes.find(scene => scene.id === 'panoB'), // Sử dụng panoA làm cảnh mặc định
                scenes: scenes,
            });

            hotspots.forEach(hotspot => {
                const currentScene = scenes.find(scene => scene.id === hotspot.from);

                if (currentScene) {
                    currentScene.hotSpots.push({
                        pitch: hotspot.pitch,
                        yaw: hotspot.yaw,
                        type: 'scene',
                        text: hotspot.text,
                        sceneId: hotspot.to,
                    });
                }
            });

            viewer.on('scenechange', function (e) {
                console.log("Scene changed event:", e);
                currentScene = scenes.find(scene => scene.id === e.sceneId); // Lưu trữ thông tin về cảnh hiện tại
                setTimeout(function () {
                    console.log("Scene changed to:", currentScene ? currentScene.id : 'undefined');
                }, 100); // Trì hoãn 100 milliseconds
            });
        });
    </script>

    <script src="~/js/ADD.js"></script>
</div>

[mpetroff]

You appear to be using the default parameter incorrectly. You're setting it to the contents of the particular scene, which is incorrect. It's used to set parameters that are common to all scenes and to set the firstScene. You should be using something like:

const viewer = pannellum.viewer('panorama-container', {
    default: {
        firstScene: 'panoB'
    },
    scenes: scenes,
})

I also don't know why you're adding your hot spots after the fact instead of including them in the scene configuration.

The tour example shows proper use of both the default parameter and of including hot spots in the scene configuration.