Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rchovatiya88/chessvr
Open Source WebXR game using aframe.io Full Code available on this Github Page.
https://github.com/rchovatiya88/chessvr
aframe javascript-game webvr webxr-template
Last synced: 2 months ago
JSON representation
Open Source WebXR game using aframe.io Full Code available on this Github Page.
- Host: GitHub
- URL: https://github.com/rchovatiya88/chessvr
- Owner: rchovatiya88
- Created: 2020-11-09T18:46:28.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-02-21T18:48:46.000Z (almost 4 years ago)
- Last Synced: 2023-03-05T23:39:04.863Z (almost 2 years ago)
- Topics: aframe, javascript-game, webvr, webxr-template
- Language: JavaScript
- Homepage:
- Size: 196 KB
- Stars: 5
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Setting up Multiplayer WebXR Chess Game
Open Source WebXR game using aframe.io (webVR framework) Full Code available on Github Page.
Live [Demo](https://chessvr.glitch.me/) - https://chessvr.glitch.me/
#### Pre-Requisties
- Web Browser (Chrome)
- Set up Glitch Account - www.glitch.com
### How it Works
- Add 3D models in GLTF or glb format in the asset folder. Also, you can add any Images, videos, materials in asset folder for reference (Check File Size limit)
- Inside `/public` folder `index.html` is where all the code will go and `/js` folder for all javascript functions / components.
## Goal
Let's define our goal for the project and scene. In order visualize our concept, some of following assets we need
- Environment
- 3D Models of Chess
- Controllers
### Creating a Scene
Similar to normal Web HTML Pages. We have
- `` tag (To import all our dependencies)
- `` tag(All entities and assets)
### Step 1
- Let's set up our floor / ground
In a-frame, we can define a ``
For example we can follow the docs from a-frame [Getting Started](https://aframe.io/docs/1.1.0/introduction/)
```js
```
Watch [Tutorial](https://www.youtube.com/watch?v=ktjMCanKNLk&list=PL8MkBHej75fJD-HveDzm4xKrciC5VfYuV)
- For our project we need a real ground, We decided use a [Ground texture](https://www.textures.com/browse/streets/97701)
```js
Chess VR - Let's play chess in WEBXR
```
### Step 2
- Let's add a open-source `aframe-environment compoment` from [Diego F. Goberna](https://github.com/feiss/aframe-environment-component/) to easily create background scene for us!
We used a `environment="preset forest"` forest envrionement but we can do a bit more to add more customization to match our scene. For example, adding and removing different aspects of the scene
```js
```
[View docs for more info](https://github.com/feiss/aframe-environment-component/)
_A Tip to easily change parameters_
- Use [A-frame Inspector](https://github.com/aframevr/aframe-inspector) Please `ctrl+alt+i` on a scene and it will open an inspector, then on the right side change the parameter. Copy the changes and paste it to your html.
### Step 3
- Let's add 3d Objects, we can use models our custom assets or use [Sketchfab](https://sketchfab.com/feed)
We have a bench and our chess board, For WebVR we need `.gltf` or `.glb`file
Similar to the code from [aframe docs](https://aframe.io/docs/1.1.0/primitives/a-gltf-model.html#sidebar)
```js
```
- By using the `Aframe inspector` we position each chess pieces into proper spaces
### Step 4
- Adding Quest Controllers to move and Teleport in our scene
We import `aframe-teleport-controls` by Fernando Serrano [Github link](https://github.com/fernandojsg/aframe-teleport-controls)
Inside the `` tag we simply copy and past this cdn script
```
```
**WARNING**
`The implementation for quest controllers doesn't quite work from the github page.`
Luckily [Takashi Yoshinaga](https://github.com/TakashiYoshinaga) create a great implementation and showed how to implement in his demo - `https://quest-demo.glitch.me`
Using Takashi implementation, since we already imported the `aframe-teleport` we add cameraRig entity
```
```
And we need to add EventListener script
```
AFRAME.registerComponent('input-listen', {
init:
function () {
//Declaration and initialization of flag
//which exprains grip button is pressed or not.
//"this.el" reffers ctlR or L in this function
this.el.grip = false;
//Grip Pressed
this.el.addEventListener('gripdown', function (e) {
//Setting grip flag as true.
this.grip = true;
});
//Grip Released
this.el.addEventListener('gripup', function (e) {
//Setting grip flag as false.
this.grip = false;
});
//Raycaster intersected with something.
this.el.addEventListener('raycaster-intersection', function (e) {
//Store first selected object as selectedObj
this.selectedObj = e.detail.els[0];
});
//Raycaster intersection is finished.
this.el.addEventListener('raycaster-intersection-cleared', function (e) {
//Clear information of selectedObj
this.selectedObj = null;
});
//A-buttorn Pressed
this.el.addEventListener('abuttondown', function (e) {
//Start pointing position to teleport
this.emit('teleportstart');
});
this.el.addEventListener('abuttonup', function (e) {
//Jump to pointed position
this.emit('teleportend');
});
//X-buttorn Pressed
this.el.addEventListener('xbuttondown', function (e) {
//Start pointing position to teleport
this.emit('teleportstart');
});
//X-buttorn Released
this.el.addEventListener('xbuttonup', function (e) {
//Jump to pointed position
this.emit('teleportend');
});
//console.log(this);
},
//called evry frame.
tick: function () {
if (!this.el.selectedObj) { return; }
if (!this.el.grip) { return; }
//Getting raycaster component which is attatched to ctlR or L
//this.el means entity of ctlR or L in this function.
var ray = this.el.getAttribute("raycaster").direction;
//setting tip of raycaster as 1.1m forward of controller.
var p = new THREE.Vector3(ray.x, ray.y, ray.z);
p.normalize();
p.multiplyScalar(1.2);
//Convert local position into world coordinate.
this.el.object3D.localToWorld(p);
//Move selected object to follow the tip of raycaster.
this.el.selectedObj.object3D.position.set(p.x, p.y, p.z);
}
});
```
### Adding Hands and phsyics
Since we need to add hands and being able to pick up chess pieces we need `aframe-physics` and `hands` - @[Will Murphy](https://github.com/wmurphyrd) to the rescue with `aframe-super-hands-component`
Also - Kyle Baker helped us simplify the implementation - > https://github.com/wmurphyrd/aframe-super-hands-component/issues/188
Per Kyle instruction
- Import the components in head
```
```
- Then add Script
```
AFRAME.registerComponent("phase-shift", {
init: function() {
var el = this.el;
el.addEventListener("gripdown", function() {
el.setAttribute("collision-filter", { collisionForces: true });
});
el.addEventListener("gripup", function() {
el.setAttribute("collision-filter", { collisionForces: false });
});
}
});
```
- Add Mixin inside your `` tag
```
```
- Now we need to tell our models to get mixins
```
```
- Lastly we need to mixin, hands and script to the CameraRig
```
```
# TODO
- Adding `aframe-physics` to interact with chess pieces
- Multiplayer