1
<script setup lang="ts">
2
  import { useWave } from '.'
3

4
  const { init } = useWave()
5

6
  onMounted(() => {
7
    init(document.querySelector('#wave-container'))
8
  })
9
</script>
10

11
<template>
12
  <div id="wave-container" class="h-1/3 w-full"></div>
13
</template>
14

15
<style lang="scss" scoped></style>

1
import * as THREE from 'three'
2

3
export function useWave() {
4
  const scene: THREE.Scene = new THREE.Scene()
5
  const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer({
6
    antialias: true,
7
    alpha: true,
8
  })
9
  let camera: THREE.PerspectiveCamera
10

11
  const GAP = 100
12
  const AMOUNT_X = 50
13
  const AMOUNT_Y = 50
14

15
  let count = 0
16
  let particles: THREE.Points
17

18
  function init(container: HTMLDivElement | null) {
19
    // 如果container为空，抛出错误
20
    if (!container) {
21
      throw new Error('no container')
22
    }
23

24
    // 创建一个透视相机，参数为视角、宽高比、近裁剪面、远裁剪面
25
    camera = new THREE.PerspectiveCamera(
26
      60,
27
      container.clientWidth / container.clientHeight,
28
      0.1,
29
      10000,
30
    )
31
    // 设置渲染器的大小
32
    renderer.setSize(container.clientWidth, container.clientHeight)
33
    // 将渲染器的dom元素添加到container中
34
    container.appendChild(renderer.domElement)
35

36
    // 设置相机的位置
37
    camera.position.z = 1000
38
    camera.position.y = 500
39
    camera.scale.set(0.5, 1, 1)
40

41
    // 计算粒子数量
42
    const particlesCount = AMOUNT_X * AMOUNT_Y
43

44
    const positions = new Float32Array(particlesCount * 3)
45
    const scales = new Float32Array(particlesCount)
46

47
    let i = 0
48
    let j = 0
49

50
    // 循环计算每个粒子的位置和大小
51
    for (let ix = 0; ix < AMOUNT_X; ix++) {
52
      for (let iy = 0; iy < AMOUNT_Y; iy++) {
53
        positions[i] = ix * GAP - (AMOUNT_X * GAP) / 2 // x
54
        positions[i + 1] = 0 // y
55
        positions[i + 2] = iy * GAP - (AMOUNT_Y * GAP) / 2 // z
56

57
        scales[j] = 1
58

59
        i += 3
60
        j++
61
      }
62
    }
63

64
    // 创建一个缓冲几何体，并设置位置和大小属性
65
    const geometry = new THREE.BufferGeometry()
66
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
67
    geometry.setAttribute('scale', new THREE.BufferAttribute(scales, 1))
68

69
    // 创建一个着色器材质，并设置顶点着色器和片元着色器
70
    const material = new THREE.ShaderMaterial({
71
      uniforms: {
72
        color: { value: new THREE.Color(0x4096ff) },
73
      },
74
      vertexShader: `
75
        attribute float scale;
76

77
        void main() {
78
          vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
79
          gl_PointSize = scale * ( 300.0 / - mvPosition.z );
80
          gl_Position = projectionMatrix * mvPosition;
81
        }
82
      `,
83
      fragmentShader: `
84
        uniform vec3 color;
85

86
        void main() {
87
          if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;
88
          gl_FragColor = vec4( color, 1.0 );
89
        }
90
      `,
91
    })
92

93
    // 创建一个点云，并添加到场景中
94
    particles = new THREE.Points(geometry, material)
95
    scene.add(particles)
96

97
    // 设置渲染器的大小和像素比例，并设置动画循环
98
    renderer.setSize(container.clientWidth, container.clientHeight)
99
    renderer.setPixelRatio(window.devicePixelRatio)
100
    renderer.setAnimationLoop(render)
101

102
    // 将渲染器的dom元素添加到container中，并添加窗口大小改变事件监听器
103
    container.appendChild(renderer.domElement)
104
    window.addEventListener('resize', () => onWindowResize(container))
105
  }
106

107
  // 渲染函数
108
  function render() {
109
    // 将相机对准场景的位置
110
    camera.lookAt(scene.position)
111
    // 获取粒子的位置和缩放属性数组
112
    const positions = particles.geometry.attributes.position.array
113
    const scales = particles.geometry.attributes.scale.array
114
    // 初始化索引
115
    let i = 0
116
    let j = 0
117
    // 遍历粒子的位置和缩放属性数组
118
    for (let ix = 0; ix < AMOUNT_X; ix++) {
119
      for (let iy = 0; iy < AMOUNT_Y; iy++) {
120
        // 计算粒子的位置
121
        positions[i + 1] =
122
          Math.sin((ix + count) * 0.3) * 120 +
123
          Math.sin((iy + count) * 0.5) * 120
124
        // 计算粒子的缩放
125
        scales[j] =
126
          (Math.sin((ix + count) * 0.3) + 1) * 5 +
127
          (Math.sin((iy + count) * 0.5) + 1) * 5
128
        // 更新索引
129
        i += 3
130
        j++
131
      }
132
    }
133
    // 通知位置和缩放属性数组已经更新
134
    particles.geometry.attributes.position.needsUpdate = true
135
    particles.geometry.attributes.scale.needsUpdate = true
136
    // 渲染场景
137
    renderer.render(scene, camera)
138
    // 更新计数器
139
    count += 0.05
140
  }
141

142
  function onWindowResize(container: HTMLDivElement) {
143
    camera.aspect = container.clientWidth / container.clientHeight
144
    camera.updateProjectionMatrix()
145
    renderer.setSize(container.clientWidth, container.clientHeight)
146
  }
147

148
  return {
149
    init,
150
  }
151
}