Space.js

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.

Usage

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

The main entry point without any dependencies is for the UI components, loaders and utilities.

npm i @alienkitty/space.js

import { ... } from '@alienkitty/space.js';

For example the UI and Panel components:

import { Panel, PanelItem, UI } from '@alienkitty/space.js';

Tween animation engine:

import { ticker, tween } from '@alienkitty/space.js';

ticker.start();

const data = {
    radius: 0
};

tween(data, { radius: 24, spring: 1.2, damping: 0.4 }, 1000, 'easeOutElastic', null, () => {
    console.log(data.radius);
});

Web Audio engine:

import { BufferLoader, WebAudio } from '@alienkitty/space.js';

const bufferLoader = new BufferLoader();
await bufferLoader.loadAllAsync(['assets/sounds/gong.mp3']);
WebAudio.init({ sampleRate: 48000 });
WebAudio.load(bufferLoader.files);

const gong = WebAudio.get('gong');
gong.gain.set(0.5);

document.addEventListener('pointerdown', () => {
    gong.play();
});

Audio stream support:

import { WebAudio } from '@alienkitty/space.js';

WebAudio.init({ sampleRate: 48000 });

// Shoutcast streams append a semicolon (;) to the URL
WebAudio.load({ protonradio: 'https://shoutcast.protonradio.com/;' });

const protonradio = WebAudio.get('protonradio');
protonradio.gain.set(1);

document.addEventListener('pointerdown', () => {
    protonradio.play();
});

And the @alienkitty/space.js/three entry point for three.js UI components, loaders and utilities.

npm i three @alienkitty/space.js

import { EnvironmentTextureLoader } from '@alienkitty/space.js/three';

// ...
const environmentLoader = new EnvironmentTextureLoader(renderer);
environmentLoader.load('assets/textures/env/jewelry_black_contrast.jpg', texture => {
    scene.environment = texture;
});

Examples

ui

logo (interface)
progress (canvas)
progress (svg)
progress indeterminate (svg)
close (svg)
tween (svg)
magnetic (component, svg)
styles
fps
fps panel
panel (standalone)
ufo (2d scene, smooth scroll with skew effect)

3d

materials
materials instancing (debug)
materials instancing (custom, debug)
lights

audio

gong
stream
rhythm

thread

canvas (noise)

Getting started

Clone this repository and run the examples:

git clone https://github.com/alienkitty/space.js
cd space.js
npx servez

ESLint

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

Roadmap

v1.0

Initial release based on the UI components from Multiuser Blocks

v1.1

Three.js material UI
Three.js light UI
Three.js UI keyboard support

v1.2

Three.js UI multiple select
Material texture drag and drop
Material texture thumbnails

v1.3

GLTF drag and drop
Load/save scene

v1.4

Move objects
Change camera perspective

v1.5

OGL version
Documentation

v1.6

WebXR version

xjindf / space.js