feat(for): for
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
@@ -1,225 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted,computed,watch,toRef } from 'vue'
|
||||
// import { tableData2 as tableData } from './data'
|
||||
import { rgba } from '@/utils/color'
|
||||
|
||||
import {filterData} from '@/utils'
|
||||
import * as THREE from 'three'
|
||||
import {
|
||||
CSS3DRenderer, CSS3DObject
|
||||
} from 'three/examples/jsm/renderers/CSS3DRenderer.js';
|
||||
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
|
||||
import TWEEN from 'three/examples/jsm/libs/tween.module.js';
|
||||
import useStore from '@/store'
|
||||
|
||||
const props=defineProps({
|
||||
luckyPersonList:{
|
||||
type:Array as ()=>Array<any>,
|
||||
default:()=>{[]}
|
||||
}
|
||||
})
|
||||
|
||||
// const emits=defineEmits()=
|
||||
|
||||
const globalConfig = useStore().globalConfig
|
||||
|
||||
const { getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = globalConfig
|
||||
const tableData = computed(()=>{
|
||||
console.log('pppppprops:',props.luckyPersonList)
|
||||
const cloneData=toRef(props.luckyPersonList)
|
||||
|
||||
console.log(props.luckyPersonList,cloneData.value)
|
||||
const luckyList=filterData(cloneData.value,Math.floor(rowCount/2))
|
||||
console.log('lucskskskskksks:',luckyList)
|
||||
|
||||
return luckyList
|
||||
})
|
||||
|
||||
|
||||
const luckyContainerRef = ref<HTMLElement>()
|
||||
|
||||
const scene = ref()
|
||||
const camera = ref()
|
||||
const renderer = ref()
|
||||
const controls = ref()
|
||||
const objects = ref<any[]>([])
|
||||
|
||||
const targets = {
|
||||
table: <any[]>[],
|
||||
};
|
||||
|
||||
|
||||
const init = () => {
|
||||
const felidView = 40;
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
const aspect = width / height;
|
||||
const nearPlane = 1;
|
||||
const farPlane = 10000;
|
||||
const WebGLoutput = luckyContainerRef.value
|
||||
|
||||
scene.value = new THREE.Scene();
|
||||
camera.value = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
|
||||
camera.value.position.z = 3000;
|
||||
|
||||
renderer.value = new CSS3DRenderer()
|
||||
renderer.value.setSize(width, height)
|
||||
renderer.value.domElement.style.position = 'absolute';
|
||||
WebGLoutput!.appendChild(renderer.value.domElement);
|
||||
|
||||
controls.value = new TrackballControls(camera.value, renderer.value.domElement);
|
||||
controls.value.rotateSpeed = 1;
|
||||
controls.value.staticMoving = true;
|
||||
controls.value.minDistance = 500;
|
||||
controls.value.maxDistance = 6000;
|
||||
controls.value.addEventListener('change', render);
|
||||
|
||||
const tableLen = tableData.value.length
|
||||
for (let i = 0; i < tableLen; i++) {
|
||||
const element = document.createElement('div');
|
||||
element.className = 'lucky-element-card';
|
||||
// element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
|
||||
element.style.backgroundColor = rgba(luckyCardColor, Math.random() * 0.5 + 0.25)
|
||||
element.style.border = `1px solid ${rgba(luckyCardColor, 0.25)}`
|
||||
element.style.boxShadow = `0 0 12px ${rgba(luckyCardColor, 0.5)}`
|
||||
// hover style
|
||||
element.addEventListener('mouseover', function () {
|
||||
this.style.border = `1px solid ${rgba(luckyCardColor, 0.75)}`
|
||||
this.style.boxShadow = `0 0 12px ${rgba(luckyCardColor, 0.75)}`
|
||||
})
|
||||
element.addEventListener('mouseout', function () {
|
||||
this.style.border = `1px solid ${rgba(luckyCardColor, 0.25)}`
|
||||
this.style.boxShadow = `0 0 12px ${rgba(luckyCardColor, 0.5)}`
|
||||
})
|
||||
element.style.width = `${cardSize.width*2}px`;
|
||||
element.style.height = `${cardSize.height*2}px`;
|
||||
|
||||
// element.style.color=localTheme.detail.primary
|
||||
|
||||
const number = document.createElement('div');
|
||||
number.className = 'lucky-card-id';
|
||||
// number.textContent = (i / 5 + 1).toString();
|
||||
number.textContent = tableData.value[i].uid;
|
||||
number.style.fontSize = `${textSize}px`;
|
||||
element.appendChild(number);
|
||||
|
||||
const symbol = document.createElement('div');
|
||||
symbol.className = 'lucky-card-name';
|
||||
symbol.textContent = tableData.value[i].name;
|
||||
symbol.style.textShadow = `0 0 12px ${rgba(luckyCardColor, 0.95)}`
|
||||
symbol.style.fontSize = `${textSize*2}px`;
|
||||
element.appendChild(symbol);
|
||||
|
||||
const detail = document.createElement('div');
|
||||
detail.className = 'lucky-card-detail';
|
||||
detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].other}`;
|
||||
detail.style.fontSize = `${textSize}px`;
|
||||
element.appendChild(detail);
|
||||
|
||||
const object = new CSS3DObject(element);
|
||||
object.position.x = Math.random() * 4000 - 2000;
|
||||
object.position.y = Math.random() * 4000 - 2000;
|
||||
object.position.z = Math.random() * 4000 - 2000;
|
||||
scene.value.add(object);
|
||||
|
||||
objects.value.push(object);
|
||||
}
|
||||
|
||||
createTableVertices();
|
||||
|
||||
function createTableVertices() {
|
||||
const tableLen = tableData.value.length;
|
||||
|
||||
for (let i = 0; i < tableLen; i++) {
|
||||
const object = new THREE.Object3D();
|
||||
|
||||
object.position.x = tableData.value[i].x * (cardSize.width*2 + 40) - rowCount * 90;
|
||||
object.position.y = -tableData.value[i].y * (cardSize.height*2 + 20) + 1000;
|
||||
object.position.z = 0;
|
||||
|
||||
targets.table.push(object);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
transform(targets.table, 2000)
|
||||
render();
|
||||
}
|
||||
|
||||
const transform = (targets: any[], duration: number) => {
|
||||
TWEEN.removeAll();
|
||||
const objLength = objects.value.length;
|
||||
for (let i = 0; i < objLength; ++i) {
|
||||
let object = objects.value[i];
|
||||
let target = targets[i];
|
||||
new TWEEN.Tween(object.position)
|
||||
.to({ x: target.position.x, y: target.position.y, z: target.position.z },
|
||||
Math.random() * duration + duration)
|
||||
.easing(TWEEN.Easing.Exponential.InOut)
|
||||
.start();
|
||||
|
||||
new TWEEN.Tween(object.rotation)
|
||||
.to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
|
||||
.easing(TWEEN.Easing.Exponential.InOut)
|
||||
.start();
|
||||
}
|
||||
|
||||
// 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
|
||||
new TWEEN.Tween({})
|
||||
.to({}, duration * 2)
|
||||
.onUpdate(render)
|
||||
.start();
|
||||
// 整体自动旋转
|
||||
}
|
||||
function onWindowResize() {
|
||||
camera.value.aspect = window.innerWidth / window.innerHeight
|
||||
camera.value.updateProjectionMatrix();
|
||||
|
||||
renderer.value.setSize(window.innerWidth, window.innerHeight);
|
||||
render();
|
||||
}
|
||||
|
||||
/**
|
||||
* [animation update all tween && controls]
|
||||
*/
|
||||
function animation() {
|
||||
TWEEN.update();
|
||||
controls.value.update();
|
||||
// 设置自动旋转
|
||||
// console.log('animation',controls.value.target);
|
||||
// 设置相机位置
|
||||
requestAnimationFrame(animation);
|
||||
}
|
||||
|
||||
|
||||
function render() {
|
||||
renderer.value.render(scene.value, camera.value);
|
||||
}
|
||||
|
||||
const submit=()=>{
|
||||
tableData.value.length=0;
|
||||
}
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
watch(()=>props.luckyPersonList,()=>{
|
||||
luckyContainerRef.value!.style.zIndex='100'
|
||||
init();
|
||||
animation();
|
||||
luckyContainerRef.value!.style.color = `${textColor}`
|
||||
|
||||
console.log('tableData',tableData.value)
|
||||
},{deep:true})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="absolute top-0 w-full h-full bg-gray-400/10 -z-50" ref="luckyContainerRef">
|
||||
<button class="btn glass" @click="submit">确定</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -19,17 +19,6 @@ const getPrizeListHeight = () => {
|
||||
}
|
||||
const prizeShow = ref(structuredClone(isShowPrizeList.value))
|
||||
|
||||
const delAll = () => {
|
||||
prizeConfig.deleteAllPrizeConfig()
|
||||
}
|
||||
|
||||
const resetDefault = () => {
|
||||
prizeConfig.resetDefault()
|
||||
}
|
||||
|
||||
const print = () => {
|
||||
console.log(prizeConfig)
|
||||
}
|
||||
const addTemporaryPrize = () => {
|
||||
console.log('addTemporaryPrize')
|
||||
}
|
||||
@@ -44,23 +33,25 @@ onMounted(() => {
|
||||
<transition name="prize-list" :appear="true">
|
||||
<div v-if="prizeShow" class="flex items-center">
|
||||
<ul class="flex flex-col gap-1 p-2 rounded-xl bg-slate-500/50" ref="prizeListRef">
|
||||
|
||||
<li v-for="item in localPrizeList" :key="item.id"
|
||||
:class="currentPrize.id == item.id ? 'current-prize' : ''">
|
||||
<div
|
||||
class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100">
|
||||
<div v-if="item.isUsed" class="absolute w-full h-full bg-gray-800/90 item-mask z-200 rounded-xl"></div>
|
||||
class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100" v-if="item.isShow">
|
||||
<div v-if="item.isUsed" class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"></div>
|
||||
<figure class="w-10 h-10 rounded-xl">
|
||||
<img :src="item.picture.url" alt="Shoes" class="object-cover h-full rounded-xl" />
|
||||
</figure>
|
||||
<div class="items-center text-center card-body">
|
||||
<h2 class="card-title">{{ item.name }}</h2>
|
||||
<div class="items-center p-0 text-center card-body">
|
||||
<h2 class="p-0 m-0 card-title">{{ item.name }}</h2>
|
||||
<p class="absolute z-40 p-0 m-0 text-gray-300/80 pt-9">{{ item.isUsedCount }}/{{ item.count }}</p>
|
||||
<progress class="w-3/4 h-6 progress progress-primary" :value="item.isUsedCount" :max="item.count"></progress>
|
||||
<!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="tooltip" data-tip="抽奖">
|
||||
<div class="tooltip" data-tip="奖项列表">
|
||||
<div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
|
||||
@click="prizeShow = !prizeShow">
|
||||
<svg-icon name="arrow_left" class="w-full h-full"></svg-icon>
|
||||
@@ -78,7 +69,7 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<transition name="prize-operate" :appear="true">
|
||||
<div class="tooltip" data-tip="抽奖" v-show="!prizeShow">
|
||||
<div class="tooltip" data-tip="奖项列表" v-show="!prizeShow">
|
||||
<div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
|
||||
@click="prizeShow = !prizeShow">
|
||||
<svg-icon name="arrow_right" class="w-full h-full"></svg-icon>
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
// import { tableData2 as tableData } from './data'
|
||||
import { rgba } from '@/utils/color'
|
||||
// import PlayMusic from './PlayMusic.vue'
|
||||
import { ref, onMounted,onUnmounted, watch } from 'vue'
|
||||
import PrizeList from './PrizeList.vue'
|
||||
import { useElementStyle } from '@/hooks/useElement'
|
||||
import { useElementStyle, useElementPosition } from '@/hooks/useElement'
|
||||
import StarsBackground from '@/components/StarsBackground/index.vue'
|
||||
import LuckyView from './LuckyThree.vue'
|
||||
import confetti from 'canvas-confetti'
|
||||
import * as THREE from 'three'
|
||||
import {
|
||||
CSS3DRenderer, CSS3DObject
|
||||
@@ -14,23 +11,26 @@ import {
|
||||
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
|
||||
import TWEEN from 'three/examples/jsm/libs/tween.module.js';
|
||||
import useStore from '@/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useToast } from 'vue-toast-notification';
|
||||
import 'vue-toast-notification/dist/theme-sugar.css';
|
||||
|
||||
|
||||
const toast = useToast();
|
||||
const personConfig = useStore().personConfig
|
||||
const globalConfig = useStore().globalConfig
|
||||
const prizeConfig = useStore().prizeConfig
|
||||
|
||||
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = personConfig
|
||||
const { getCurrentPrize: currentPrize } = prizeConfig
|
||||
const { getCardColor: cardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = globalConfig
|
||||
const tableData = ref(
|
||||
alreadyPersonList.concat(notPersonList)
|
||||
)
|
||||
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
|
||||
const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
|
||||
const {getTopTitle:topTitle, getCardColor: cardColor, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig)
|
||||
const tableData = ref(JSON.parse(JSON.stringify(alreadyPersonList.value)).concat(JSON.parse(JSON.stringify(notPersonList.value))))
|
||||
|
||||
const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
|
||||
const ballRotationY = ref(0)
|
||||
const containerRef = ref<HTMLElement>()
|
||||
// const LuckyViewRef= ref()
|
||||
const canOperate = ref(true)
|
||||
const cameraZ = ref(3000)
|
||||
|
||||
const scene = ref()
|
||||
const camera = ref()
|
||||
@@ -47,6 +47,7 @@ const targets = {
|
||||
|
||||
const luckyTargets = ref<any[]>([])
|
||||
const luckyCardList = ref<any[]>([])
|
||||
const currentPrizeValue=ref(JSON.parse(JSON.stringify(currentPrize.value)))
|
||||
const init = () => {
|
||||
const felidView = 40;
|
||||
const width = window.innerWidth;
|
||||
@@ -58,11 +59,27 @@ const init = () => {
|
||||
|
||||
scene.value = new THREE.Scene();
|
||||
camera.value = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
|
||||
camera.value.position.z = 3000;
|
||||
camera.value.position.z = cameraZ.value
|
||||
// 侦听camera position变化
|
||||
// watch(() => camera.value.position.z, (value) => {
|
||||
// console.log('code line-63 \n\r😍 camara posi:\n\r',value);
|
||||
// console.log('code line-63 \n\r😍 camara rrrr:\n\r',camera.value.rotation);
|
||||
|
||||
// cameraZ.value = value
|
||||
// })
|
||||
// watch(() => camera.value.rotation.z, (value) => {
|
||||
// console.log('code line-68 \n\r😁 camraea rotation:\n\r',value);
|
||||
|
||||
// // cameraZ.value = value
|
||||
// })
|
||||
renderer.value = new CSS3DRenderer()
|
||||
renderer.value.setSize(width, height)
|
||||
renderer.value.setSize(width, height*0.9)
|
||||
renderer.value.domElement.style.position = 'absolute';
|
||||
// 垂直居中
|
||||
renderer.value.domElement.style.paddingTop = '50px'
|
||||
renderer.value.domElement.style.top = '50%';
|
||||
renderer.value.domElement.style.left = '50%';
|
||||
renderer.value.domElement.style.transform = 'translate(-50%, -50%)';
|
||||
WebGLoutput!.appendChild(renderer.value.domElement);
|
||||
|
||||
controls.value = new TrackballControls(camera.value, renderer.value.domElement);
|
||||
@@ -76,25 +93,6 @@ const init = () => {
|
||||
for (let i = 0; i < tableLen; i++) {
|
||||
let element = document.createElement('div');
|
||||
element.className = 'element-card';
|
||||
// element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
|
||||
// element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
|
||||
// element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
|
||||
// element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
|
||||
// element.style.width = `${cardSize.width}px`;
|
||||
// element.style.height = `${cardSize.height}px`;
|
||||
// element.addEventListener('mouseover', function () {
|
||||
// console.log(this)
|
||||
// this.style.border = `1px solid ${rgba(cardColor, 0.75)}`
|
||||
// this.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
|
||||
// })
|
||||
// element.addEventListener('mouseout', function () {
|
||||
// this.style.border = `1px solid ${rgba(cardColor, 0.25)}`
|
||||
// this.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
|
||||
// })
|
||||
// hover style
|
||||
|
||||
|
||||
// element.style.color=localTheme.detail.primary
|
||||
|
||||
const number = document.createElement('div');
|
||||
number.className = 'card-id';
|
||||
@@ -116,7 +114,7 @@ const init = () => {
|
||||
// detail.style.fontSize = `${textSize * 0.5}px`;
|
||||
element.appendChild(detail);
|
||||
|
||||
element = useElementStyle(element, cardColor, cardSize, textSize)
|
||||
element = useElementStyle(element, cardColor.value, cardSize.value, textSize.value)
|
||||
const object = new CSS3DObject(element);
|
||||
object.position.x = Math.random() * 4000 - 2000;
|
||||
object.position.y = Math.random() * 4000 - 2000;
|
||||
@@ -136,8 +134,8 @@ const init = () => {
|
||||
for (let i = 0; i < tableLen; i++) {
|
||||
const object = new THREE.Object3D();
|
||||
|
||||
object.position.x = tableData.value[i].x * (cardSize.width + 40) - rowCount * 90;
|
||||
object.position.y = -tableData.value[i].y * (cardSize.height + 20) + 1000;
|
||||
object.position.x = tableData.value[i].x * (cardSize.value.width + 40) - rowCount.value * 90;
|
||||
object.position.y = -tableData.value[i].y * (cardSize.value.height + 20) + 1000;
|
||||
object.position.z = 0;
|
||||
|
||||
targets.table.push(object);
|
||||
@@ -214,10 +212,12 @@ const transform = (targets: any[], duration: number) => {
|
||||
.onComplete(() => {
|
||||
if (luckyCardList.value.length) {
|
||||
luckyCardList.value.forEach((item: any) => {
|
||||
return useElementStyle(item.element, cardColor, { width: cardSize.width, height: cardSize.height }, textSize)
|
||||
return useElementStyle(item.element, cardColor.value, cardSize.value, textSize.value)
|
||||
})
|
||||
}
|
||||
luckyCardList.value = [];
|
||||
|
||||
canOperate.value = true
|
||||
});
|
||||
}
|
||||
|
||||
@@ -248,11 +248,11 @@ function animation() {
|
||||
requestAnimationFrame(animation);
|
||||
}
|
||||
|
||||
// // 自动旋转的动画
|
||||
function rollBall(rotateY: number, duration: number, mod: 'default' | 'restore' = 'default') {
|
||||
// // 旋转的动画
|
||||
function rollBall(rotateY: number, duration: number) {
|
||||
TWEEN.removeAll();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
return new Promise((resolve) => {
|
||||
scene.value.rotation.y = 0;
|
||||
ballRotationY.value = Math.PI * rotateY * 1000
|
||||
const rotateObj = new TWEEN.Tween(scene.value.rotation);
|
||||
@@ -270,85 +270,240 @@ function rollBall(rotateY: number, duration: number, mod: 'default' | 'restore'
|
||||
.onUpdate(render)
|
||||
.start()
|
||||
.onStop(() => {
|
||||
scene.value.rotation.y = 0;
|
||||
resolve('')
|
||||
})
|
||||
.onComplete(() => {
|
||||
resolve('')
|
||||
canOperate.value = true
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 将视野转回正面
|
||||
function resetCamera() {
|
||||
new TWEEN.Tween(camera.value.position)
|
||||
.to(
|
||||
{
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 3000
|
||||
},
|
||||
1000
|
||||
)
|
||||
.onUpdate(render)
|
||||
.start()
|
||||
.onComplete(() => {
|
||||
new TWEEN.Tween(camera.value.rotation)
|
||||
.to(
|
||||
{
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0
|
||||
},
|
||||
1000
|
||||
)
|
||||
.onUpdate(render)
|
||||
.start()
|
||||
.onComplete(() => {
|
||||
canOperate.value = true // 相机恢复原位
|
||||
// camera.value.lookAt(scene.value.position)
|
||||
camera.value.position.y = 0
|
||||
camera.value.position.x = 0
|
||||
camera.value.position.z = 3000
|
||||
camera.value.rotation.x = 0
|
||||
camera.value.rotation.y = 0
|
||||
camera.value.rotation.z = -0
|
||||
controls.value.reset()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function render() {
|
||||
renderer.value.render(scene.value, camera.value);
|
||||
}
|
||||
const enterLottery = async () => {
|
||||
if (!canOperate.value) {
|
||||
return
|
||||
}
|
||||
canOperate.value = false
|
||||
transform(targets.sphere, 1000)
|
||||
currentStatus.value = 1
|
||||
// setTimeout(() => {
|
||||
// rollBall(0.1,3000)
|
||||
// }, 3000)
|
||||
setTimeout(() => {
|
||||
rollBall(0.1, 2000)
|
||||
}, 2000)
|
||||
}
|
||||
// 开始抽奖
|
||||
const startLottery = () => {
|
||||
if (!canOperate.value) {
|
||||
return
|
||||
}
|
||||
currentStatus.value = 2
|
||||
rollBall(10, 3000)
|
||||
}
|
||||
|
||||
const stopLottery = async () => {
|
||||
if (!canOperate.value) {
|
||||
return
|
||||
}
|
||||
canOperate.value = false
|
||||
TWEEN.removeAll();
|
||||
rollBall(0, 1)
|
||||
// scene正面
|
||||
currentStatus.value = 0
|
||||
// 从notPersonList随机抽取currentPrize.count个
|
||||
const notPersonListLength = notPersonList.length;
|
||||
for (let i = 0; i < currentPrize.count; i++) {
|
||||
const notPersonListLength = notPersonList.value.length;
|
||||
|
||||
// 每次最多抽十个
|
||||
let luckyCount = 10
|
||||
const leftover = currentPrize.value.count - currentPrize.value.isUsedCount
|
||||
leftover < luckyCount ? luckyCount = leftover : luckyCount
|
||||
if (notPersonListLength < luckyCount) {
|
||||
toast.open({
|
||||
message: '抽奖人数不够',
|
||||
type: 'warning',
|
||||
position: 'top-right',
|
||||
duration: 10000
|
||||
})
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
for (let i = 0; i < luckyCount; i++) {
|
||||
if (notPersonListLength > 0) {
|
||||
const randomIndex = Math.floor(Math.random() * notPersonListLength);
|
||||
luckyTargets.value.push(notPersonList[randomIndex])
|
||||
luckyTargets.value.push(notPersonList.value[randomIndex])
|
||||
|
||||
let LuckyCard = objects.value[randomIndex]
|
||||
console.log(LuckyCard)
|
||||
LuckyCard.element = useElementStyle(LuckyCard.element, '#ffd700', { width: cardSize.width * 2, height: cardSize.height * 2 }, textSize * 2, 'lucky')
|
||||
// 重新设置位置
|
||||
LuckyCard.position.x = 100
|
||||
LuckyCard.position.y = 300
|
||||
LuckyCard.position.z = 0
|
||||
// LuckyCard.rotation.x = 0
|
||||
// LuckyCard.rotation.y = 0
|
||||
// LuckyCard.rotation.z = 0
|
||||
new TWEEN.Tween(LuckyCard.position)
|
||||
.to({
|
||||
x: LuckyCard.x,
|
||||
y: LuckyCard.y,
|
||||
z: 1200
|
||||
}, 1000)
|
||||
.start()
|
||||
new TWEEN.Tween(LuckyCard.rotation)
|
||||
.to({
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0
|
||||
}, 1000)
|
||||
.start()
|
||||
luckyCardList.value.push(LuckyCard)
|
||||
}
|
||||
}
|
||||
|
||||
personConfig.addAlreadyPersonList(luckyTargets.value)
|
||||
const luckyCardListLength = luckyCardList.value.length;
|
||||
const windowSize = { width: window.innerWidth, height: window.innerHeight }
|
||||
luckyCardListLength && luckyCardList.value.forEach((item: any, index: number) => {
|
||||
item.element = useElementStyle(item.element, luckyColor.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, textSize.value * 2, 'lucky')
|
||||
item = useElementPosition(item, rowCount.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
|
||||
new TWEEN.Tween(item.position)
|
||||
.to({
|
||||
x: item.x,
|
||||
y: item.y,
|
||||
z: 1000
|
||||
}, 700)
|
||||
.start()
|
||||
new TWEEN.Tween(item.rotation)
|
||||
.to({
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0
|
||||
}, 600)
|
||||
.start()
|
||||
.onComplete(() => {
|
||||
confettiFire()
|
||||
resetCamera()
|
||||
})
|
||||
})
|
||||
currentPrizeValue.value.isUsedCount += luckyCount
|
||||
if(currentPrizeValue.value.isUsedCount>=currentPrizeValue.value.count){
|
||||
currentPrizeValue.value.isUsed=true
|
||||
}
|
||||
prizeConfig.setCurrentPrize(currentPrizeValue.value)
|
||||
prizeConfig.updatePrizeConfig(currentPrizeValue.value)
|
||||
personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
|
||||
}
|
||||
// 庆祝动画
|
||||
const confettiFire = () => {
|
||||
var duration = 3 * 1000;
|
||||
var end = Date.now() + duration;
|
||||
(function frame() {
|
||||
// launch a few confetti from the left edge
|
||||
confetti({
|
||||
particleCount: 2,
|
||||
angle: 60,
|
||||
spread: 55,
|
||||
origin: { x: 0 }
|
||||
});
|
||||
// and launch a few from the right edge
|
||||
confetti({
|
||||
particleCount: 2,
|
||||
angle: 120,
|
||||
spread: 55,
|
||||
origin: { x: 1 }
|
||||
});
|
||||
|
||||
// keep going until we are out of time
|
||||
if (Date.now() < end) {
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
}());
|
||||
centerFire(0.25, {
|
||||
spread: 26,
|
||||
startVelocity: 55,
|
||||
});
|
||||
centerFire(0.2, {
|
||||
spread: 60,
|
||||
});
|
||||
centerFire(0.35, {
|
||||
spread: 100,
|
||||
decay: 0.91,
|
||||
scalar: 0.8
|
||||
});
|
||||
centerFire(0.1, {
|
||||
spread: 120,
|
||||
startVelocity: 25,
|
||||
decay: 0.92,
|
||||
scalar: 1.2
|
||||
});
|
||||
centerFire(0.1, {
|
||||
spread: 120,
|
||||
startVelocity: 45,
|
||||
});
|
||||
}
|
||||
const centerFire = (particleRatio: number, opts: any) => {
|
||||
const count = 200
|
||||
confetti({
|
||||
origin: { y: 0.7 },
|
||||
...opts,
|
||||
particleCount: Math.floor(count * particleRatio)
|
||||
});
|
||||
}
|
||||
// 监听空格键
|
||||
const listenSpaceKey=()=>{
|
||||
window.addEventListener('keydown', (e) => {
|
||||
console.log('code line-468 \n\r😒 e:\n\r',e);
|
||||
//
|
||||
|
||||
if (e.code !== 'Space') {
|
||||
return
|
||||
}
|
||||
if(currentStatus.value==0){
|
||||
enterLottery()
|
||||
}
|
||||
else if(currentStatus.value==1){
|
||||
startLottery()
|
||||
}
|
||||
else if(currentStatus.value==2){
|
||||
stopLottery()
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
init();
|
||||
animation();
|
||||
containerRef.value!.style.color = `${textColor}`
|
||||
listenSpaceKey()
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', listenSpaceKey)
|
||||
})
|
||||
watch(()=>currentPrizeValue.value.isUsed,(val)=>{
|
||||
if(val){
|
||||
currentPrizeValue.value=JSON.parse(JSON.stringify(currentPrize.value))
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="container" ref="containerRef">
|
||||
|
||||
<h2 class="absolute w-full pt-12 m-0 font-mono tracking-wide text-center leading-12" :style="{fontSize:textSize*1.5+'px',color:textColor}">{{ topTitle }}</h2>
|
||||
<div id="container" ref="containerRef" class="3dContainer">
|
||||
|
||||
<!-- 选中菜单结构 start-->
|
||||
<div id="menu">
|
||||
<button class="btn glass" @click="enterLottery" v-if="currentStatus == 0">进入抽奖</button>
|
||||
@@ -356,8 +511,10 @@ onMounted(() => {
|
||||
<button class="btn glass" @click="startLottery" v-if="currentStatus == 1">开始</button>
|
||||
|
||||
<button class="btn glass" @click="stopLottery" v-if="currentStatus == 2">结束</button>
|
||||
<button id="table" @click="transform(targets.table, 2000)">TABLE</button>
|
||||
<button id="helix" @click="transform(targets.helix, 2000)">HELIX</button>
|
||||
|
||||
|
||||
<!-- <button id="table" @click="transform(targets.table, 2000)">TABLE</button> -->
|
||||
<!-- <button id="helix" @click="transform(targets.helix, 2000)">HELIX</button> -->
|
||||
|
||||
</div>
|
||||
<!-- end -->
|
||||
|
||||
Reference in New Issue
Block a user