Skip to content
WebGL粒子波浪效果
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
dist
lib
screenshot
src
.babelrc
.editorconfig
.gitattributes
.gitignore
.npmignore
LICENSE
README.md
package.json
yarn.lock

README.md

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

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)
      }
    }
    this.uniforms.field = [width, height, depth]
    this.buffers.position = position
    this.buffers.color = color
    this.uniforms.size = (h / 400) * pointSize * dpi
  }
})
You can’t perform that action at this time.