360 View

Beschreibung

Embed 360-degree photos into your blog content with a shortcode. See example here: Using 360-degree Photos in WordPress

FEATURES:

  • place multiple 360-degree photos on the same page
  • host the photos anywhere (your own server, github, cloud drive, someone else’s website, i.e. literally anywhere)
  • no 3rd party accounts are required. Uploading your images to a 3rd party server is not required either (though cloud hosting of your images is also supported)
  • wrap text around the photo
  • fullscreen mode
  • support for mobile devices and VR headsets
  • mobile device and headset position tracking
  • ability to add a 3-d label to the image
    • customize the label position and rotation
    • customize font family
    • customize the label size
  • ability to rotate the 360-degree photo (level horizon, change the starting point etc)
  • ability to define the viewport width and height
  • ability to save a screenshot from the 360-degree photo

SHORTCODE EXAMPLE

basic example:
[360 src=“my_favorite-360-degree-image.jpg“ text=“My Favorite Place“]

more advanced example:
[360 src=“my_favorite-360-degree-image.jpg“ text=“My Favorite Place“ text-position=“-2 4 -3.5″ text-rotation=“0 0 0″ width=“400px“ height=“400px“ align=“left“ rotate=“2 90 20″ text-color=“#aa0000″ text-width=“5″ text-scale=“2 2″]

SHORTCODE PARAMETERS

The complete list of supported parameters is provided below. The values in the parenthesis are the defaults.

  • width („100%“) – the width of the viewport, could be specified in pixels, percents etc
  • height („300px“) – the height of the viewport
  • rotation („0 0 0“) – the initial rotation of the image (pitch, yaw and roll) in degrees
  • scale („-1 1 1“) – the scale (i.e. how do you want to resize your image) of the image in 3 dimensions. Note that the first parameter -s negative. If you make it positive then the image will be mirrored horizontally.
  • fov (80) – use this parameter to correct the „fisheye“ effect when you are displaying the image in a viewport that’s stretched too much (see the FAQ)
  • text („“) – the text label to display on the image. The default is the empty string (i.e. no text label will be displayed)
  • text-position („0.0 0.0 -2.5“) – position of the text label in 3d space. It’s best to keep the 3rd coordinate negative, around 2-5
  • text-rotation („0 0 0“) – text label rotation (pitch, yaw and roll) in degrees
  • text-font („kelsonsans“) – the font to use for the text label. Supported options are
    • aileronsemibold
    • dejavu
    • exo2bold
    • exo2semibold
    • kelsonsans
    • monoid
    • mozillavr
    • sourcecodepro
    • standard web font families (Arial, Helvetica, etc) are NOT supported
  • text-color („lightgrey“) – the font color. Both HTML color names and hex codes are supported
  • text-scale („1 1“) – font scale (x and y). I.e. if you want to make the font taller, then specify something like „2 1“.
  • src – the URL of the image to display. This URL can be anywhere. For instance if you’re self-hosting WordPress, you can upload the image to your media library and list its URL (either relative or absolute) here.
  • align („left“) – how to align the viewport relative to the rest of the page contents

Screenshots

  • Embed your 36-degree image into your text just like a regular image. Great for storytelling!
  • Place multiple 360-degree images next to each other and sync their viewports. Great for comparing two points of view on a mobile device with full motion tracking!
  • Arrange multiple 360-degree views any way you want. Great for seeing multiple places simultaneously!
  • Tons of shortcode parameters to display the images and label them exactly the way you want.

Installation

If you’re using wordpress.com or configured plugins installation via WordPress web UI then

  • go to the WordPress admin console
  • go to Plugins->Add New
  • search for „WordPress VR“
  • Click „Install Now“
  • Click „Activate“

If you’re self-hosting WordPress or prefer to install the plugins from the command line

  • go to /wp-content/plugins
  • download the plugin .zip file (use wget or curl) into the plugins directory
  • unzip the file (and delete the .zip file if you want to)
  • go to WordPress admin interface
  • go to Plugins
  • locate „WordPress VR“
  • click „Activate“

FAQ

Can I embed video

Not with this version of this plugin. Anyway, hosting video files on your server is very traffic consuming, so you probably should not be doing that anyway. Using Youtube or similar service would be a lot cheaper and less stressful to your servers.

Is there a nice web UI for embedding the images

No and (at least for now) I plan to keep this plugin as a shortcode

How many 360-degree images can I embed on one page

As many as you want (though don’t use too many – this may make the page too slow on slow computers)

How can I support you

How do I save a screenshot of the 360-degree photo viewport?

Click on the photo you wish to save and press Control-Alt-S (yes, it’s still Control-Alt-S even on Mac, not Command-Alt-S).
This will save the current viewport. If you want to save the entire photo you need to press Control-Alt-Shift-S.

The center part of the photo looks good, but everything further away from the center looks distorted. How do I fix this?

You may also notice that the parts of the image close to the left and right edges are are moving unnaturally when you’re
looking left and right. It looks like one of those photos made with bad fisheye lens. This happens when you’re trying to
fit an image into the viewport that’s too stretched horizontally. The photo dimensions are „calibrated“ by the vertical
dimension, so the horizontal part gets too stretched at the edges. There are two ways to fix the problem:
– a better way is to always display the image in a viewport with x/y ratio close to 3/4. For instance if you sent the width
to 300 then the height should be close to 400
– if the „better“ way is not possible due to your page layout then adjust the „fov“ parameter. The default is 80, so try
to reduce it to 40 or even less for extremely stretched images. This will cause some image quality degradation though
because science (optics, to be more specific).

My picture looks like some kind of kaleidoscope. How do I fix this?

360 View plugin only supports equirectangular images (at least at the moment). Check your camera software, it most definitely
supports export in the most popular equirectangular format and use that format. If you open your image in a regular photo viewer
and it looks like two circles, that’s the wrong format. For instance, in Insta360 One X Studio 2020 you need to open the .insp
file and export it – that will generate the acceptably formatted image.

My mobile browser shows strange message when I’m trying to view the 360-degree image: „Set your browser to request the mobile version of the site and reload the page to enjoy immersive mode.“. How to fix this?

This message appears in mobile browsers (Mobile Safari for instance) when it’s configured to retrieve the desktop version
of the site instead of mobile. You have two options:
– Just click „Close“ and continue watching the photo using the „finger version of drag-and-drop“. It’s not impressive,
especially since you may not be able to navigate vertically.
– Configure your browser to request the mobile version. In iOS 13 that’s Settings->Safari->Request Desktop Website->All Websites
and turn that off. This will allow you to watch the image by moving your mobile device around, it will work like a „portal“.
BTW, this will also fix this problem in Chrome since in iOS Chrome is Safari-based.

My mobile browser asks „This immersive website requires access to your device motion sensors. (Deny/Allow). What do I do?

You have two options:
– Deny – in this case you will only be able to watch the image by scrolling it horizontally with your finger. That’s
less than impressive and very inconvenient.
– Allow – this will allow you to navigate the image by moving the mobile device around. That’s a lot more immersive!

Rezensionen

Für dieses Plugin gibt es keine Rezensionen.

Mitwirkende & Entwickler

„360 View“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

Übersetze „360 View“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

0.2.4

Improved the readme.txt file. Added low-res banner.

0.2.3

Improved names of the global php functions

0.2.2

Added support for the Field of View and refactored to comply with WordPress Plugin requirements

0.1.1

The first public release. Provides a shortcode embedding 360-degree photos and adding a text label to it.

0.0.0

This version was not released, I was using it only for local testing