Learning WebVR with Croquet and A-Frame
Try it Out!
Click on "Show" and pick "In a new Window" or "Next to the Code". Either way a new session will be created for you to play around.
If you open it in a new window you'll see "?q=YOUR_UNIQUE_NAME" is automatically added to the end of the url (e.g. https://croquet-hello-webvr.glitch.me/?q=abc123). You can invite others to your session by sharing the url. You can also set the name to whatever you want, e.g. "?q=croquetisawesome.
On desktop you can move around using the WASD keys and mouse. On mobile you can look around by rotating the device, and move around by using the joystick that appears on the bottom right (courtesy of aframe-joystick).
You can open up the A-FRAME Inspector on desktop by pressing <ctrl> + <alt> + i.
There you can add/modify/remove entities, as well as move around the scene.
Note: you cannot move/rotate entities that have physics enabled. You must disable physics first.
In the browser console you can also add/modify/remove entities by manually creating entities, e.g.
// grab the AFRAME scene
const scene = AFRAME.scenes[0];
// create an A-FRAME box
const myBox = document.createElement("a-box");
// set attributes (color, position, rotation, scale, etc)
myBox.setAttribute("color", "green");
myBox.setAttribute("position", "3 1 0");
// add the "croquet" attribute so it'll be added to the session
myBox.setAttribute("croquet", "");
// you can even add a "name: myName" to the attribute value if you want to give it a unique name (an entity cannot exist in the model with the same name).
// Otherwise a random name will be generated
myBox.setAttribute("croquet", "name: myBox");
// add our box to the scene
scene.appendChild(myEntity);You can also open the browser console and check out the logged events to see what's going on under the hood.
How it Works
Loading Libraries
index.html loads the A-FRAME SDK, the Croquet SDK, CANNON.js SDK, and a-frame joystick
Constants
/script/constants.js contains a bunch of constants that Croquet uses for the session (physics engine config, flags to determine which events should be logged to the console, etc). Croquet provides a global (Croquet Constants Docs).
Joystick
/script/joystick.js checks if the page was loaded from a mobile device, and if so it'll add a virtual joystick that allows the user to move around. (On mobile you're limited to just looking around using the device's orientation). Courtesy of aframe-joystick.
System/Component
/script/system.js
/script/component.js
Session Start
/script.index.js
Waiting to Join
/script.View.js
Create User Entities
/script.View.js
/script.Model.js
/script.UserModel.js
/script.UserView.js
Create Entities
/script.View.js
/script.Model.js
/script.EntityModel.js
/script.EntityView.js
Modify Entities
/script.EntityView.js
/script.EntityModel.js
Forking and Remixing
Glitch
Click on "croquet-hello-webvr" at the top right and select Remix Project to create a new Glitch Project that copies this project. You can modify this remix however you wish.
GitHub
You can also click "Tools" on the bottom left, select "import and export", and select "Export to GitHub".
WARNING! Make sure to change the appId key in /script/system.js on line 17!
This is to make sure users using your application don't accidentally join users on this version if they use the same name!
Toggling Event Logging
In /script/constants.js you can can modify Q.LOGGING to change which events are logged in the console.
This will determine whether those models/views will use this.log defined in each module