Skip to content

NikolaySuslov/aframe-croquet-component

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

A-Frame multi-user Croquet component

The component allows easily, while staying in A-Frame scene definition (plain HTML file), to add a multi-user features onto A-Frame entities in scene. Create Croquet (aka Croquet V) simulations on A-Frame entities.
A-Frame multi-user component works by synchronizing / replicating entities and their components to connected peers using Croquet application architecture. It relies on public Croquet reflectors, which are avaliable online on the Internet.

source code

Demo video

Live basic project at Glitch: https://glitch.com/~aframe-croquet-component

Getting Started

How to share an entity in an A-Frame scene with other users:

Add links to this component and croquet lib in the html header

<script src="https://unpkg.com/@croquet/croquet"></script>
<script src="https://unpkg.com/aframe-croquet-component/public/lib/aframe-croquet-component.js"></script>

Add croquet component to the root element.

<a-scene croquet>

By default the session name and password will be generated by Croquet app. Random key will be added in the url automatically, like:
http://localhost:8080/?q=11e4rpm5ot#Lro7M5pHq7b4V_c7kkhezA. Then, this link should be shared between users.

Optionally, you could specify a fixed session name and password manually:

<a-scene croquet="sessionName: test; password: test">

Give an id to the entity (if not exist) and finally add multiuser component

 <a-box id="box1" position="-1.5 1 -3" rotation="0 45 0" color="#4CC3D9" multiuser></a-box>

Open the same scene in several Web Browsers windows. The entity should be synced!

How to try out the synchronization:

Open Web Browser Developer Tools and select an entity with multiuser component

let box = document.querySelector('a-scene').querySelector('#box1')

Change entity attributes like, position, rotation, geometry or material etc., by replicating the entity properties

box.setAttribute('position', {x:0, y: 1, z: -4});
box.setAttribute('rotation', {x:0, y: 45, z: 0});
box.setAttribute('material', {color: '#4BAC41'});
box.setAttribute('geometry', {width: 3});

Start a Croquet application attached to an entity, by replicating a computation (animation example)

box.setAttribute('multiuser', {anim: true});

Also you could try to attach to scene the A-Frame scene Inspector by pressing <ctrl> + <alt> + i. Modify entity properties within it's GUI and observe how some of the properties replicates on other peers.

Basic Scene Example

source code

<html>
<head>
  <title>A-Frame & Croquet</title>
  <script src="https://unpkg.com/@croquet/croquet"></script>
  <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-croquet-component/public/lib/aframe-croquet-component.js"></script>
</head>
<body>
  <a-scene croquet>
    <a-box id="box1" position="-1.5 1 -3" rotation="0 45 0" color="#4CC3D9" multiuser="anim: true"></a-box>
    <a-sphere id="sphere1" position="0 1.25 -5" radius="1.25" color="#EF2D5E" multiuser></a-sphere>
    <a-cylinder id="cylinder1" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane id="plane1" position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" multiuser></a-plane>
    <a-sky color="#ECECEC"></a-sky>
  </a-scene>
</body>
</html>

About

A-Frame multi-user Croquet component

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published