We can embed the 360 Degree Panorama Images on the webpage using Pannellum.
With autoload on
<iframe width="980" height="450" allowfullscreen
style="border-style:none;"
src="/visuals/pannellum.htm#panorama=../wp-content/uploads/2024/03/Imiloa_grounds.jpg&hfov=150&autoLoad=true&yaw=65&pitch=0">
</iframe>
With autoload off
<iframe width="980" height="450" allowfullscreen
style="border-style:none;"
src="/visuals/pannellum.htm#panorama=../wp-content/uploads/2024/03/Imiloa_grounds.jpg&hfov=150&autoLoad=false&yaw=65&pitch=0">
</iframe>
Important parameters
- hfov (number) - sets the panorama’s starting horizontal field of view in degrees. Defaults to 100.
- pitch (number) - Sets the panorama’s starting pitch (vertical) position in degrees. Defaults to 0.
- yaw (number) - Sets the panorama’s starting yaw (horizontal) position in degrees. Defaults to 0.
- haov (number) - Sets the panorama’s horizontal angle of view, in degrees. Defaults to 360. This is used if the equirectangular image does not cover a full 360 degrees in the horizontal.
- vaov (number) - Sets the panorama’s vertical angle of view, in degrees. Defaults to 180. This is used if the equirectangular image does not cover a full 180 degrees in the vertical.
- vOffset (number) - Sets the vertical offset of the center of the equirectangular image from the horizon, in degrees. Defaults to 0. This is used if vaov is less than 180 and the equirectangular image is not cropped symmetrically.
All parameters are defined here. There are also example embed codes on the project website.
Loading...