This library is part of two sibling libraries, Space.js for UI, Panel components, Tween, Web Audio, loaders, utilities, and Alien.js for 3D utilities, materials, shaders and physics.

Alien.js is divided into two entry points depending on your use case.

The @alienkitty/alien.js/three entry point for three.js custom utilities and materials.

npm i three @alienkitty/alien.js

import { Vector3 } from 'three';
import { Wobble } from '@alienkitty/alien.js/three';

const position = new Vector3();
const wobble = new Wobble(position);
wobble.scale = 100;

function animate(time) {
    requestAnimationFrame(animate);

    console.log(position);
    wobble.update(time * 0.001 * 0.5); // seconds * 0.5
}

requestAnimationFrame(animate);

And the @alienkitty/alien.js/three/oimophysics entry point for OimoPhysics custom utilities.

npm i three saharan/OimoPhysics#v1.2.3 @alienkitty/alien.js

import { OimoPhysics } from '@alienkitty/alien.js/three/oimophysics';

const physics = new OimoPhysics();
console.log(physics.world.getGravity());

page
canvas (mask)
shader (mask)
shader (fade with RGB shift)
scene
scene (page direction and camera parallax)
scroll (debug)
scroll (scroll direction and camera parallax, debug)
scroll (scroll direction and camera zoom, debug)
scroll (smooth scroll, debug)
scroll (smooth scroll with skew effect, debug)
scroll (smooth scroll with scroll direction and camera parallax, debug)
camera (with motion blur and tilt shift effect, debug)

ripple
cubemap uv
spherical cube uv
penrose triangle
abstract cube
polyhedron (orbit camera, debug)
crystal gltf (orbit camera, debug, orbit controls)
cubecamera (orbit camera, debug)
cubecamera rainbow (orbit camera, debug)
camera wobble
panel tracking (debug)
panel tracking crystals (debug)
crystals (orbit controls)
dark crystals (orbit controls)

noise
fxaa
smaa
blur (Gaussian blur)
blur (Poisson disc blur)
blur (Bokeh blur)
bloom
bloom (Unreal bloom)
bloom (Unreal bloom with dither)
bloom (Unreal bloom with HDR)
matcap
pbr
soft particles
tilt shift (with Gaussian blur)
dof (fake with Bokeh blur, debug)
chromatic aberration
film grain
reflection (with fast Gaussian blur)
reflection diffuse (physically based material)
reflection metalness (physically based material)
reflection normalmap (physically based material)
reflection dudv (DuDv)
flowmap
flowmap (RGB shift)
flowmap (view)
depth (fragment depth with dither)
fresnel (with looping noise)
hologram
subsurface scattering (SSS)
volumetric light (god rays)
anamorphic light (fast anamorphic lens flares)
lensflare
lensflare (with anamorphic light)
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)
soft shadows
text (MSDF text)
afterimage
alienkitty (2d scene, flowmap with RGB shift, MSDF text)

instancing (SSS, debug)
instancing (physics thread, SSS, debug)
picking (contact audio, SSS, debug)
picking (physics thread, contact audio, SSS, debug)

picking (with fast 3d audio, debug)

pbr (texture loader thread)
cubemap uv (buffer geometry loader thread)
instancing (physics thread)
picking (physics thread)
multiuser blocks (websocket thread, glitch)

json (glitch)
binary (glitch)
multiuser fluid (binary, glitch)
multiuser blocks (binary, glitch)

wobble
oimophysics

Clone this repository and install its dependencies:

git clone https://github.com/alienkitty/alien.js
cd alien.js
npm i three saharan/OimoPhysics#v1.2.3
cd examples
npm i
npm run build
npm start

npm i -D eslint eslint-plugin-html
npx eslint src
npx eslint examples/about/src
npx eslint examples/three/*.html
npx eslint examples/three/transitions

• The Wiki
• Tween
• Changelog

• Space.js
• Three.js
• Post Processing
• OGL