Awesome
Deprecated
This repository will be deprecated due to the rapidly evolving JavaScript ecosystem and the increasing difficulty of keeping up with the changes in the Three.js API.
Over the years, the Three.js library has undergone significant updates and improvements, introducing new features and optimizations. However, these advancements have also led to changes in the API, making it challenging for us to maintain this repository effectively.
We understand that this may be disappointing news for those who have relied on this repository for their projects. We apologize for any inconvenience this may cause.
To ensure that you can continue to benefit from the latest updates and improvements in the Three.js library, we recommend using the official Three.js documentation and resources. The official documentation provides comprehensive guides, examples, and API references to help you leverage the full potential of Three.js in your projects.
Here are some alternative resources that we recommend:
We want to express our gratitude to the community for your support and contributions to this repository. We encourage you to migrate your projects to alternative solutions as there are many more Javascript-based panorama viewer nowadays compared to 2015.
This repository will remain available for historical purposes, but no further updates or bug fixes will be provided. We encourage you to fork this repository if you wish to continue maintaining it independently.
Thank you for your understanding and continued support.
Panolens.js
Javascript 360 Panorama Viewer
Panolens.js is an event-driven and WebGL based panorama viewer. Lightweight and flexible. It's built on top of Three.JS.
Examples — Documentation — Migration — FAQ
<p align="center"> <img alt= "Panorama Demo" style="object-fit:cover" src="https://github.com/pchen66/pchen66.github.io/blob/master/Panolens/images/panolens.gif?raw=true"> </p>Usage
Include three.min.js
and panolens.min.js
To find the correct supported versions, please check dependencies
section in package.json
or acess PANOLENS.VERSION
or PANOLENS.THREE_VERSION
at runtime.
<script src="js/three.min.js"></script>
<script src="js/panolens.min.js"></script>
The following code generates a 360 image panorama. The first panorama added to the viewer will be the entry point. To link panoramas, use panorama.link( other_panorama, new THREE.Vector3( X, Y, Z ) )
to connect the two.
const panorama = new PANOLENS.ImagePanorama( 'asset/equirectangular.jpg' );
const viewer = new PANOLENS.Viewer();
viewer.add( panorama );
Dependency
Panolens.js includes Tween.js by default, meaning TWEEN
will be available with window
object
How to contribute
Always make your contributions for the latest dev
branch, not master
, so it can be tracked for the next release.
Development
npm start
Build
npm run build-closure