Skip to content

Instantly share code, notes, and snippets.

View ngokevin's full-sized avatar
⚒️

Kevin Ngo ngokevin

⚒️
1.4k followers · 6 following
View GitHub Profile
@ngokevin
ngokevin / bookmarklet
Created September 30, 2016 22:35
A-Frame/three.js 360-degree Screenshot Bookmarklet
javascript:(function(){var script=document.createElement('script');script.src='https://rawgit.com/AdaRoseEdwards/f6b96e4ea44c0201bc72879da62e633a/raw/9074d13fdbc540a0b4b578009c2fac79711359ba/equirectangular.js';document.body.appendChild(script);})();
@ngokevin
ngokevin / gist:719ed8d2a475e23694ef8725cce563a9
Created January 31, 2017 12:56
A-Frame Text Editor Plugin Spec
// 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 / kframe-utils.js
Created September 4, 2017 09:45
Useful A-Frame utilities.
/**
* 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);
@ngokevin
ngokevin / gist:803e68351f70139da51fda48d3b484e3
Created October 25, 2017 07:51
Example of keyboard bindings for A-Frame/VR development.
/**
* 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 / serviceworker.js
Last active March 12, 2023 09:52
Service Worker Template - cache-else-network + network-else-cache
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 / recenter.js
Created April 27, 2018 22:24
/**
* 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 / gist:e10ae7741919e7795c27ff5318876e70
Created September 14, 2018 23:40
uv scrolling
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;
@ngokevin
ngokevin / gist:fc3e3a6be9d06b377cddb20bab1766ec
Created September 14, 2018 23:42
fade shader
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));
}
@ngokevin
ngokevin / utils.js
Created February 17, 2019 12:33
A-Frame Helper Utils
/**
* 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');
@ngokevin
ngokevin / render-order.js
Created February 28, 2019 20:37
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++) {