Have ideas to improve npm?Join in the discussion! »

    particle-wave

    1.0.6 • Public • Published

    particle-wave

    npm package

    示例

    demo展示

    particle-wave

    用法

    # 安装依赖 
    yarn add particle-wave
    # or 
    npm i particle-wave -S

    使用

    /* 示例样式 */
    #particle-wave {
      width: 1024px;
      height: 512px;
      background-color: #1E1D46;
    }
    <!-- 示例html -->
    <div id="particle-wave"></div>
    /**
     * 示例javascript
     */
    import ParticleWave from 'particle-wave'
     
    // 小圆点尺寸
    const pointSize = 4
     
    const pw = new ParticleWave(document.getElementById('particle-wave'), {
      uniforms: {
        size: { type: 'float', value: pointSize },
        field: { type: 'vec3', value: [0, 0, 0] },
        speed: { type: 'float', value: 7 }
      },
      onResize(w, h, dpi) {
        const position = []
        const color = []
        const width = 400 * (/ h)
        const depth = 500
        const height = 7
        const distance = 9
        for (let x = 0; x < width; x += distance) {
          for (let z = 0; z < depth; z += distance) {
            position.push(-width / 2 + x, -30, -depth / 2 + z)
            color.push(0, 1 - (/ width) * 1, 0.5 + x / width * 0.5, z / depth)
          }
        }
        this.uniforms.field = [width, height, depth]
        this.buffers.position = position
        this.buffers.color = color
        this.uniforms.size = (/ 400) * pointSize * dpi
      }
    })
     
    document.getElementById('clear').onclick = function () {
      console.log('ParticleWave will clear', pw)
      pw.clear()
    }

    Install

    npm i particle-wave

    DownloadsWeekly Downloads

    49

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    13.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar