空間懸浮輪播 carousel

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

使用範例

基本用法

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

查看範例原始碼

vue

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

    <div class="flex gap-4">
      <base-btn
        label="上一個"
        class="flex-1"
        @click="prev()"
      />
      <base-btn
        label="下一個"
        class="flex-1"
        @click="next()"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
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()
}
</script>

調整姿態

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

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

查看範例原始碼

vue

<template>
  <div class="frame w-full flex flex-col gap-4">
    <carousel-space-floating
      ref="carouselRef"
      class="h-full border border-gray-300 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">
              貪吃的鱈魚
            </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">
              陌生的冷雨捎來遠方氣漩的涼意<br>又是個美麗的雨天
            </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">
              繁星想念夜空的擁抱
              <br><br>
              人們想念炫麗的煙花
              <br><br>
              我只想念妳臉龐的餘光
            </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">
              看<br>啥<br>？
            </div>
          </div>

          <div
            v-if="isTarget('photography-gaomei-windmill')"
            class="absolute bottom-1 right-1"
          >
            <div class="text !px-4 md:text-xl">
              高美濕地
            </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">
              在無月的夜
              <br>
              悄悄等待
              <br><br>
              燈火闌珊
              <br>
              晚餐依舊沒來
            </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">
              欲言又止
              <br>
              肚子餓了？
            </div>
          </div>
        </transition-group>
      </div>
    </carousel-space-floating>

    <div class="flex gap-4">
      <base-btn
        label="上一個"
        class="flex-1"
        @click="prev()"
      />
      <base-btn
        label="下一個"
        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 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()
}
</script>

<style scoped lang="sass">
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+Mono+TC&family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap')

.frame
  aspect-ratio: 1.78

.font-wenkai
  font-family: "LXGW WenKai Mono TC", monospace
  font-weight: 400
  font-style: normal
  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
203
204

原理

使用 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 ​