今天主要做了兩件事：

1. 把首頁的背景換成會動的 poly 波紋，畫面不會再單調。
2. 把呼吸球的材質跟燈光調整，讓球體更有立體感(但還是有點失敗...)。

背景實作

用 Vanta.js實作：

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import * as THREE from 'three'
import WAVES from 'vanta/dist/vanta.waves.min'

const bgEl = ref(null)
let vanta: any = null

onMounted(() => {
  vanta = WAVES({
    el: bgEl.value,
    THREE,
    color: 0x1749a6,
    shininess: 60,
    waveHeight: 18.0,
    waveSpeed: 1.0,
    zoom: 0.85,
  })
})
onUnmounted(() => vanta?.destroy())
</script>

<template>
  <div ref="bgEl" class="absolute inset-0 -z-10"></div>
</template>

首頁就這樣包一層 ，前景內容再疊上去。

呼吸球優化

const sphereMat = new THREE.MeshPhysicalMaterial({
  color: new THREE.Color(0x6ea8ff),
  roughness: 0.2,
  metalness: 0.4,
  clearcoat: 1.0,
  emissive: new THREE.Color(0x0f2238),
  emissiveIntensity: 0.25
})

材質改成金屬感，降低粗糙度(還要調整...)

今日的畫面如下