每條游來游去的小魚，都是正在瀏覽這一頁的訪客，有一條是你自己 ( ´ ▽ ` )ﾉ 覺得干擾閱讀的話，可以把小魚關掉。
櫻吹雪
bg大家有看過新海誠的經典作品《秒速 5 公分》嗎？
聽說最近要重返大銀幕啦，有興趣的話推薦大家一起來胃痛一下。ᕕ( ﾟ ∀。)ᕗ（大誤
電影的場景真的很美，櫻花飄落的畫面真的如詩如畫。
配上山崎將義的《One more time, One more chance》，氣氛真的很到位，惆悵感滿滿。
分享一篇我覺得寫得很好的觀後感，內含據透，請自行斟酌。
現在讓我們在網頁上感受一下櫻花飄落的浪漫吧。(´,,•ω•,,)
| 名稱 | 描述 |
|---|---|
| Babylon.js | 3D 引擎 |
| ThinInstance | 輕量級實例化，用於高效渲染大量相同幾何體，減少 draw call |
| Post-processing | 增強渲染效果，例如：鏡頭模糊、顏色分割等等 |
| Dynamic Texture | 可動態修改的材質，常用於即時產生圖案或文字 |
設定基本參數。
重新產生
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"> <base-input v-model.number="quantity" type="range" :label="`${t('quantity')}: ${quantity}`" class="flex-1" :min="100" :step="1" :max="10000" /> </div>
<div class="w-full cursor-pointer select-none border rounded px-4 py-2 text-center" @click="refresh()" > {{ t('regenerate') }} </div> </div>
<bg-sakura-fubuki v-slot="{ fps }" :key="key" :capacity="quantity" :particle-size="{ width: 1.05, height: 1.5 }" class="bg h-full w-full" > <div class="absolute left-0 top-0 p-4 opacity-40"> {{ fps }} </div> </bg-sakura-fubuki> </div></template>
<script setup lang="ts">import { ref } from 'vue'import { useI18n } from 'vue-i18n'import BaseInput from '../../base-input.vue'import BgSakuraFubuki from '../bg-sakura-fubuki.vue'
const { t } = useI18n()
const quantity = ref(500)
const key = ref('')function refresh() { key.value = Math.random().toFixed(5)}</script>
<style scoped lang="sass">.text-layer background: linear-gradient(20deg, light-dark(#def4ff, #1a2a3a), light-dark(#FFF, #222))</style><template> <div class="w-full flex flex-col gap-4 py-2"> <base-checkbox v-model="enable" :label="t('enable')" class="example-ctrl" />
<transition name="opacity"> <bg-sakura-fubuki class="left-0 top-0 z-50 h-lvh w-full duration-500 !fixed" :class="classes" /> </transition> </div></template>
<script setup lang="ts">import { computed, ref } from 'vue'import { useI18n } from 'vue-i18n'import BaseCheckbox from '../../base-checkbox.vue'import BgSakuraFubuki from '../bg-sakura-fubuki.vue'
const { t } = useI18n()
const enable = ref(false)
const classes = computed(() => ({ 'opacity-0': !enable.value, 'opacity-100': enable.value,}))</script>使用 babylon.js 產生實體粒子，才有辦法產生鏡頭特效。(≖‿ゝ≖)✧
interface Props { /** 粒子貼圖 */ particleSrc?: string; /** 粒子尺寸 */ particleSize?: Record<'width' | 'height', number>; /** 粒子容量 */ capacity?: number; /** 粒子移動速度。 * - 正 x：往左 * - 正 y：往上 * - 正 z：射出螢幕方向 */ velocity?: Record<'x' | 'y' | 'z', number>;}