Hugging Face's logo

Spaces:
zimhe
/
SpatialDiffusion
Sleeping

App Files Community
SpatialDiffusion
File size: 2,117 Bytes 
a521a3f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全景图查看器</title>
    <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>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #panorama {
            width: 100%;
            height: 100%;
        }
        .pnlm-load-button {
            display: none !important;
        }
    </style>
</head>
<body>
    <div id="panorama"></div>
    <script>
        // 监听来自父窗口的消息
        window.addEventListener('message', function(event) {
            if (event.data.type === 'loadPanorama') {
                console.log('Received image URL:', event.data.image);
                
                // 销毁现有的查看器（如果存在）
                if (window.viewer) {
                    window.viewer.destroy();
                }
                
                // 创建新的查看器
                window.viewer = pannellum.viewer('panorama', {
                    type: 'equirectangular',
                    panorama: event.data.image,
                    autoLoad: true,
                    autoRotate: -2,
                    compass: true,
                    northOffset: 0,
                    showFullscreenCtrl: true,
                    showControls: true,
                    mouseZoom: true,
                    draggable: true,
                    friction: 0.2,
                    minHfov: 50,
                    maxHfov: 120,
                    hfov: 100,
                    onLoad: function() {
                        console.log('Panorama loaded successfully');
                    },
                    onError: function(error) {
                        console.error('Error loading panorama:', error);
                    }
                });
            }
        });
    </script>
</body>
</html>