React bindings for krpano.
- Dynamic rendering of scenes and hotspots without generating xml
- Use Typescript to develop and provide a complete type definition file.
- krpano.js >= 1.20.9
- React >= 16.8
- With NPM
yarn add @0xllllh/react-krpano- Download the latest Krpano from Krpano official website and unzip it to get JS file, then import it through the script tag of your index.html to make the script available globally.
<script src="krpano.js"></script>The most basic usage is to directly load the krpano xml file through Krpano the xml parameters of the component . The Krpano component will faithfully render according to the xml configuration.
krpano.xml
<krpano onstart="loadscene(scene1);">
<scene name="scene1">
<image>
<cube url="https://some.jpg_%s" />
</image>
<hotspot
name="image_hotspot"
type="image"
url="https://0xllllh.github.io/krpano-examples/images/hotspot.png"
ath="0"
atv="0"
/>
</scene>
<view hlookat="0" vlookat="0" fovtype="VFOV" fov="90" fovmin="30" fovmax="150" />
</krpano>App.css
.App {
width: 600px;
height: 400px;
}App.tsx
ReactDOM.render(<Krpano className="App" xml="/krpano.xml" />, document.getElementById('app'));In order to simplify the implementation and use, the implementation of krpano's image tag has been merged into the Scene component. The images of the scene can be specified through the
imagesprops of Scene component
To add a scene, you need to use the Scene component. Each one represents a scene, and active scene can be specified through the currentScene prop of Krpano component.
ReactDOM.render(
<Krpano currentScene="scene0">
<Scene
name="scene0"
images={[{
type: 'cube',
url: 'https://qhyxpicoss.kujiale.com/r/2017/09/01/L3D221IS3QKUQUQBOGAPEK3P3XU888_7500x1250.jpg_%s',
}]}
/>
<Scene
name="scene1"
images={[{
type: 'cube',
url: 'https://qhyxpicoss.kujiale.com/r/2017/09/01/L3D221IS3QKUQUQBOGAPEK3P3XU888_7500x1250.jpg_%s',
}]}
/>
<View fov={90} fovmin={80} fovmax={120} />
</Krpano>,
document.getElementById('app'));Currently support only image hotspots
Hotspots can be easily rendered using Hotspot component. It support a bunch of callback settings
const App = () => {
const [currentScene, setCurrentScene] = React.useState('scene0');
// Datas
const scenes = [{
name: 'scene0',
previewUrl: '/preview.jpg',
hotspots: [{
name: 'hot',
type: 'image',
url: 'hotspot.png',
ath: 0,
atv: 20,
onClick: () => setCurrentScene('scene1')
}]
},
name: 'scene1',
previewUrl: '/preview.jpg',
hotspots: []
}]
return (
<Krpano currentScene={currentScene}>
<View fov={90} fovmin={80} fovmax={120} />
{scenes.map(sc => (
<Scene name={sc.name} previewUrl={sc.previewUrl}>
{sc.hotspots.map(pt => <Hotspot {...pt} />)}
</Scene>
))}
</Krpano>
)
}
ReactDOM.render(<App />, document.getElementById('app'));Since this project has just started development, many components and functions are not yet completed. If there is a function that needs priority support, you can raise an issue on Github. If you want, you can use the KrpanoActionProxy to call the krpano functions by yourself after obtaining it.
Various callback functions will get the KrpanoActionProxy instance as a parameter, and the encapsulated method can be used to control krpano. You can also use renderer.KrpanoRenderer to get a native instance of krpano.
const App = () => {
const [currentScene, setCurrentScene] = React.useState('scene0');
const onHotspotClick = React.useCallback((renderer: KrpanoActionProxy) => {
console.log(renderer.get('view.fov'));
setCurrentScene('scene1');
}, []);
return (
<Krpano
className="App"
currentScene={currentScene}
onReady={renderer => {
console.log('Ready message from App', renderer.krpanoRenderer);
}}
>
<View fov={90} fovmin={80} fovmax={120} />
<Scene name="scene0" previewUrl="/preview.jpg">
<Hotspot
name="hot"
type="image"
url="https://0xllllh.github.io/krpano-examples/images/hotspot.png"
ath={0}
atv={20}
onClick={onHotspotClick}
/>
</Scene>
<Scene name="scene1" previewUrl="/preview.jpg" />
</Krpano>
);
};In addition, tags such as style and action can be written in xml, then imported through xml prop of Krpano component.
pano.xml
<krpano>
<style name="hotspot_style" url="hotspot.png" scale="0.5" edge="top" distorted="true" onover="tween(scale,0.55);" onout="tween(scale,0.5);" />
...
</krpano>App.tsx
const App = () => (
<Krpano
className="App"
xml="/pano.xml"
currentScene="scene0"
>
<Scene name="scene0" previewUrl="/preview.jpg">
<Hotspot
name="hot"
type="image"
style="hotspot_style"
ath={0}
atv={20}
/>
</Scene>
</Krpano>
);- Only one krpano panorama is displayed on a page at a time. If you need to display multiple panoramas at the same time, a lighter solution will be more appropriate.
- React components only implement part of their functions for the time being.