pick-a-place
A-Frame
Three.js
GLSL
A static WebXR Site to view and interact with 360 scenes.
• This project started as an example project from the A-Frame School curriculum. As I continued learning, it became a playground for new components and interactions. It was eventually refactored into this demo site.The project now contains over a dozen unique components, and while I can't cover them all here, I have listed some of the project highlights below. If you'd like to know more please check out the GitHub repo or reach out!
Github
Live site
About this project
This project started as an example project from the A-Frame School curriculum. As I continued learning, it became a playground for new components and interactions. It was eventually refactored into this demo site. The project now contains over a dozen unique components, and while I can't cover them all here,  I have listed some of the project highlights below. If you'd like to know more please check out the GitHub repo or reach out!

Highlights

Community Contributions
Performance
  • Uses GPU Compressed Textures to increase performance on GPU-constrained devices (mobile and standalone).

  • Uses Web Workers to transcode KTX2 container files.
VR & Mobile & PC
  • Unique Website Interface for all platforms (PC,  Mobile, VR)
  • Realistic physics with A-Frame Physics System + Cannon
  • Interactive 3D  icons via (AABB colliders, Physics Extras, Super-Hands)
  • Visual design to communicate all interactions to users.
Shaders & Animation
  • Custom GLSL shader for 2D & 3D Icons.
  • Used LottieFiles to make Mobile helper animation.
  • Animated CubeMap Icons along curve path
  • Welcome animation on landing page.
  • Created custom version of the Cubemap shader to work with "CompressedArrayTexture's".
VR
VR
Fully Interactive Scene
Mobile
Mobile
Mobile Interface
Mobile
PC
Interactive 2d & 3d UI elements
More about this project
This project was my first introduction to A-Frame and WebXR. In fact, it was one my first experiences with web development in general.
I have recently updated it to be compatible with A-Frame version 1.6.0

Say Hello.

Scroll