|
|
@@ -24,14 +24,16 @@
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
+
|
|
|
<div id="container" style="pointer-events: none;"></div>
|
|
|
<div id="vueBoxs">
|
|
|
- <!-- @keypress.space="keyDowns()" -->
|
|
|
<div class="bss">
|
|
|
+ <div class="pageTitle"></div>
|
|
|
+ <div class="iconBack" @click="onBack()"></div>
|
|
|
<div id="menu">
|
|
|
- <button id="table" @click="start()">开始</button>
|
|
|
- <button id="sphere" @click="closes()">结束</button>
|
|
|
- <button id="reset" style="margin-left:40px;" @click="resets()">照片墙</button>
|
|
|
+ <button id="table" v-show="!animationStatus" @click="start()"></button>
|
|
|
+ <button id="sphere" v-show="animationStatus" @click="closes()"></button>
|
|
|
+ <!-- <button id="reset" style="margin-left:40px;" @click="resets()">照片墙</button> -->
|
|
|
<!-- <button id="lists" @click="listShow = true">中奖名单</button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -41,59 +43,73 @@
|
|
|
</html>
|
|
|
<script>
|
|
|
var table = getData();
|
|
|
- var tableLens = table.length / 2;
|
|
|
+ var tableLens = table.length;
|
|
|
var camera, scene, renderer;
|
|
|
var controls;
|
|
|
var objects = [];
|
|
|
var targets = { chaos: [], table: [], sphere: [], helix: [], grid: [] };
|
|
|
var ang = 0, moving = false, objectsss, starBG, isMoving = false; //objectsss 为切换的图片的
|
|
|
- // var music = document.getElementById('music');
|
|
|
- // var music2 = document.getElementById('music2');
|
|
|
var cpx = 0, cpy = 0, cpz = 0, crx = 0, cry = 0, crz = 0;
|
|
|
|
|
|
function init() {
|
|
|
- camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
|
|
|
- camera.position.z = 2000;
|
|
|
+ camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
|
|
|
+ camera.position.z = 1500;
|
|
|
scene = new THREE.Scene();
|
|
|
// table
|
|
|
- for (var i = 0; i < table.length; i += 2) {
|
|
|
+ for (var i = 0; i < table.length; i++) {
|
|
|
// 每个图标的盒子
|
|
|
var element = document.createElement('div');
|
|
|
element.className = 'element';
|
|
|
element.style.backgroundColor = 'rgba(255,255,255)';
|
|
|
element.style.borderRadius = '12px'
|
|
|
- // 索引
|
|
|
- // var number = document.createElement('div');
|
|
|
- // number.className = 'number';
|
|
|
- // number.textContent = (i / 2) + 1;
|
|
|
- // element.appendChild(number);
|
|
|
+ if (i >= 32) {
|
|
|
+ element.className = 'element hide'
|
|
|
+ }
|
|
|
// 图片
|
|
|
var symbolBox = document.createElement('div');
|
|
|
var symbol = document.createElement('img');
|
|
|
symbolBox.className = 'symbolBox';
|
|
|
symbol.className = 'symbol';
|
|
|
- symbol.src = table[i];
|
|
|
+ symbol.src = table[i].img;
|
|
|
symbolBox.appendChild(symbol);
|
|
|
element.appendChild(symbolBox);
|
|
|
// 姓名
|
|
|
var details = document.createElement('div');
|
|
|
details.className = 'details';
|
|
|
- details.innerHTML = table[i + 1];
|
|
|
+ details.innerHTML = table[i].name;
|
|
|
element.appendChild(details);
|
|
|
// 图标变成3d内的对象，放入场景中
|
|
|
var object = new THREE.CSS3DObject(element);
|
|
|
object.position.x = Math.random() * 3400 - 1700;
|
|
|
object.position.y = Math.random() * 3400 - 1700;
|
|
|
object.position.z = Math.random() * 3400 - 1700;
|
|
|
- object.name = table[i + 1];
|
|
|
+ object.name = table[i].name;
|
|
|
scene.add(object);
|
|
|
objects.push(object);
|
|
|
// 根据索引，定制位置
|
|
|
var object = new THREE.Object3D();
|
|
|
- var iy = Math.floor((i / 2) / 8);
|
|
|
- var ix = (i / 2) % 8;
|
|
|
- object.position.x = (ix * 120) - 540;
|
|
|
- object.position.y = - (iy * 155) + 480;
|
|
|
+ var ix = (i) % 8;
|
|
|
+ object.position.y = 300;
|
|
|
+ if (table.length === 1) {
|
|
|
+ object.position.x = 0;
|
|
|
+ } else if (table.length === 2) {
|
|
|
+ object.position.x = (ix * 172) - (172 * 1 / 2);
|
|
|
+ } else if (table.length === 3) {
|
|
|
+ object.position.x = (ix * 172) - (172 * 2 / 2);
|
|
|
+ } else if (table.length === 4) {
|
|
|
+ object.position.x = (ix * 172) - (172 * 3 / 2);
|
|
|
+ } else if (table.length === 5) {
|
|
|
+ object.position.x = (ix * 172) - (172 * 4 / 2);
|
|
|
+ } else if (table.length === 6) {
|
|
|
+ object.position.x = (ix * 172) - (172 * 5 / 2);
|
|
|
+ } else if (table.length === 7) {
|
|
|
+ object.position.x = (ix * 172) - (172 * 6 / 2);
|
|
|
+ } else {
|
|
|
+ var iy = Math.floor((i) / 8);
|
|
|
+ object.position.x = (ix * 172) - 600;
|
|
|
+ object.position.y = - (iy * 192) + 300;
|
|
|
+ }
|
|
|
+
|
|
|
targets.table.push(object);
|
|
|
}
|
|
|
|
|
|
@@ -101,21 +117,21 @@
|
|
|
var elements = document.createElement('div');
|
|
|
elements.className = 'changeImgBoxs';
|
|
|
// element.style.backgroundImage = "url(./img/pic.png)";
|
|
|
- elements.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';
|
|
|
+ elements.style.backgroundColor = 'rgba(255,255,255)';
|
|
|
|
|
|
var symbolBox = document.createElement('div');
|
|
|
var symbol = document.createElement('img');
|
|
|
symbol.setAttribute("id", "changeImg");
|
|
|
symbolBox.className = 'symbolBox2';
|
|
|
symbol.className = 'symbol2';
|
|
|
- symbol.src = table[0];
|
|
|
+ symbol.src = table[0].img;
|
|
|
symbolBox.appendChild(symbol);
|
|
|
elements.appendChild(symbolBox);
|
|
|
|
|
|
var details = document.createElement('div');
|
|
|
details.setAttribute("id", "detailss");
|
|
|
details.className = 'details';
|
|
|
- details.innerHTML = table[1];
|
|
|
+ details.innerHTML = table[0].name;
|
|
|
elements.appendChild(details);
|
|
|
|
|
|
objectsss = new THREE.CSS3DObject(elements);
|
|
|
@@ -188,6 +204,7 @@
|
|
|
for (var i = 0; i < objects.length; i++) {
|
|
|
var object = objects[i];
|
|
|
var 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)
|
|
|
@@ -200,7 +217,21 @@
|
|
|
new TWEEN.Tween(this)
|
|
|
.to({}, duration * 2)
|
|
|
.onUpdate(render)
|
|
|
- .start();
|
|
|
+ .start()
|
|
|
+
|
|
|
+ // console.log(document.querySelectorAll('.element'), '1212')
|
|
|
+ setTimeout(() => {
|
|
|
+ if (moving) {
|
|
|
+ const elements = document.querySelectorAll('.element')
|
|
|
+ if (elements.length > 0) {
|
|
|
+ console.log('111')
|
|
|
+ elements.forEach((e) => {
|
|
|
+ e.classList.remove('hide')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 400);
|
|
|
+
|
|
|
}
|
|
|
// 屏幕大小适配
|
|
|
function onWindowResize() {
|
|
|
@@ -226,14 +257,6 @@
|
|
|
cry = camera.rotation.y;
|
|
|
crz = camera.rotation.z;
|
|
|
|
|
|
- // if (starBG.position.x + cpx * 5 / 2 > 1 || (starBG.position.x + cpx * 5 / 2 < -1)) {
|
|
|
- // starBG.position.x = -cpx * 5 / 2;
|
|
|
- // starBG.position.z = -cpz * 5 / 2;
|
|
|
- // starBG.position.y = -cpy * 5 / 2;
|
|
|
- // starBG.rotation.x = crx;
|
|
|
- // starBG.rotation.z = crz;
|
|
|
- // starBG.rotation.y = cry;
|
|
|
- // }
|
|
|
}
|
|
|
function render() {
|
|
|
renderer.render(scene, camera);
|
|
|
@@ -256,8 +279,8 @@
|
|
|
if (numsss == tableLens) {
|
|
|
numsss = tableLens - 1;
|
|
|
}
|
|
|
- srcss = table[numsss * 2];
|
|
|
- txtsss = table[numsss * 2 + 1];
|
|
|
+ srcss = table[numsss].img;
|
|
|
+ txtsss = table[numsss].name;
|
|
|
changeImg.src = srcss;
|
|
|
detailss.innerHTML = txtsss;
|
|
|
}
|
|
|
@@ -281,10 +304,20 @@
|
|
|
isMoving = false;
|
|
|
}).start();
|
|
|
}
|
|
|
+
|
|
|
+ // 初始化数据
|
|
|
+ function renderData(data) {
|
|
|
+ table = data
|
|
|
+ tableLens = data.length
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
+ }
|
|
|
+
|
|
|
//点击事件及部分判断
|
|
|
var vm = new Vue({
|
|
|
el: '#vueBoxs',
|
|
|
data: {
|
|
|
+ animationStatus: false,
|
|
|
listShow: false,
|
|
|
spic: {
|
|
|
img: '',
|
|
|
@@ -301,41 +334,42 @@
|
|
|
this.closes();
|
|
|
},
|
|
|
//判断奖品登记
|
|
|
- ckPrice: function () {
|
|
|
- var res = '三等奖';
|
|
|
- var len1 = this.price1.length;
|
|
|
- var len2 = this.price2.length;
|
|
|
- var len3 = this.price3.length;
|
|
|
- var lens = this.lens;
|
|
|
- if (lens[2] <= len3) {
|
|
|
- if (lens[1] <= len2) {
|
|
|
- if (lens[0] <= len1) {
|
|
|
- if (this.spic.img != '') {
|
|
|
- res = '特等奖';
|
|
|
- } else {
|
|
|
- res = '特等奖';
|
|
|
- }
|
|
|
- } else {
|
|
|
- res = '一等奖';
|
|
|
- }
|
|
|
- } else {
|
|
|
- res = '二等奖';
|
|
|
- }
|
|
|
- }
|
|
|
- this.priceNow = res;
|
|
|
- },
|
|
|
+ // ckPrice: function () {
|
|
|
+ // var res = '三等奖';
|
|
|
+ // var len1 = this.price1.length;
|
|
|
+ // var len2 = this.price2.length;
|
|
|
+ // var len3 = this.price3.length;
|
|
|
+ // var lens = this.lens;
|
|
|
+ // if (lens[2] <= len3) {
|
|
|
+ // if (lens[1] <= len2) {
|
|
|
+ // if (lens[0] <= len1) {
|
|
|
+ // if (this.spic.img != '') {
|
|
|
+ // res = '特等奖';
|
|
|
+ // } else {
|
|
|
+ // res = '特等奖';
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // res = '一等奖';
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // res = '二等奖';
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // this.priceNow = res;
|
|
|
+ // },
|
|
|
//开始
|
|
|
start: function () {
|
|
|
- if (vm.spic.img != '') {
|
|
|
- alert("抽完咯~~~完咯~~~咯~~~,在中奖名单中清空，再来一次？");
|
|
|
- return;
|
|
|
- }
|
|
|
+ // if (vm.spic.img != '') {
|
|
|
+ // alert("抽完咯~~~完咯~~~咯~~~,在中奖名单中清空，再来一次？");
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
moving = true;
|
|
|
+ this.animationStatus = true;
|
|
|
objectsss.position.y = 0;
|
|
|
transform(targets.sphere, 1000);
|
|
|
objDeal(objectsss, 1);
|
|
|
// music.play();
|
|
|
- this.ckPrice();
|
|
|
+ // this.ckPrice();
|
|
|
},
|
|
|
//结束
|
|
|
closes: function () {
|
|
|
@@ -345,14 +379,15 @@
|
|
|
}
|
|
|
// music2.play();
|
|
|
moving = false;
|
|
|
- this.choosePerson();
|
|
|
+ this.animationStatus = false;
|
|
|
+ // this.choosePerson();
|
|
|
transform(targets.chaos, 250, 1);
|
|
|
objDeal(objectsss, 1.8);
|
|
|
},
|
|
|
//回到照片墙的状态
|
|
|
resets: function () {
|
|
|
moving = false;
|
|
|
- camera.position.z = 2000;
|
|
|
+ camera.position.z = 1500;
|
|
|
camera.position.x = 0;
|
|
|
camera.position.y = 0;
|
|
|
camera.up.x = 0;//相机以哪个方向为上方
|
|
|
@@ -366,59 +401,58 @@
|
|
|
// 星空背景图重置
|
|
|
transform(targets.table, 400);
|
|
|
// music.pause();
|
|
|
- this.ckPrice();
|
|
|
+ // this.ckPrice();
|
|
|
},
|
|
|
// 储存得奖名单
|
|
|
- choosePerson: function () {
|
|
|
- var img = document.getElementById('changeImg').src;
|
|
|
- var txt = document.getElementById("detailss").innerHTML;
|
|
|
-
|
|
|
- var img2 = document.getElementById('changeImg');
|
|
|
- var txt2 = document.getElementById("detailss");
|
|
|
+ // choosePerson: function () {
|
|
|
+ // var img = document.getElementById('changeImg').src;
|
|
|
+ // var txt = document.getElementById("detailss").innerHTML;
|
|
|
|
|
|
- var obj = {
|
|
|
- img: img,
|
|
|
- name: txt
|
|
|
- };
|
|
|
- var len3 = this.price3.length;
|
|
|
- var len2 = this.price2.length;
|
|
|
- var len1 = this.price1.length;
|
|
|
- if (len3 < this.lens[2]) {
|
|
|
- this.price3.push(obj);
|
|
|
- } else {
|
|
|
- if (len2 < this.lens[1]) {
|
|
|
- this.price2.push(obj);
|
|
|
- } else {
|
|
|
- if (len1 < this.lens[0]) {
|
|
|
- this.price1.push(obj);
|
|
|
- } else {
|
|
|
- if (this.spic.img == '') {
|
|
|
- this.spic = obj;
|
|
|
- } else {
|
|
|
- alert("抽完咯，完咯~~咯~~~");
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- var json = JSON.stringify([this.price1, this.price2, this.price3, this.spic]);
|
|
|
- localStorage.setItem('pricesListm', json);
|
|
|
- },
|
|
|
+ // var img2 = document.getElementById('changeImg');
|
|
|
+ // var txt2 = document.getElementById("detailss");
|
|
|
|
|
|
+ // var obj = {
|
|
|
+ // img: img,
|
|
|
+ // name: txt
|
|
|
+ // };
|
|
|
+ // var len3 = this.price3.length;
|
|
|
+ // var len2 = this.price2.length;
|
|
|
+ // var len1 = this.price1.length;
|
|
|
+ // if (len3 < this.lens[2]) {
|
|
|
+ // this.price3.push(obj);
|
|
|
+ // } else {
|
|
|
+ // if (len2 < this.lens[1]) {
|
|
|
+ // this.price2.push(obj);
|
|
|
+ // } else {
|
|
|
+ // if (len1 < this.lens[0]) {
|
|
|
+ // this.price1.push(obj);
|
|
|
+ // } else {
|
|
|
+ // if (this.spic.img == '') {
|
|
|
+ // this.spic = obj;
|
|
|
+ // } else {
|
|
|
+ // alert("抽完咯，完咯~~咯~~~");
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // var json = JSON.stringify([this.price1, this.price2, this.price3, this.spic]);
|
|
|
+ // localStorage.setItem('pricesListm', json);
|
|
|
+ // },
|
|
|
+ onBack() {
|
|
|
+ // 返回时先结束
|
|
|
+ this.closes()
|
|
|
+ window.parent.postMessage({
|
|
|
+ api: 'callBack',
|
|
|
+ loading: false,
|
|
|
+ }, '*');
|
|
|
+ }
|
|
|
},
|
|
|
created: function () {
|
|
|
- var json = localStorage.getItem('pricesListm');
|
|
|
- if (json) {
|
|
|
- var attrs = JSON.parse(json);
|
|
|
- this.price1 = attrs[0];
|
|
|
- this.price2 = attrs[1];
|
|
|
- this.price3 = attrs[2];
|
|
|
- this.spic = attrs[3];
|
|
|
- }
|
|
|
- init();
|
|
|
- // getStar();
|
|
|
- animate();
|
|
|
+ // init();
|
|
|
+ // animate();
|
|
|
|
|
|
- this.ckPrice();
|
|
|
+ // getStar();
|
|
|
+ // this.ckPrice();
|
|
|
}
|
|
|
})
|
|
|
</script>
|
