// 构造配置参数，分别设置场景资源，id, 场景类型，场景名称，fov值，fov范围，仰角(pitch)范围
        var configuration = new Hydreigon.PanoConfiguration({
            resource_type: 'pano',     // 场景类型，与materialType保持一致
            render_type: 'cube-multi', // 渲染类型
            resource: {               // 资源链接
                source: {
                    tile_path: "https://bj.bcebos.com/v1/repos3d/penglai/pano_packages/pack_pano_default_07/pieces/panos/input.tiles/",
                    tile_file: "panos/input.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg",
                    tile_size: [
                                512,
                                1152,
                                2304,
                                4608
                            ]
                }
            }
        }).setId('scene-01').setSceneType('pano').setSceneName('Cool').setFov(70).setFovRange([1, 179]).setPitchRange([-90, 90]);

        var PanoViewer = Hydreigon.PanoViewer;
        var container = document.getElementById("container");
        var config = {debugLayer: false};

        var renderer = Hydreigon.RenderManager.create(container);
        container.appendChild(renderer.canvas);

        var ak = '您的AccessKey';
        var sk = '您的SecretKey';
        
        var panoViewer = new PanoViewer(container, ak, sk, config);

        panoViewer.init(configuration).then(addHotspot);


        panoViewer.addEventListener('scene-loaded', () => {
            panoViewer.enablePointEvent(true);
            panoViewer.switchGyro(false);
            hs.show();
        });

        let hs; // 热点
        function addHotspot() {
            const hotspot =  {
                id: 'hotspot_1',
                name: '自定义热点',
                pos: { // 当type为Label是pos可缺省，代表当前视角正前方添加一个标准的hotspot
                    x: 0,
                    y: 0,
                    z: -50
                },
            };

            let dom = document.createElement('div');
            dom.classList.add('pano-hotspot-container');
            const text = document.createElement('div');
            text.textContent = hotspot.name;
            dom.appendChild(text);
            dom.onclick = () => { alert(`点击了${hotspot.name}`)};

            hs = new Hydreigon.CHotspotDom(panoViewer.getHsManager(), dom, hotspot);
        };

        function update(){
            renderer.render();
            hs?.update?.();
        }

        // render
        renderer.setCurrentViewer(panoViewer);
        Hydreigon.RafManager.add(update);