Skip to content

Commit

Permalink
Update documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
Unknown committed Mar 21, 2024
0 parents commit c0a981d
Show file tree
Hide file tree
Showing 22 changed files with 602 additions and 0 deletions.
62 changes: 62 additions & 0 deletions 3dof/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fern A-Frame Components | 3DoF</title>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script type='text/javascript' src='https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js?ver=6.3.1' id='aframe-event-js'></script>
<script src="/js/3dof.umd.min.js"></script>
<script>
// System to ensure any tracked controls uses the viewer references space
AFRAME.registerSystem('relative-to-head', {
init: function() {
this.referenceSpace = null;
this.sceneEl.addEventListener('enter-vr', async e => {
this.referenceSpace = await this.el.sceneEl.xrSession.requestReferenceSpace('viewer');
if(!this.sceneEl.is('vr-mode')) {
this.referenceSpace = null;
}
});
this.sceneEl.addEventListener('exit-vr', e => {
this.referenceSpace = null;
});

AFRAME.components['tracked-controls-webxr'].Component.prototype.tick = function() {
const sceneEl = this.el.sceneEl;
const controller = this.controller;
const frame = sceneEl.frame;
if(!controller || !sceneEl.frame || !sceneEl.systems['relative-to-head'].referenceSpace) { return; }
if(!controller.hand) {
this.pose = frame.getPose(controller[this.data.space], sceneEl.systems['relative-to-head'].referenceSpace);
this.updatePose();
this.updateButtons();
}
};
}
})
</script>
</head>
<body>
<a-scene 3dof="position: 0 1.6 0; stereo: true">
<a-sky color="#ECECEC"></a-sky>

<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

<a-box position="-1 0.5 3" rotation="0 45 0" color="#4CC3D9"></a-box>

<!-- Camera rig -->
<a-entity id="rig">
<a-camera id="camera">
<a-cursor event-set__mouseenter="_event: mouseenter; color: red" event-set__mouseleave="_event: mouseleave; color: black" raycaster="objects: a-box"></a-cursor>

<!-- Hands -->
<a-entity hand-controls="hand: left"></a-entity>
<a-entity hand-controls="hand: right"></a-entity>
</a-camera>

</a-entity>
</a-scene>
<a href="https://github.com/mrxz/fern-aframe-components/" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a> </body>
</html>
1 change: 1 addition & 0 deletions CNAME
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
aframe-components.fern.solutions
23 changes: 23 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Fern A-Frame Components Collection
[![github](https://flat.badgen.net/badge/icon/github?icon=github&label)](https://github.com/mrxz/fern-aframe-components/)
[![twitter](https://flat.badgen.net/badge/twitter/@noerihuisman/blue?icon=twitter&label)](https://twitter.com/noerihuisman)
[![mastodon](https://flat.badgen.net/badge/mastodon/@[email protected]/blue?icon=mastodon&label)](https://arvr.social/@noerihuisman)

This is a collection of A-Frame components. Check the individual components for their usages and corresponding examples.

* [Mirror `<a-mirror>`](./mirror): Mirror component and primitive for high-quality mirrors
* [Highlight `highlight`](./highlight): Render a highlight for objects when they are occluded
* [Screen Fade `screen-fade`](./screen-fade): Allows fade transitions in both desktop and VR mode
* [Sky Background `<a-sky-background>`](./sky-background): Primitive for efficiently rendering a sky in the background
* [Effekseer `effekseer`](./effekseer/): Component for integrating [Effekseer](https://effekseer.github.io/en/) effects into A-Frame projects
* [Extra Stats `extra-stats`](./extra-stats): Replacement for the `stats` component that shows additional stats
* [Fix Fog](./fix-fog): Changes fog depth from camera space to world space, [fixing fog in VR](https://fern.solutions/dev-logs/aframe-adventures-02/)
* [HUD `<a-hud>` and `<a-hud-element>`](./hud): HUD components for debugging purposes
* [3DoF `3dof`](./3dof): Monoscopic or stereoscopic 3DoF rendering

### A-Frame Locomotion
If you're looking for components for locomotion, be sure to check out [aframe-locomotion](https://github.com/mrxz/aframe-locomotion).

I hope you find these components useful. If you have any suggestions, questions or ideas, feel free to reach out to me.

<a href='https://ko-fi.com/fernsolutions' target='_blank'><img height='35' style='border:0px;height:46px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
87 changes: 87 additions & 0 deletions effekseer/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fern A-Frame Components | Effekseer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrxz/effekseer-sample-effects/effekseer-build/effekseer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@zip.js/zip.js/dist/zip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dat.gui/build/dat.gui.min.js"></script>
<script src="/js/aframe-effekseer.umd.min.js"></script>
<script>
AFRAME.registerComponent('effect-switcher', {
schema: {
effectEl: { type: 'selector', default: '#effect-container' },
effectList: { type: 'asset', default: '#effect-list' }
},
init: function() {
const effectList = THREE.Cache.get(this.data.effectList);
const gui = new dat.GUI({name: "A-Frame Effekseer", });
let effekseerComponent = this.data.effectEl.children[0].components.effekseer;
const state = {
effect: 'tktk02/Sword1.efkpkg',
scale: 0.5,
target: new THREE.Vector3(3, 1.5, -10),
paused: false,
reset: () => {
effekseerComponent.stopEffect();
effekseerComponent.playEffect();
}
}
gui.add(state, "effect", effectList.effects)
.listen().onChange((effectFile) => {
const effectEntity = document.createElement('a-entity');
effectEntity.setAttribute('effekseer', {
src: `https://cdn.jsdelivr.net/gh/mrxz/effekseer-sample-effects/effects/${effectFile}`,
loop: true
});
this.data.effectEl.append(effectEntity);
effectEntity.addEventListener('loaded', e => {
effekseerComponent = effectEntity.components.effekseer;
effekseerComponent.setTargetLocation(state.target);
state.paused = false;
this.data.effectEl.children[0].remove();
});
});
const transformGui = gui.addFolder("Transform");
transformGui.open();
transformGui.add(state, "scale", 0, 1).name("Scale")
.listen().onChange((scale) => {
this.data.effectEl.object3D.scale.set(scale, scale, scale);
});
transformGui.add(state.target, "x").name("Target X")
.listen().onChange(_ => effekseerComponent.setTargetLocation(state.target));
transformGui.add(state.target, "y").name("Target Y")
.listen().onChange(_ => effekseerComponent.setTargetLocation(state.target));
transformGui.add(state.target, "z").name("Target Z")
.listen().onChange(_ => effekseerComponent.setTargetLocation(state.target));
const actionGui = gui.addFolder("Actions");
actionGui.open();
actionGui.add(state, "paused").name("Paused").listen().onChange(pause => {
if(pause) {
effekseerComponent.pauseEffect();
} else {
effekseerComponent.resumeEffect();
}
});
actionGui.add(state, "reset").name("Reset");
}
})
</script>
</head>
<body>
<a-scene effekseer="wasmPath: https://cdn.jsdelivr.net/gh/mrxz/effekseer-sample-effects/effekseer-build/effekseer.wasm" background="color: black" effect-switcher>
<a-assets>
<a-asset-item id="start-effect" src="https://cdn.jsdelivr.net/gh/mrxz/effekseer-sample-effects/effects/tktk02/Sword1.efkpkg" response-type="arraybuffer"></a-asset-item>
<a-asset-item id="effect-list" src="https://cdn.jsdelivr.net/gh/mrxz/effekseer-sample-effects/effects/index.json" response-type="json"></a-asset-item>
</a-assets>

<a-entity id="effect-container" position="0 1.5 -10" scale="0.5 0.5 0.5">
<a-entity effekseer="src: #start-effect; dynamic: true"></a-entity>
</a-entity>
</a-scene>

<a href="https://github.com/mrxz/fern-aframe-components/" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a> </body>
</html>
48 changes: 48 additions & 0 deletions extra-stats/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fern A-Frame Components | Extra Stats</title>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="/js/extra-stats.umd.min.js"></script>
<script>
// Dummy component that simulates a component allocating some Three.js classes each frame
AFRAME.registerComponent('allocate-three-classes', {
tick: function(t, dt) {
// Allocate two Vector3 instances per frame
new THREE.Vector3(1, 2, 3);
new THREE.Vector3(1, 2, 3);

// Allocate one Matrix4 per frame
new THREE.Matrix4();

// Allocate random amount of Color instances per frame
for(let i = 0; i < Math.random() * 20; i++) {
new THREE.Color();
}
}
})
</script>
</head>
<body>
<a-scene extra-stats>
<a-sky color="#ECECEC"></a-sky>

<!-- Object that needlessly allocates THREE objects -->
<a-entity allocate-three-classes></a-entity>

<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

<!-- Camera rig -->
<a-entity id="rig">
<a-camera id="camera"></a-camera>

<!-- Hands -->
<a-entity hand-controls="hand: left"></a-entity>
<a-entity hand-controls="hand: right"></a-entity>
</a-entity>
</a-scene>
<a href="https://github.com/mrxz/fern-aframe-components/" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style> </body>
</html>
Loading

0 comments on commit c0a981d

Please sign in to comment.