新手求助：如何用JavaScript从多张图片创建360全景图并在PHP/HTML/CSS项目中展示

DevOps 小满

2026-7-31

360°全景图（多实拍图拼接）实现方案

先澄清一个误解

你之前用的three.js完全支持多图拼接的360全景，并非只能处理单张2D全景图。比如常见的立方体全景（由6张面图组成）、或是将多张实拍图拼接成球面全景，都可以用three.js实现。

适合纯新手的两种实现路径

路径1：Three.js实现（定制性强，推荐）

步骤1：先处理图片资源（最关键的一步）

你手里的60张不同角度实拍图，得先拼接成全景工具能识别的格式：

推荐方案：用PTGui（有免费试用版）的向导模式，导入所有60张图后，工具会自动对齐拼接，最终导出6张立方体全景面图（分别对应：右、左、上、下、前、后）。
备选方案：直接拼成一张完整的等距柱状投影全景图（就是那种长条状的全景图），同样用PTGui完成。

步骤2：引入Three.js库

不用下载，直接在HTML里加CDN链接：

<script src="https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.158.0/examples/js/controls/OrbitControls.js"></script>

步骤3：写HTML容器

给全景图留个全屏的容器：

<div id="pano-container" style="width: 100vw; height: 100vh; margin: 0; padding: 0; overflow: hidden;"></div>

步骤4：核心JS代码（以立方体全景为例）

代码里加了详细注释，照着抄就行：

// 获取页面上的全景容器
const container = document.getElementById('pano-container');

// 1. 创建Three.js的基础场景
const scene = new THREE.Scene();

// 2. 创建相机（视角75度，适配屏幕比例）
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0); // 相机放在全景球的中心

// 3. 创建渲染器，把画面渲染到容器里
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

// 4. 加载6张立方体全景图
const loader = new THREE.CubeTextureLoader();
// 这里的路径对应你导出的6张图，顺序必须是：右、左、上、下、前、后
const cubeTexture = loader.load([
    'panorama/right.jpg',
    'panorama/left.jpg',
    'panorama/top.jpg',
    'panorama/bottom.jpg',
    'panorama/front.jpg',
    'panorama/back.jpg'
]);

// 5. 创建全景球体（把图片贴在球的内表面，所以side设为BackSide）
const sphereGeometry = new THREE.SphereGeometry(500, 60, 40); // 500是球的半径，数值越大越清晰
const sphereMaterial = new THREE.MeshBasicMaterial({ 
    map: cubeTexture, 
    side: THREE.BackSide // 因为相机在球内部，所以要渲染球的背面
});
const panoramaSphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(panoramaSphere);

// 6. 添加鼠标控制（拖拽旋转、滚轮缩放）
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 开启阻尼，旋转更顺滑
controls.minDistance = 10; // 限制最小缩放距离
controls.maxDistance = 500; // 限制最大缩放距离

// 7. 渲染循环，让全景动起来
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 更新控制器状态
    renderer.render(scene, camera); // 渲染画面
}
animate();

// 8. 适配窗口大小变化
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

步骤5：PHP的辅助作用（可选）

如果你的全景图存在服务器目录里，PHP可以帮你批量获取路径，不用手动写死：

<?php
// 全景图存放的目录
$panoDir = 'panorama/';
// 立方体6张图的固定顺序
$cubeFaces = ['right.jpg', 'left.jpg', 'top.jpg', 'bottom.jpg', 'front.jpg', 'back.jpg'];
$imagePaths = [];
foreach ($cubeFaces as $face) {
    $imagePaths[] = $panoDir . $face;
}
// 转成JSON格式传给JS
$imagePathsJson = json_encode($imagePaths);
?>

然后把JS里的loader.load改成：

const cubeTexture = loader.load(<?php echo $imagePathsJson; ?>);

路径2：用Pannellum库（更简单，零复杂JS）

如果觉得Three.js太麻烦，Pannellum是专门做Web全景的轻量库，操作更简单：

步骤1：同样先拼接好6张立方体面图

和路径1的步骤1一样，用PTGui导出6张图。

步骤2：引入Pannellum

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
<script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>

步骤3：HTML容器和初始化代码

<div id="pano" style="width: 100vw; height: 100vh;"></div>
<script>
pannellum.viewer('pano', {
    type: 'cube', // 指定是立方体全景
    cubeMap: [
        'panorama/right.jpg',
        'panorama/left.jpg',
        'panorama/top.jpg',
        'panorama/bottom.jpg',
        'panorama/front.jpg',
        'panorama/back.jpg'
    ],
    autoLoad: true, // 页面加载完自动显示全景
    controls: ['zoom', 'fullscreen', 'rotate'] // 显示的控制按钮
});
</script>

同样可以用PHP批量获取图片路径，方法和路径1一样。

新手必看注意事项

图片顺序不能错：不管用Three.js还是Pannellum，立方体全景的6张图顺序必须是：右、左、上、下、前、后，不然全景会错位。
图片大小要控制：单张图建议在2000x2000像素以内，太大的话加载慢，影响体验。
拼接工具别选错：PTGui的向导模式对新手友好，跟着提示走就能完成拼接，比手动拼简单太多。

内容的提问来源于stack exchange，提问作者Rakshit Jain