https://github.com/trots/vtour
JavaScript cylindrical panorama viewer based on three.js
https://github.com/trots/vtour
cylindrical-panoramas javascript panorama threejs virtual-tour
Last synced: 6 months ago
JSON representation
JavaScript cylindrical panorama viewer based on three.js
- Host: GitHub
- URL: https://github.com/trots/vtour
- Owner: trots
- License: mit
- Created: 2020-08-28T18:44:23.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T15:29:02.000Z (about 2 years ago)
- Last Synced: 2025-02-10T06:12:46.077Z (8 months ago)
- Topics: cylindrical-panoramas, javascript, panorama, threejs, virtual-tour
- Language: JavaScript
- Homepage: https://trots.github.io/vtour/
- Size: 593 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
vtour is a JavaScript library to create and view the cylindrical panoramas.
Features:
- Create virtual 3D tours with transitions between multiple cylindrical panoramas,
- Specify photospots to show additional pictures on a panorama scene.
[View Demo](https://trots.github.io/vtour/).
Built on top of the [three.js](https://github.com/mrdoob/three.js).
## Usage
Download and unpack the release build
Include `three.min.js`, `OrbitControls.js` and `vtour.min.js`
```
```
Start a tour in a script section
```
var tour = VTOUR.start(document.body, {
entrySceneUid: "scene_0",
scenes: [{uid: "scene_0", title: "Scene", image: "scene.jpg"}]
});
```
The `VTOUR.start()` method arguments:
1. `document.body` - the HTML element where the panorama will be created
1. `{...}` - the tour configuration JSON
## Build
1. Install Node.js package to provide `npm` command
1. Go to `vtour` project dir and install dependencies:
```
> npm install
```
1. Run build:
```
> npm build-release
```
1. Check built files in a `dist` directory
## Examples
Look at `examples` folder to learn the demo tour. The demo tour running steps:
1. Place `vtour` files into a some `foo` directory
1. Copy files from `examples` directory to the `foo` directory:
- `examples/demo.html`
- `examples/demo_image_0.png`
- `examples/demo_image_1.png`
- `examples/picture.png`
1. Run an http server on `foo` directory
Python example:
```
> cd foo
> python -m http.server 8000
```
1. Open browser and go to `localhost:8000/demo.html`