Lookaround is a website-based neat tool to help you see your image in a 360-degree panorama-like view, also giving you useful customization opportunities. The tool is designed to be as user-friendly and intuitive as possible, so you can get the best results with minimal effort!
[!NOTE] No installation needed, the website is already up and running on Heroku. Check it out by visiting The Website.
Visit the website by clicking the link above.
Upload your image by clicking the “Upload” button in the left sidebar.
Wait for the image to load and then click the “Create 3D Panorama” button on the right sidebar.
If the rendered panorama is not to your liking, you can adjust the settings in the left sidebar and click the “Create 3D Panorama” button again.
Use the built-in controls to explore the panorama and enjoy the view!
[!TIP] For a better look on the panorama, you can use the “Fullscreen” button in the right sidebar to view the panorama in fullscreen mode (press
Esc
orF11
to exit).
Quite simply, actually! The website uses the Three.js library to render the 3D panorama. The image is projected onto a sphere, and the user can look around the sphere using the built-in controls (some of them can be enabled or disabled using the settings on the left sidebar). The controls are also provided by Three.js, and they are very intuitive and easy to use.
For the backend, the website uses the Flask framework to handle the image upload and the file storage. The image is uploaded to the server, and then the server sends the image to the client, where it is rendered using Three.js.
[!CAUTION] The website DOES store the images on the server, but they are deleted after an hour. The website also does not store any personal information about the users, and it does not use cookies or any other tracking technologies.
The website has a modern stylized interface with a horizontal-ish layout and a eye-friendly color scheme. Everything is divided into sections so getting into the flow of using the web tool is incredibly easy. The left sidebar contains the settings and the upload button, and the right sidebar contains the controls for the 3D panorama.
The website has been tested on a couple of devices and it runs decently, but other benchmarks are appreciated if you’re willing to provide some!
Device | Browser | Performance | Highest Texture Quality |
---|---|---|---|
Laptop High 1 | Chrome | Very High, but decreases slightly when recreating the panorama a few times | Maximum |
Laptop High 1 | Firefox | Exceptionally High | Maximum |
Laptop High 1 | Edge | Exceptionally High | Maximum |
Desktop Mid 1 | Chrome | Medium-High, but decreases slightly when recreating the panorama a few times | Maximum |
Desktop Mid 1 | Firefox | High | Maximum |
Desktop Mid 1 | Edge | High | Maximum |
[!NOTE] The browser performance is based on the smoothness of the controls and the rendering speed. The texture quality is based on the quality of the image projected onto the sphere.
[!WARNING] The browser version can also have a significant impact on the performance of the WebGL (Three.js) rendering. For example, the performance on the latest version of Chrome is significantly better than on the previous versions.
If you want to contribute to the project, you can do so by forking the repository and then creating a pull request. You can also open an issue if you find a bug or have a feature request.
Additionally, you can contribute by providing feedback, suggestions, benchmarks, or anything else that can help improve the project. Any help is appreciated!
Copyright (c) 2024, Lyubomir Ternavskiy. You can always find the full license in the LICENSE file, but here are the main points:
If you have any questions, suggestions, or anything else you want to share, you can contact me at:
ternavski103@gmail.com
@lyubomirt
I’m always open to feedback and suggestions, so don’t hesitate to reach out!