Skip to content

Instantly share code, notes, and snippets.

🅰️
A-Frame and Supermedium

Kevin Ngo ngokevin

🅰️
A-Frame and Supermedium
Block or report user

Report or block ngokevin

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View render-order.js
AFRAME.registerSystem('render-order', {
schema: {type: 'array'},
init: function () {
this.el.renderer.sortObjects = true;
},
update: function () {
this.order = {};
for (i = 0; i < this.data.length; i++) {
@ngokevin
ngokevin / utils.js
Created Feb 17, 2019
A-Frame Helper Utils
View utils.js
/**
* Helper to visualize lines.
*/
console.line = (function () {
var els = {};
return function (vec1, vec2, name, color) {
name = name || 'default';
color = color || '#FFF';
if (!els[name]) {
els[name] = document.createElement('a-entity');
View gist:fc3e3a6be9d06b377cddb20bab1766ec
void main() {
float alpha = 1.0 - smoothstep(2.25, 3.75, length(vWorldPosition.xz));
vec4 tex = texture2D(src, vUv) * vec4(color, 1.0);
gl_FragColor = vec4(tex.xyz, min(1.0, tex.w * alpha * opacity));
}
View gist:e10ae7741919e7795c27ff5318876e70
this.originalUvs = JSON.parse(JSON.stringify(this.geometry.faceVertexUvs[0]));
this.uvs = this.geometry.faceVertexUvs[0];
this.uvs.forEach(face => {
indices.forEach(i => {
let uv = face[i];
uv.y += 0.00075;
if (uv.y > 1) {
needsReset = true;
View recenter.js
/**
* Pivot the scene when user enters VR to face a target.
*/
AFRAME.registerComponent('recenter', {
schema: {
target: {default: ''}
},
init: function () {
var sceneEl = this.el.sceneEl;
@ngokevin
ngokevin / serviceworker.js
Last active Jun 3, 2019
Service Worker Template - cache-else-network + network-else-cache
View serviceworker.js
var VERSION = 'v1';
var cacheFirstFiles = [
// ADDME: Add paths and URLs to pull from cache first if it has been loaded before. Else fetch from network.
// If loading from cache, fetch from network in the background to update the resource. Examples:
// 'assets/img/logo.png',
// 'assets/models/controller.gltf',
];
@ngokevin
ngokevin / gist:803e68351f70139da51fda48d3b484e3
Created Oct 25, 2017
Example of keyboard bindings for A-Frame/VR development.
View gist:803e68351f70139da51fda48d3b484e3
/**
* Keyboard bindings to control controller and create actions via events.
* Position controllers in front of camera.
* <a-scene debug-controller> ?debug in URL to toggle on.
*/
AFRAME.registerComponent('debug-controller', {
schema: {
enabled: {default: false}
},
@ngokevin
ngokevin / kframe-utils.js
Created Sep 4, 2017
Useful A-Frame utilities.
View kframe-utils.js
/**
* Helper to visualize lines.
*/
window.drawLine = (function () {
var els = {};
return function (name, vec1, vec2, color) {
if (!els[name]) {
els[name] = document.createElement('a-entity');
els[name].setAttribute('line', 'color', color || '#FFF');
els[name].setAttribute('id', name);
View gist:719ed8d2a475e23694ef8725cce563a9
// If you're interested in developing text editor or IDE plugins for A-Frame, here are the A-Frame specific pieces.
1. Syntax highlighting of A-Frame's ECS syntax, which is the same as inline CSS styles.
2. Support autocompletion of component names. This includes core components like geometry, material, obj-model, light, position, rotation, scale. These can be programatically populated from `AFRAME.components`. But, we can also include community components from the Registry (e.g., physics, particle systems, mountains, animations). We can populate from these JSON files https://github.com/aframevr/aframe-registry/blob/master/build/0.4.0.json based on the A-Frame version. If a community component is selected, then inject the script tag into the <head>.
3. Support for autocompletion of component property names. Typing `material="` would expose a dropdown component properties color, roughness, src, envMap, displacementMap, etc. See https://aframe.io/docs/0.4.0/components/material.html#properties-1 for all the m
@ngokevin
ngokevin / bookmarklet
Created Sep 30, 2016
A-Frame/three.js 360-degree Screenshot Bookmarklet
View bookmarklet
javascript:(function(){var script=document.createElement('script');script.src='https://rawgit.com/AdaRoseEdwards/f6b96e4ea44c0201bc72879da62e633a/raw/9074d13fdbc540a0b4b578009c2fac79711359ba/equirectangular.js';document.body.appendChild(script);})();
You can’t perform that action at this time.