Skip to main content

使用 Nebula 创建宇宙星空

效果​

Nebula是一个轻量级（1kb压缩）JavaScript库，可以创建漂亮的宇宙动画。

包括可配置的恒星，星云，彗星，行星和太阳。Nebula带有一个vanilla JS和一个React包装器。

安装​

npm install @flodlc/nebula

使用​

Vanilla JS​

import { createNebula } from "@flodlc/nebula";

<div id="nebula-element"></div>

const element = document.getElementById("nebula-element");

const nebula = createNebula(element, {
    starsCount: 250,
    starsRotationSpeed: 3,
    nebulasIntensity: 8,
    ...
});
// ... if needed:
nebula.destroy()

React.js​

import { ReactNebula } from "@flodlc/nebula";

export default App = () => {
   return (
       <>
           // With default config
           <ReactNebula/>

           // With custom config
           <ReactNebula config={{
               starsCount: 250,
               starsRotationSpeed: 3,
               nebulasIntensity: 8,
               ...
           }}/>
       </>
   );
}

配置​

在 config 里面书写配置。

配置项作用类型默认值注意
starsCount星星数量number350Recommended: < 1000
starsColor星星颜色string#ffffff
starsRotationSpeed星星旋转速度number3
cometFrequence彗星出现的频率number150 disables the comets
nebulasIntensity星云强度number10
sunScale太阳是否存在number10 hides the Sun
planetsScale行星是否存在number10 hides the planets
solarSystemOrbite太阳系轨道number65Recommended: < 100
solarSystemSpeedOrbit轨道速度number100