https://github.com/hendrialqori/pannellum-minify
Based on the issue created at pannellum repo's mpetroff/pannellum#1182, I took the initiative to create a src folder to minify the version using Webpack.
https://github.com/hendrialqori/pannellum-minify
360-view javascript pannellum
Last synced: 26 days ago
JSON representation
Based on the issue created at pannellum repo's mpetroff/pannellum#1182, I took the initiative to create a src folder to minify the version using Webpack.
- Host: GitHub
- URL: https://github.com/hendrialqori/pannellum-minify
- Owner: hendrialqori
- Created: 2024-06-03T08:24:46.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-06-03T10:18:56.000Z (11 months ago)
- Last Synced: 2025-02-06T09:11:33.985Z (3 months ago)
- Topics: 360-view, javascript, pannellum
- Language: JavaScript
- Homepage:
- Size: 116 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Background
Based on the issue created at pannellum repo's [https://github.com/mpetroff/pannellum/issues/1182](https://github.com/mpetroff/pannellum/issues/1182),
I took the initiative to create a src folder to minify the version using Webpack.
## how to implement?
### React
Copied the build folder from this repo and pasted it in your project, then created an index folder to import that file and import it to use in another file.
```js
//index.ts
import './build/pannellum.min.js'
import './build/pannellum.min.css'
const pannellum = (window as any).pannellum
export default pannellum
```
```jsx
//App.jsx
import React from 'react'
import pannellum from 'your_path_pannellum_export_file'
export default function App(){
const containerRef = React.useRef()
const viewerRef = React.useRef()
React.useEffect(function initialView(){
//read official API doc pannellumjs
//https://pannellum.org/documentation/api/
viewerRef.current = pannellum.viewer(containerRef.current, {
type: "equirectangular",
panorama: "https://pannellum.org/images/cerro-toco-0.jpg",
yaw: 176,
pitch: -12,
autoLoad: true,
hotSpots: [
{
"id": "1",
"pitch": 14.1,
"yaw": 100,
"type": "info",
"text": "Baltimore Museum of Art",
"dragHandlerFunc": dragHandler,
"dragHandlerArgs": "example arg"
"draggable": "true",
},
]
})
}, [])
function dragHandler(event, args) {
console.log(event, args);
}
return (
// if styling using tailwind css
)
}
```
### Vanilla Javascript
```html
Hot spots
#panorama {
width: 100%;
height: 100vh;
}
function dragHandler(event, args) {
console.log(event, args);
}
pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": "examplepano.jpg",
"hotSpots": [
{
"pitch": 14.1,
"yaw": 1.5,
"type": "info",
"text": "Example",
"draggable": true,
"dragHandlerFunc": dragHandler,
"dragHandlerArgs": "example arg"
},
]
});
```