Future web pattern
Alien.js is a design pattern for building single-page applications with ES modules and three.js.
The idea is to keep it simple, with minimal abstraction, and to build websites more like a framework, which is why rollup.js is used instead for bundling.
In its design, everything is an ES module, all user interfaces and components follow the same class structure, making it easy to copy-paste from examples and between projects.
Note this design pattern intentionally does not use underscores or private fields, in favour of cleaner code.
logo (interface)
progress (canvas)
progress (svg)
progress indeterminate (svg)
close (svg)
magnetic (component, svg)
tilt
ufo (2d scene, smooth scroll with skew effect)
ripple
physics
audio
audio (fast)
spherical cube
cubemap uv
spherical cube uv
penrose triangle
polyhedron (orbit camera, debug)
cubecamera (orbit camera, debug)
cubecamera rainbow (orbit camera, debug)
camera wobble
camera shake
abstract cube
abstract cube (SSS, debug)
noise
fxaa
blur (Gaussian blur)
blur (Poisson disc blur)
blur (Bokeh blur)
bloom
bloom (Unreal bloom)
bloom (Unreal bloom with dither)
matcap
pbr
soft particles
dof (fake with Bokeh blur, debug)
chromatic aberration
film grain
reflection (with fast Gaussian blur)
reflection (standard physically based material)
reflection (object)
reflection (DuDv)
flowmap
flowmap (RGB shift)
flowmap (view)
depth (fragment depth with dither)
hologram
text (MSDF text)
subsurface scattering (SSS, debug)
baked cube
baked cube (DuDv)
baked cube (SSS, debug)
baked abstract cube
baked abstract cube (DuDv)
baked abstract cube (SSS, debug)
baked spherical cube
baked spherical cube (DuDv)
baked spherical cube (SSS, debug)
alienkitty (2d scene, flowmap with RGB shift, MSDF text)
canvas (noise)
physics
audio
audio (fast)
camera shake
pbr (texture loader thread)
cubemap uv (buffer geometry loader thread)
import { Events } from '../config/Events.js';
import { Interface } from '../utils/Interface.js';
import { Stage } from '../controllers/Stage.js';
class Logo extends Interface {
constructor() {
super('.logo');
this.initHTML();
this.addListeners();
this.onResize();
}
initHTML() {
this.css({
left: 50,
top: 50,
width: 64,
height: 64,
cursor: 'pointer',
opacity: 0
});
this.image = new Interface(null, 'img');
this.image.attr({ src: 'assets/images/alienkitty.svg' });
this.image.css({
position: 'relative',
width: '100%'
});
this.add(this.image);
}
addListeners() {
Stage.events.on(Events.RESIZE, this.onResize);
this.element.addEventListener('mouseenter', this.onHover);
this.element.addEventListener('mouseleave', this.onHover);
this.element.addEventListener('click', this.onClick);
}
removeListeners() {
Stage.events.off(Events.RESIZE, this.onResize);
this.element.removeEventListener('mouseenter', this.onHover);
this.element.removeEventListener('mouseleave', this.onHover);
this.element.removeEventListener('click', this.onClick);
}
/**
* Event handlers
*/
onResize = () => {
if (Stage.width < Stage.height) {
this.css({
left: 30,
top: 30,
width: 40,
height: 40
});
} else {
this.css({
left: 50,
top: 50,
width: 64,
height: 64
});
}
};
onHover = ({ type }) => {
this.clearTween();
if (type === 'mouseenter') {
this.tween({ opacity: 0.6 }, 300, 'easeOutCubic');
} else {
this.tween({ opacity: 1 }, 300, 'easeOutCubic');
}
};
onClick = () => {
// open('https://alien.js.org/');
Stage.setPath('/');
};
/**
* Public methods
*/
animateIn = () => {
this.tween({ opacity: 1 }, 600, 'easeInOutSine');
};
destroy = () => {
this.removeListeners();
return super.destroy();
};
}
Clone this repository template and install its dependencies:
git clone https://github.com/pschroen/alien.js
cd alien.js
npm i
# or
npx degit pschroen/alien.js my-app
cd my-app
npm i
# Serve at localhost:8080
npm run dev
# Build for production
npm run build
Uncomment all the lines in App.js
, and download the uil ES module:
npm i
mkdir src/lib
curl -L https://raw.githubusercontent.com/lo-th/uil/gh-pages/build/uil.module.js --output src/lib/uil.module.js
npm run dev
UIL is loaded dynamically and not part of the main bundle.
localhost:8080/ (without uil)
localhost:8080/?ui (with uil)
localhost:8080/?ui&orbit (with uil and orbit controls)
localhost:8080/?orbit (just orbit controls)
npm i
cd examples
npm i
npm run build
npm start
npm i -D eslint eslint-plugin-html @babel/eslint-parser
npx eslint src
npx eslint examples/*.html
npx eslint examples/about/src