该库由两个同类库组成，Space.js 用于用户界面、面板组件、Tween、网络音频、加载器和实用程序，Alien.js 用于 3D 实用程序、材质、着色器和物理。

使用方法

Space.js 根据使用情况分为两个入口。

没有任何依赖关系的主入口用于用户界面组件、加载器和实用程序。

npm i @alienkitty/space.js

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

例如用户界面和面板组件：

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

Tween 动画引擎

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

网络音频引擎

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

音频流支持

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

而 @alienkitty/space.js/three 则是 three.js UI 组件、加载器和实用程序的入口点。

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

链接: https://fly63.com/nav/4129