particle-wave v1.1.3

particle-wave

示例

demo展示

用法

# 安装依赖
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 (w / 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 - (x / width) 1, 0.5 + x / width 0.5, z / depth) } } if (this.uniforms) { this.uniforms.field = width, height, depth this.uniforms.size = (h / 400) pointSize * dpi } if (this.buffers) { this.buffers.position = position this.buffers.color = color } } })

document.getElementById('clear').onclick = function () { console.log('ParticleWave will clear', pw) pw.clear() }