Space.js

[![NPM Package][npm]][npm-url]
[![NPM Downloads][npm-downloads]][npmtrends-url]
[![DeepScan][deepscan]][deepscan-url]
[![Discord][discord]][discord-url]

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.

$3

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.

``sh
npm i @alienkitty/space.js
`

Math classes:

`js
import { Color, Vector2 } from '@alienkitty/space.js';
`

UI and Panel components:

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

Tween animation engine:

`js
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:

`js
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:

`js
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.

`sh
npm i three @alienkitty/space.js
`

`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;
});
`

$3

#### ui

logo (interface)
ui (hud)
components (ui)
progress (canvas)
progress (svg)
progress indeterminate (svg)
close (svg)
tween (svg)
magnetic (component, svg)
details
info (details)
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)

$3

Clone this repository and run the examples:

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

$3

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

$3

#### v1.0

* [x] Initial release based on the UI components from Multiuser Blocks

#### v1.1

* [x] Three.js material UI
* [x] Three.js light UI
* [x] Three.js UI keyboard support

#### v1.2

* [x] Three.js UI multiple select
* [x] Export About example UI components

#### v1.3

* [ ] Change camera perspective
* [ ] Material texture thumbnails
* [ ] Material texture drag and drop

#### v1.4

* [ ] Move objects
* [ ] GLTF drag and drop
* [ ] Load/save scene

#### v1.5

* [ ] MIDI support

#### v1.6

* [ ] WebXR version

#### v1.7

* [ ] OGL version
* [ ] Documentation

$3

* Tween
* Changelog

$3

* Alien.js
* Three.js
* OGL

[npm]: https://img.shields.io/npm/v/@alienkitty/space.js
[npm-url]: https://www.npmjs.com/package/@alienkitty/space.js
[npm-downloads]: https://img.shields.io/npm/dw/@alienkitty/space.js
[npmtrends-url]: https://www.npmtrends.com/@alienkitty/space.js
[deepscan]: https://deepscan.io/api/teams/20020/projects/23997/branches/734568/badge/grade.svg
[deepscan-url]: https://deepscan.io/dashboard#view=project&tid=20020&pid=23997&bid=734568
[discord]: https://img.shields.io/discord/773739853913260032
[discord-url]: https://discord.gg/9rSkAzB7PM