Augmented reality in a WordPress block. Upload any object, and see it in your room using your phone's camera.
Contributors: ryankienstra
Tags: blocks, augmented-reality
Requires at least: 4.9
Tested up to: 5.1
Stable tag: 0.1.0
License: GPLv3
Donate link: http://jdrf.org/get-involved/ways-to-donate/
Requires PHP: 7.1
This is a Google Codelab with a block editor back-end (the cup shown above is by Poly by Google).
It's experimental, and requires an Android device that can run ARCore, and earlier versions of Chrome Dev or Canary (70-72). Using older browsers like these is only advisable on a testing device, not your normal phone.
Please see the Getting Set Up section of the Codelab. The files from the Google Codelab are mainly copied from its GitHub repo, with slight changes.
Setup
- Find
.objand.mtlfiles for a 3D object, like from Poly or Free3D - In the block (Gutenberg) editor, add an "AR Viewer" block
- Select the
.objand.mtlfiles in the block UI, and click "Save Draft" or "Update":
- View the front-end of the post
- Click "Start augmented reality"
- Rotate the screen until an anchor appears:
- Click the anchor, and see the 3d object. The object below is from Poly, created by Poly by Google:
- Upload the augmented-reality directory to your /wp-content/plugins directory.
- In the "Plugins" menu, find "Augmented Reality," and click "Activate."
- Adds the "AR Viewer" block, with controls to upload
.objand.mtlfiles. - Implements a Google Codelab, with small changes to its JavaScript files.
- Works on select Android devices, with Chrome Dev and Canary 70-72.