|
@@ -1,13 +1,17 @@
|
|
## 示例
|
|
## 示例
|
|
|
|
|
|
|
|
+支持 `html`,但是在 vr 视角中会丢失图片。
|
|
|
|
+
|
|
```tsx
|
|
```tsx
|
|
import React, { useState, useMemo } from "react";
|
|
import React, { useState, useMemo } from "react";
|
|
import { HotSpot, Krpano, Scene, View } from "@dage/krpano";
|
|
import { HotSpot, Krpano, Scene, View } from "@dage/krpano";
|
|
|
|
+import "./index.css";
|
|
|
|
|
|
const URL = "https://houseoss.4dkankan.com/project/leifeng-transfer";
|
|
const URL = "https://houseoss.4dkankan.com/project/leifeng-transfer";
|
|
|
|
|
|
export default () => {
|
|
export default () => {
|
|
const [currentScene, setCurrentScene] = useState("center1");
|
|
const [currentScene, setCurrentScene] = useState("center1");
|
|
|
|
+ const [hotspotHover, setHotspotHover] = useState(false);
|
|
|
|
|
|
const CENTER_SCENE_LIST = useMemo<SceneProps[]>(
|
|
const CENTER_SCENE_LIST = useMemo<SceneProps[]>(
|
|
() => [
|
|
() => [
|
|
@@ -42,7 +46,7 @@ export default () => {
|
|
hlookat={0}
|
|
hlookat={0}
|
|
vlookat={0}
|
|
vlookat={0}
|
|
fovType="MFOV"
|
|
fovType="MFOV"
|
|
- fov={120}
|
|
|
|
|
|
+ fov={100}
|
|
maxPixelZoom={2}
|
|
maxPixelZoom={2}
|
|
fovMin={70}
|
|
fovMin={70}
|
|
fovMax={140}
|
|
fovMax={140}
|
|
@@ -51,18 +55,26 @@ export default () => {
|
|
|
|
|
|
<HotSpot
|
|
<HotSpot
|
|
name="hotspot1"
|
|
name="hotspot1"
|
|
- url={require("./guide.png")}
|
|
|
|
- atv={5}
|
|
|
|
|
|
+ type="text"
|
|
|
|
+ atv={4}
|
|
scale={0.5}
|
|
scale={0.5}
|
|
edge="top"
|
|
edge="top"
|
|
|
|
+ bg={false}
|
|
distorted={true}
|
|
distorted={true}
|
|
onClick={() => alert("点击了 hotspot1")}
|
|
onClick={() => alert("点击了 hotspot1")}
|
|
- />
|
|
|
|
|
|
+ onOver={() => setHotspotHover(true)}
|
|
|
|
+ onOut={() => setHotspotHover(false)}
|
|
|
|
+ >
|
|
|
|
+ <div className={`hotspot ${hotspotHover && "active"}`}>
|
|
|
|
+ <span>建筑名</span>
|
|
|
|
+ <div className="pointer" />
|
|
|
|
+ </div>
|
|
|
|
+ </HotSpot>
|
|
</>
|
|
</>
|
|
),
|
|
),
|
|
},
|
|
},
|
|
],
|
|
],
|
|
- []
|
|
|
|
|
|
+ [hotspotHover]
|
|
);
|
|
);
|
|
|
|
|
|
return (
|
|
return (
|