螢火蟲

讓網頁充滿漫天飛舞的小小螢火。ヾ(◍'౪`◍)ﾉﾞ

大家有沒有看過螢火蟲海呢？

我原本也想說不過就是會亮亮的小蟲蟲，應該沒什麼吧？(´・ω・`)

直到自己親臨現場，才感受到彷彿沐浴在銀河中的那種浪漫。

照片感受不到現場的感覺，推薦大家可以去個一次看看。( ´ ▽ ` )ﾉ

微涼的夜風與飛舞營火交織成銀河一般的流光密語。

在一個又一個失眠的夜裡，呢喃。

技術關鍵字

名稱	描述
Babylon.js	3D 引擎
粒子系統	產生大量小物件的系統，常用於模擬煙霧、火焰、雨雪等效果
Post-processing	增強渲染效果，例如：鏡頭模糊、顏色分割等等
Noise	比 Math.random 更自然隨機效果，常用於地形、雲朵、材質等

使用範例

基本用法

設定基本參數。

顏色

最大數量: 5000

發射頻率: 100

重新產生

0

<template>
  <div class="w-full flex flex-col gap-4 py-2">
    <div class="flex flex-col gap-2 border p-4">
      <div class="flex gap-6">
        <div class="flex flex-col">
          <label class="text-sm font-bold">
            {{ t('color') }}
          </label>

          <input
            v-model="color1"
            type="color"
          >

          <input
            v-model="color2"
            type="color"
          >
        </div>

        <base-input
          v-model.number="quantity"
          type="range"
          :label="`${t('maxQuantity')}: ${quantity}`"
          class="flex-1"
          :min="100"
          :step="1"
          :max="10000"
        />

        <base-input
          v-model.number="emitRate"
          type="range"
          :label="`${t('emitRate')}: ${emitRate}`"
          class="flex-1"
          :min="100"
          :step="1"
          :max="5000"
        />
      </div>

      <div
        class="w-full cursor-pointer select-none border rounded px-4 py-2 text-center"
        @click="refresh()"
      >
        {{ t('regenerate') }}
      </div>
    </div>

    <bg-firefly
      :key="key"
      v-slot="{ fps }"
      class="bg h-full w-full"
      :color="[color1, color2]"
      :capacity="quantity"
      :emit-rate="emitRate"
    >
      <div class="absolute left-0 top-0 p-4 text-white">
        {{ fps }}
      </div>
    </bg-firefly>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import BaseInput from '../../base-input.vue'
import BgFirefly from '../bg-firefly.vue'

const { t } = useI18n()

const color1 = ref('#22f534')
const color2 = ref('#b3ff00')
const quantity = ref(5000)
const emitRate = ref(100)

const key = ref('')
function refresh() {
  key.value = Math.random().toFixed(5)
}
</script>

<style scoped lang="sass">
.bg
  background: linear-gradient(to top, #102b19, #191f1b)
</style>

查看程式碼收合程式碼

背景

靜下心，享受夜晚的寧靜。(´,,•ω•,,)

關燈

<template>
  <div class="w-full flex flex-col gap-4 py-2">
    <base-checkbox
      v-model="enable"
      :label="t('toggleLight')"
      class="example-ctrl"
    />

    <bg-firefly
      v-if="enable"
      class="left-0 top-0 z-50 h-full w-full !fixed"
      color="#3cff00"
    />
  </div>
</template>

<script setup lang="ts">
import { onUnmounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useSiteDark } from '../../../composables/use-site-dark'
import BaseCheckbox from '../../base-checkbox.vue'
import BgFirefly from '../bg-firefly.vue'

const { t } = useI18n()

const enable = ref(false)

const isDark = useSiteDark()

const oriValue = isDark.value

watch(enable, (value) => {
  isDark.value = value
})

onUnmounted(() => {
  isDark.value = oriValue
})
</script>

查看程式碼收合程式碼

原理

使用 Babylon.js 粒子系統，性能超棒棒。( •̀ ω •́ )✧

原始碼

元件原始碼bg-firefly/範例原始碼bg-firefly/examples/

API

Props

type Size = number | Record<'max' | 'min', number>
type CanvasSize = Record<'width' | 'height', number>
/** string 請使用包含 # 之 HEX 格式 */
type Color = Record<'r' | 'g' | 'b', number> | string

interface Props {
  /** 粒子容量。同時存活的最大粒子數量 */
  capacity?: number;
  /** 每一幀最大發射數量 */
  emitRate?: number;
  /** 如果設定兩種顏色，則會隨機取兩色之間的顏色 */
  color?: Color | [Color, Color];
  /** 可以依 canvas 尺寸設定粒子尺寸 */
  size?: Size | ((canvasSize: CanvasSize) => Size);
}