空間懸浮輪播 carousel

所有圖片會漂浮在空間中！ヾ(◍'౪`◍)ﾉﾞ

技術關鍵字

名稱	描述
Babylon.js	3D 引擎
WebGPU	現代網頁圖形 API，WebGL 繼任者
Post-processing	增強渲染效果，例如：鏡頭模糊、顏色分割等等
JS 動畫	基於 JavaScript 實現的動畫，達成更複雜、精準的動畫控制，常見套件有 GSAP、anime.js 等
Anime.js	輕量級 JavaScript 動畫函式庫

使用範例

基本用法

所有圖片會分布在空間中，切換圖片時，鏡頭會移動至目標圖片前方。

查看範例原始碼

vue

<template>
  <div class="w-full flex flex-col gap-4">
    <carousel-space-floating
      ref="carouselRef"
      class="h-full example-wrap"
      :images="images"
      fps-visible
    />

    <div class="flex gap-4">
      <base-btn
        :label="t('prev')"
        class="flex-1"
        @click="prev()"
      />
      <base-btn
        :label="t('next')"
        class="flex-1"
        @click="next()"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import BaseBtn from '../../base-btn.vue'
import CarouselSpaceFloating from '../carousel-space-floating.vue'

type Images = InstanceType<typeof CarouselSpaceFloating>['images']

const images: Images = [
  '/low/painting-codfish-bakery.webp',
  '/low/painting-codfish-rain.webp',
  '/low/photography-fireworks.webp',
  '/low/photography-morning-light-of-rice.webp',
  '/low/photography-big-stupid-bird.webp',
  '/low/photography-ears-of-rice.webp',
  '/low/photography-gaomei-windmill.webp',
  '/low/photography-spider-at-night.webp',
  '/low/photography-street-cat.webp',
]

const carouselRef = ref<InstanceType<typeof CarouselSpaceFloating>>()

function next() {
  carouselRef.value?.next()
}

function prev() {
  carouselRef.value?.prev()
}

const { t } = useI18n()
</script>

調整姿態

可以微調每張圖片的姿態，包含偏移、旋轉和縮放。

配合文字，製作獨特的輪播吧。( ´ ▽ ` )ﾉ

查看範例原始碼

vue

<template>
  <div class="frame w-full flex flex-col gap-4">
    <carousel-space-floating
      ref="carouselRef"
      class="h-full example-wrap bg-[#e5e5d9]"
      :images="images"
      :fog-end="10"
      :init-index="0"
    >
      <div class="font-wenkai relative h-full w-full tracking-widest">
        <transition-group name="scale-in">
          <div
            v-if="isTarget('painting-codfish-bakery')"
            class="absolute right-0 top-0 h-full w-1/3 flex-center"
          >
            <div class="text text-xs md:text-xl">
              {{ t('greedyCodfish') }}
            </div>
          </div>

          <div
            v-if="isTarget('painting-codfish-rain')"
            class="absolute bottom-2 right-3"
          >
            <div class="p-3 text-right text-xs text-white leading-6 md:text-sm">
              {{ t('rainLine1') }}<br>{{ t('rainLine2') }}
            </div>
          </div>

          <div
            v-if="isTarget('photography-fireworks')"
            class="absolute left-0 top-0 h-full w-2/5 flex-center"
          >
            <div class="text text-center text-xs md:text-base">
              {{ t('fireworksLine1') }}
              <br><br>
              {{ t('fireworksLine2') }}
              <br><br>
              {{ t('fireworksLine3') }}
            </div>
          </div>

          <div
            v-if="isTarget('photography-big-stupid-bird')"
            class="absolute right-0 top-0 h-full w-1/3 flex-center"
          >
            <div class="text text-center md:text-xl">
              {{ t('birdLine1') }}<br>{{ t('birdLine2') }}<br>{{ t('birdLine3') }}
            </div>
          </div>

          <div
            v-if="isTarget('photography-gaomei-windmill')"
            class="absolute bottom-1 right-1"
          >
            <div class="text !px-4 md:text-xl">
              {{ t('gaomeiWetland') }}
            </div>
          </div>

          <div
            v-if="isTarget('photography-spider-at-night')"
            class="absolute left-0 top-0 h-full w-2/5 flex-center"
          >
            <div class="text-center text-xs text-white md:text-base md:leading-10">
              {{ t('spiderLine1') }}
              <br>
              {{ t('spiderLine2') }}
              <br><br>
              {{ t('spiderLine3') }}
              <br>
              {{ t('spiderLine4') }}
            </div>
          </div>

          <div
            v-if="isTarget('photography-street-cat')"
            class="absolute left-0 top-0 h-full w-1/2 flex-center"
          >
            <div class="text-center text-xs text-white leading-7 md:text-base">
              {{ t('catLine1') }}
              <br>
              {{ t('catLine2') }}
            </div>
          </div>
        </transition-group>
      </div>
    </carousel-space-floating>

    <div class="flex gap-4">
      <base-btn
        :label="t('prev')"
        class="flex-1"
        @click="prev()"
      />
      <base-btn
        :label="t('next')"
        class="flex-1"
        @click="next()"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ExtractComponentProps } from '../../../types/utils.type'
import { Vector2, Vector3 } from '@babylonjs/core'
import { addProp, map } from 'remeda'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

import BaseBtn from '../../base-btn.vue'
import CarouselSpaceFloating from '../carousel-space-floating.vue'

type CarouselProp = ExtractComponentProps<typeof CarouselSpaceFloating>

const duration = 4000

const images: CarouselProp['images'] = map(
  [
    {
      src: '/low/painting-codfish-bakery.webp',
      offset: new Vector2(0.5, 0),
      scale: 1.4,
      rotation: new Vector3(0, -0.08, 0),
    },
    {
      src: '/low/painting-codfish-rain.webp',
      scale: 1.6,
      rotation: new Vector3(-0.05, 0, 0),
    },
    {
      src: '/low/photography-fireworks.webp',
      offset: new Vector2(-0.7, 0),
      scale: 1.5,
    },
    {
      src: '/low/photography-gaomei-windmill.webp',
      scale: 2,
    },
    {
      src: '/low/photography-big-stupid-bird.webp',
      offset: new Vector2(0.5, 0),
      scale: 2,
      rotation: new Vector3(0, -0.7, 0),
    },
    {
      src: '/low/photography-spider-at-night.webp',
      scale: 2.26,
    },
    {
      src: '/low/photography-street-cat.webp',
      scale: 2,
    },
  ],
  addProp('duration', duration),
)

const carouselRef = ref<InstanceType<typeof CarouselSpaceFloating>>()

function isTarget(name: string) {
  const target = carouselRef.value?.stableTarget
  if (!target)
    return

  if (typeof target === 'string') {
    return target.includes(name)
  }

  return target.src.includes(name)
}

function next() {
  carouselRef.value?.next()
}

function prev() {
  carouselRef.value?.prev()
}

const { t } = useI18n()
</script>

<style scoped lang="sass">
.frame
  aspect-ratio: 1.78

.font-wenkai
  color: #222
  text-shadow: 0 0 10px rgba(#111, 0.2)

.text
  padding: 0.25rem
  background: rgba(white, 0.8)
  backdrop-filter: blur(2px)

.scale-in-enter-active, .scale-in-leave-active
  transition-duration: 0.4s
.scale-in-enter-from, .scale-in-leave-to
  transform: scale(0.98) !important
  opacity: 0 !important
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202

原理

使用 babylon 建立 3D 場景，將所有圖片放置在空間中，再依目標圖片的位置移動鏡頭至其前方。

原始碼

元件

、範例

API

Props

interface Props {
  initIndex?: number;
  images?: Array<ImageInfo | string>;
  fpsVisible?: boolean;

  /** 背景色。無限遠處的顏色 */
  clearColor?: Color4;
  /** 霧化色。足夠遠處的照片會被此顏色籠罩 */
  fogColor?: Color3;
  /** 霧化終點距離。此距離以後的物體表面會完全不可見 */
  fogEnd?: number;
}

Methods

defineExpose({
  /** 目標 index */
  targetIndex,
  /** 鏡頭穩定時，注視的目標。還沒穩定時為 undefined */
  stableTarget,
  /** 下一張圖片 */
  next,
  /** 上一張圖片 */
  prev,
})

Slots

defineSlots<{
  default?: (data: {
    targetIndex: number;
    isSwitching: boolean;
    stableTarget?: ImageInfo | string;
  }) => unknown;
}>()

空間懸浮輪播 carousel ​

技術關鍵字 ​

使用範例 ​

基本用法 ​

調整姿態 ​

原理 ​

原始碼 ​

API ​

Props ​

Methods ​

Slots ​