All Projects → shaqian → pacman

shaqian / pacman

Licence: MIT License
Pacman WebVR using Aframe

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to pacman

aframe-react
React library for A-frame
Stars: ✭ 58 (+190%)
Mutual labels:  vr, webvr, aframe
Thehallaframe
WebVR demo that displays art
Stars: ✭ 120 (+500%)
Mutual labels:  vr, webvr, aframe
A Mmd
A-Frame MMD component
Stars: ✭ 74 (+270%)
Mutual labels:  vr, webvr, aframe
A Painter
🎨 Paint in VR in your browser.
Stars: ✭ 539 (+2595%)
Mutual labels:  vr, webvr, aframe
Aframe
🅰️ web framework for building virtual reality experiences.
Stars: ✭ 13,428 (+67040%)
Mutual labels:  vr, webvr, aframe
Superframe
📦 A super collection of A-Frame components.
Stars: ✭ 1,061 (+5205%)
Mutual labels:  vr, webvr, aframe
Awesome Aframe
[DISCONTINUED] Collection of awesome resources for the A-Frame WebVR framework.
Stars: ✭ 1,310 (+6450%)
Mutual labels:  vr, webvr, aframe
Aframe React
:atom: Build virtual reality experiences with A-Frame and React.
Stars: ✭ 1,199 (+5895%)
Mutual labels:  vr, webvr, aframe
aframe-registry
[DISCONTINUED] Curated collection of community A-Frame components.
Stars: ✭ 76 (+280%)
Mutual labels:  vr, webvr, aframe
Aframe Effects
A VR Ready Post processing framework for Three.js and/or A-Frame
Stars: ✭ 176 (+780%)
Mutual labels:  vr, webvr, aframe
Aframe Inspector
🔍 Visual inspector tool for A-Frame. Hit *<ctrl> + <alt> + i* on any A-Frame scene.
Stars: ✭ 469 (+2245%)
Mutual labels:  vr, webvr, aframe
lvr
👓 Augmented Reality for everyone - Out of the world experiences
Stars: ✭ 92 (+360%)
Mutual labels:  vr, webvr, aframe
Ideaspace
😎 Create interactive 3D and VR web experiences for desktop, mobile & VR devices
Stars: ✭ 344 (+1620%)
Mutual labels:  vr, webvr, aframe
Aframe Vimeo Component
Stream Vimeo videos into WebVR.
Stars: ✭ 62 (+210%)
Mutual labels:  vr, webvr, aframe
3dio Js
JavaScript toolkit for interior apps
Stars: ✭ 255 (+1175%)
Mutual labels:  vr, webvr, aframe
Aframe Particle System Component
Particle systems for A-Frame.
Stars: ✭ 156 (+680%)
Mutual labels:  vr, webvr, aframe
a-blast
💥 Save the World From the Cutest Creatures in the Universe!
Stars: ✭ 116 (+480%)
Mutual labels:  vr, webvr, aframe
aframe-xylayout
Flexbox like 2D layout + UI components for A-Frame.
Stars: ✭ 23 (+15%)
Mutual labels:  vr, webvr, aframe
virtual-reality-tour
📍 Virtual reality travel in Google Street View.
Stars: ✭ 34 (+70%)
Mutual labels:  vr, aframe
belajar-aframe
Belajar A-Frame (WebVR) - Virtual Reality on the Web
Stars: ✭ 14 (-30%)
Mutual labels:  vr, webvr

Pacman WebVR

Pacman VR experience using web framework A-Frame

Live Demo

https://shaqian.github.io/pacman/

demo

Run the App

Install Dependencies

npm install

Preparation

To make player move in the direction of the camera, we need to do a little hack with aframe-extras.

Go to node_modules/aframe-extras/src/pathfinding/nav-agent.js. Make two changes:

  1. Near line 5-6
  schema: {
    destination: {type: 'vec3'},
    active: {default: false},
    speed: {default: 2},
    lookAtTarget: {default: true} // add this line
  },
  1. Near line 83-84
      if (data.lookAtTarget) // add this line
        el.object3D.lookAt(gazeTarget);

Build for development

npm start

Build for production

npm run build

Caveat

Device rotation works on iOS devices but may not work on some Android devices because of issues with Chrome.

In non-VR mode you can still swipe screen to move the player.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].