Skip to content
Branch: master
Find file History
1
Latest commit 90d37aa Apr 12, 2019

README.md

8th Wall Web Examples - AFrame

Example 8th Wall Web projects using AFrame:

  • Tap to place - This interactive example allows the user to grow trees on the ground by tapping. This showcases raycasting, instantiating objects, importing 3D models and the animation system.

  • Toss an object - This interactive example lets the user tap the screen to toss tomatoes. When they hit the ground, they splat and make a sound. This introduces physics, collision events and playing sounds.

  • Portal - This example shows off the popular portal illusion in web AR using three.js materials and the camera position as an event trigger.

  • Manipulate - This example shows how to use touch gestures to manipulate a 3D object.

  • Capture a photo - This example allows the user to capture photo evidence of a UFO abduction.

After following the steps above, you should have fully functional versions of:

Tap to place Toss Object Portal Manipulate Capture a photo
tapplace-screenshot toss-screenshot portal-screenshot manipulate-screenshot capture-screenshot
Try Demo (mobile) Try Demo (mobile) Try Demo (mobile) Try Demo (mobile) Try Demo (mobile)
or scan on phone:
QR1
or scan on phone:
QR2
or scan on phone:
QR2
or scan on phone:
QR2
or scan on phone:
QR2

Marker Based

  • Art gallery - This example uses image targets to show information about paintings in AR. This showcases image target tracking, as well as loading dynamic content and using the xrextras-generate-image-targets component.
  • Flyer - This example uses image targets to display information about jellyfish on a flyer. It uses the xrextras-named-image-target component to connect an to an image target by name while the xrextras-play-video component enables video playback.
Art gallery Flyer
artgallery-screenshot flyer-screenshot
Image targets for demo Image targets for demo
Try Demo (mobile) Try Demo (mobile)
or scan on phone:
QR1
or scan on phone:
QR1
You can’t perform that action at this time.