Example 8th Wall Web projects, by 3D framework
-
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.
-
Change animations - This interactive example allows the user to position, scale, rotate, and change between animations embedded in a 3D model. This showcases raycasting, gesture inputs and using A-Frame's animation-mixer.
| Tap to place | Toss Object | Portal |
|---|---|---|
 |
 |
 |
| Try Demo (mobile) | Try Demo (mobile) | Try Demo (mobile) |
or scan on phone: |
or scan on phone: |
or scan on phone: |
| Manipulate | Capture a photo | Change animations |
|---|---|---|
 |
 |
 |
| Try Demo (mobile) | Try Demo (mobile) | Try Demo (mobile) |
or scan on phone: |
or scan on phone: |
or scan on phone: |
- 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.
- Alpha Video - This example uses an image target to trigger a video. An A-Frame component is used for background removal of an mp4 video file to give a "green screen" effect.
| Art gallery | Flyer | Alpha Video |
|---|---|---|
 |
 |
 |
| Image targets for demo | Image targets for demo | Imaget target for demo |
| Try Demo (mobile) | Try Demo (mobile) | Try Demo (mobile) |
or scan on phone: |
or scan on phone: |
or scan on phone: |
- 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 animation.
| Tap to place |
|---|
|
| Try Demo (mobile) |
or scan on phone: |
- 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 animation.
- 8i hologram - This example illustrates how to integrate an 8i hologram (www.8i.com) into an 8th Wall Web experience.
- Flyer - This example uses image targets to display information about jellyfish on a flyer.
| Tap to place | 8i hologram | Flyer |
|---|---|---|
|
 |
|
| Try Demo (mobile) | Try Demo (mobile) | Try Demo (mobile) |
or scan on phone: |
or scan on phone: |
or scan on phone: |