## 示例

支持 `html`，但是在 vr 视角中会丢失图片。

```tsx
import React, { useState, useMemo } from "react";
import { HotSpot, Krpano, Scene, View } from "@dage/krpano";
import "./index.css";

const URL = "https://houseoss.4dkankan.com/project/leifeng-transfer";

export default () => {
  const [currentScene, setCurrentScene] = useState("center1");
  const [hotspotHover, setHotspotHover] = useState(false);

  const CENTER_SCENE_LIST = useMemo<SceneProps[]>(
    () => [
      {
        name: "center1",
        previewUrl: URL + "/panos/center1.tiles/preview.jpg",
        imageTagAttributes: {
          type: "cube",
          tileSize: 512,
          multires: true,
        },
        images: [
          {
            tiledImageWidth: 2624,
            tiledImageHeight: 2624,
            url: URL + "/panos/center1.tiles/%s/l3/%v/l3_%s_%v_%h.jpg",
          },
          {
            tiledImageWidth: 1280,
            tiledImageHeight: 1280,
            url: URL + "/panos/center1.tiles/%s/l2/%v/l2_%s_%v_%h.jpg",
          },
          {
            tiledImageWidth: 640,
            tiledImageHeight: 640,
            url: URL + "/panos/center1.tiles/%s/l1/%v/l1_%s_%v_%h.jpg",
          },
        ],
        children: (
          <>
            <View
              hlookat={0}
              vlookat={0}
              fovType="MFOV"
              fov={100}
              maxPixelZoom={2}
              fovMin={70}
              fovMax={140}
              limitView="auto"
            />

            <HotSpot
              name="hotspot1"
              type="text"
              atv={4}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onClick={() => alert("点击了 hotspot1")}
              onOver={() => setHotspotHover(true)}
              onOut={() => setHotspotHover(false)}
            >
              <div className={`hotspot ${hotspotHover && "active"}`}>
                <span>建筑名</span>
                <div className="pointer" />
              </div>
            </HotSpot>
          </>
        ),
      },
    ],
    [hotspotHover]
  );

  return (
    <div className="demo">
      <Krpano
        className="krpano"
        currentScene={currentScene}
        passQueryParameters={true}
      >
        {CENTER_SCENE_LIST.map((sc) => (
          <Scene key={sc.name} {...sc} />
        ))}
      </Krpano>
    </div>
  );
};
```

## API

<API hideTitle exports='["HotSpot"]' src='@dage/krpano/index.d.ts'></API>
