liuran001 · May 3, 2025 19:39
diff --git a/img360.html b/img360.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全景图查看器</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #viewer {
            width: 100vw;
            height: 100vh;
        }
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-family: Arial, sans-serif;
            font-size: 18px;
            z-index: 1000;
        }
    </style>
 </head>
 <body>
    <div id="viewer"></div>
    <div id="loading" class="loading">加载中...</div>

    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
                "@photo-sphere-viewer/core": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.module.js"
            }
        }
    </script>

    <script type="module">
        import { Viewer } from '@photo-sphere-viewer/core';

        // 从URL参数获取图片链接
        function getImageUrlFromQuery() {
            const params = new URLSearchParams(window.location.search);
            const imageUrl = params.get('image');
            
            if (!imageUrl) {
                alert('请在URL中添加image参数，例如: ?image=https://example.com/panorama.jpg');
                return null;
            }
            
            return imageUrl;
        }

        // 初始化查看器
        async function initViewer() {
            const imageUrl = getImageUrlFromQuery();
            if (!imageUrl) return;

            try {
                const viewer = new Viewer({
                    container: document.querySelector('#viewer'),
                    panorama: imageUrl,
                    loadingTxt: '加载中...',
                    defaultZoomLvl: 50,
                    navbar: [
                        'zoom',
                        'download',
                        'fullscreen',
                    ],
                });

                // 隐藏加载提示
                document.getElementById('loading').style.display = 'none';

                // 添加加载错误处理
                viewer.addEventListener('load-error', () => {
                    alert('加载全景图失败，请检查图片链接是否正确且支持CORS');
                });

            } catch (error) {
                document.getElementById('loading').textContent = '错误: ' + error.message;
                console.error(error);
            }
        }

        // 页面加载完成后初始化查看器
        window.addEventListener('DOMContentLoaded', initViewer);
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>全景图查看器</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
	<style>
	body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	}
	#viewer {
	width: 100vw;
	height: 100vh;
	}
	.loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-family: Arial, sans-serif;
	font-size: 18px;
	z-index: 1000;
	}
	</style>
	</head>
	<body>
	<div id="viewer"></div>
	<div id="loading" class="loading">加载中...</div>

	<script type="importmap">
	{
	"imports": {
	"three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
	"@photo-sphere-viewer/core": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.module.js"
	}
	}
	</script>

	<script type="module">
	import { Viewer } from '@photo-sphere-viewer/core';

	// 从URL参数获取图片链接
	function getImageUrlFromQuery() {
	const params = new URLSearchParams(window.location.search);
	const imageUrl = params.get('image');

	if (!imageUrl) {
	alert('请在URL中添加image参数，例如: ?image=https://example.com/panorama.jpg');
	return null;
	}

	return imageUrl;
	}

	// 初始化查看器
	async function initViewer() {
	const imageUrl = getImageUrlFromQuery();
	if (!imageUrl) return;

	try {
	const viewer = new Viewer({
	container: document.querySelector('#viewer'),
	panorama: imageUrl,
	loadingTxt: '加载中...',
	defaultZoomLvl: 50,
	navbar: [
	'zoom',
	'download',
	'fullscreen',
	],
	});

	// 隐藏加载提示
	document.getElementById('loading').style.display = 'none';

	// 添加加载错误处理
	viewer.addEventListener('load-error', () => {
	alert('加载全景图失败，请检查图片链接是否正确且支持CORS');
	});

	} catch (error) {
	document.getElementById('loading').textContent = '错误: ' + error.message;
	console.error(error);
	}
	}

	// 页面加载完成后初始化查看器
	window.addEventListener('DOMContentLoaded', initViewer);
	</script>
	</body>
	</html>