react-pannellum虚拟漫游实现问题：仅加载首张全景图

问题根源 #

你的代码存在几个关键配置冲突和错误，导致场景切换功能失效：

• 场景ID不匹配：指定了sceneId="firstScene"，但配置的scenes中无此场景，同时default.firstScene也设置为不存在的firstScene，组件无法识别初始场景。
• 配置冲突：同时传递imageSource和完整漫游配置config，imageSource会覆盖config中的场景设置，导致仅加载单张图。
• Hotspot类型错误：第一个热点用type: 'link'却设置sceneId，场景切换需用type: 'scene'。

修正后的代码 #

import React from 'react';
import ReactPannellum from "react-pannellum";

const NewView = () => {
  const panoramaConfig = {
    autoLoad: true,
    default: {
      firstScene: 'library', // 指向已定义的场景
      author: 'Matthew Petroff',
      sceneFadeDuration: 1000
    },
    scenes: {
      library: {
        title: 'George Peabody Library',
        hfov: 100,
        pitch: 10,
        yaw: 50,
        compass: true,
        northOffset: 289,
        type: 'multires',
        multiRes: {
          basePath: 'https://pannellum.org/images/multires/library',
          path: '/%l/%s%y_%x',
          fallbackPath: '/fallback/%s',
          extension: 'jpg',
          tileResolution: 512,
          maxLevel: 6,
          cubeResolution: 8432,
        },
        hotSpots: [
          {
            pitch: 60,
            yaw: 60,
            type: 'scene', // 修改为场景切换类型
            text: '前往Gallery',
            sceneId: 'gallery', // 指定目标场景ID
          },
          // 其他热点保留
        ],
      },
      gallery: {
        title: 'Gallery',
        hfov: 100,
        yaw: -20,
        type: 'multires',
        compass: true,
        northOffset: 240,
        multiRes: {
          basePath: 'https://pannellum.org/images/multires/gallery',
          path: '/%l/%s%y_%x',
          fallbackPath: '/fallback/%s',
          extension: 'jpg',
          tileResolution: 512,
          maxLevel: 5,
          cubeResolution: 4384,
        },
        hotSpots: [
          {
            pitch: -7,
            yaw: -58,
            type: 'scene',
            text: '回到Library',
            sceneId: 'library',
            targetYaw: 240,
          },
          // 其他热点保留
        ],
      },
      '6th-floor': {
        title: '6th Floor',
        hfov: 100,
        pitch: -20,
        yaw: -20,
        compass: true,
        northOffset: 0,
        type: 'multires',
        multiRes: {
          basePath: 'https://pannellum.org/images/multires/6th-floor',
          path: '/%l/%s%y_%x',
          fallbackPath: '/fallback/%s',
          extension: 'jpg',
          tileResolution: 512,
          maxLevel: 4,
          cubeResolution: 3968,
        },
        hotSpots: [
          {
            pitch: -47.5,
            yaw: -11,
            type: 'scene',
            text: '回到Library',
            sceneId: 'library',
          },
          // 其他热点保留
        ],
      },
    },
  };

  return (
    <div>
      <ReactPannellum
        id="panorama"
        width="100%"
        height="500px"
        config={panoramaConfig} // 仅传递完整配置，移除imageSource
      />
    </div>
  );
};

export default NewView;

关键修正点 #

• 移除imageSource：完整漫游配置已包含所有场景资源，无需单独指定单张图。
• 修正初始场景：将default.firstScene设为已定义的场景（如library），组件会自动读取该配置，无需额外传递sceneId。
• 调整Hotspot类型：场景切换的热点需设置type: 'scene'，确保点击后跳转目标场景。
• 清理重复配置：删除default中重复的autoLoad项。

内容的提问来源于stack exchange，提问作者chathura jayaranga