Three.js 实现年会3D抽奖页面

2024-03-17 08:30

本文主要是介绍Three.js 实现年会3D抽奖页面,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 
 
 

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群

突然翻到在之前公司写的抽奖软件(用于公司年会)。觉得挺感慨的,TM的一共30+人,抽15左右,代码还是我写的,就是抽不中我。(真的是,涨了人品,失了智)

一、效果

效果如下:

a0204b3b7cd84bfe560251ad9f882d11.gif

二、基础效果

元素周期表


照片墙?抽奖?写之前的那段时间,刚好逛博客,看到别个大神写的threejs版《元素周期表》,这效果大体有点近似。

ab4371f79de56cf7f2f5c87c3279f909.png

99dfb3d2e4b0a8b26d56ba5240401d80.png

最重要的2块有了。

然后再把元素、tip啥的改成抽奖用的照片和名字,使用CSS3DObject 进行渲染;

// tablefor ( var i = 0; i < table.length; i += 2 ) {// 每个图标的盒子var element = document.createElement( 'div' );element.className = 'element';element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';// 索引var number = document.createElement( 'div' );number.className = 'number';number.textContent = (i/2) + 1;element.appendChild( number );// 图片var symbolBox = document.createElement( 'div' );var symbol = document.createElement( 'img' );symbolBox.className = 'symbolBox';symbol.className = 'symbol';symbol.src = table[i];symbolBox.appendChild(symbol);element.appendChild( symbolBox );// 姓名var details = document.createElement( 'div' );details.className = 'details';details.innerHTML = table[ i + 1 ];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 ];scene.add( object );objects.push( object );// 根据索引,定制位置var object = new THREE.Object3D();var iy = Math.floor((i/2)/9);var ix = (i/2)%9;object.position.x = (ix * 140 ) -540;object.position.y = - ( iy * 180 ) + 480;targets.table.push( object );}

星空底图、星星动画

光是元素周期表的,太素了。背景肯定要选个星空啥的,最好再来一条银河!

高清的星空壁纸,太大了,如果是有点动效的gif,那体积更大。而像素低点的,效果根本不行。(适应1920屏幕的)

于是,我使用 低像素图 + canvas 星星动图来完善背景!

4e5851efaa795185202b0ea23236fa1e.png

e225b0c2798341261b67deb6141961cc.gif

星星canvas 动画。(也是网上找的,链接忘了)(感谢之前的大神 + 1)

var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight, hue = 217, stars = [], count = 0, maxStars = 1300;//星星数量 var canvas2 = document.createElement('canvas'), ctx2 = canvas2.getContext('2d'); 
canvas2.width = 100; 
canvas2.height = 100; 
var half = canvas2.width / 2, gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half); 
gradient2.addColorStop(0.025, '#CCC'); 
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)'); 
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)'); 
gradient2.addColorStop(1, 'transparent'); ctx2.fillStyle = gradient2; 
ctx2.beginPath(); 
ctx2.arc(half, half, half, 0, Math.PI * 2); 
ctx2.fill(); // End cache function random(min, max) { if (arguments.length < 2) { max = min; min = 0; } if (min > max) { var hold = max; max = min; min = hold; } return Math.floor(Math.random() * (max - min + 1)) + min; 
} function maxOrbit(x, y) { var max = Math.max(x, y), diameter = Math.round(Math.sqrt(max * max + max * max)); return diameter / 2; //星星移动范围,值越大范围越小, 
} var Star = function() { this.orbitRadius = random(maxOrbit(w, h)); this.radius = random(60, this.orbitRadius) / 8;  //星星大小 this.orbitX = w / 2; this.orbitY = h / 2; this.timePassed = random(0, maxStars); this.speed = random(this.orbitRadius) / 50000;  //星星移动速度 this.alpha = random(2, 10) / 10; count++; stars[count] = this; 
} Star.prototype.draw = function() { var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX, y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY, twinkle = random(10); if (twinkle === 1 && this.alpha > 0) { this.alpha -= 0.05; } else if (twinkle === 2 && this.alpha < 1) { this.alpha += 0.05; } ctx.globalAlpha = this.alpha; ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius); this.timePassed += this.speed; 
} for (var i = 0; i < maxStars; i++) { new Star(); 
} function animation() { ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 0.5; //尾巴 ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)'; ctx.fillRect(0, 0, w, h) ctx.globalCompositeOperation = 'lighter'; for (var i = 1, l = stars.length; i < l; i++) { stars[i].draw(); }; window.requestAnimationFrame(animation); 
} animation();

抽奖的照片

抽奖的照片,还得在照片球的中间,位置。(也是在3d内)

同样的方式,使用CSS3DObject进行渲染

// 创建切换图片
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 ) + ')';var symbolBox = document.createElement( 'div' );
var symbol = document.createElement( 'img' );
symbol.setAttribute("id", "changeImg");
symbolBox.className = 'symbolBox2';
symbol.className = 'symbol2';
symbol.src = table[0];
symbolBox.appendChild(symbol);
elements.appendChild( symbolBox );var details = document.createElement( 'div' );
details.setAttribute("id", "detailss");
details.className = 'details';
details.innerHTML = table[1];
elements.appendChild( details );objectsss = new THREE.CSS3DObject( elements );
objectsss.position.x = 0;
objectsss.position.y = 20000;
objectsss.position.z = 0;
scene.add( objectsss );

三、动画

一切基础准备就绪,就差动画了。

照片墙、照片球、照片散乱状态的补间动画

点击抽奖:照片墙--->照片球

点击停止:照片球--->照片散乱   (感觉就像,照片球爆炸了一样)

threejs里面,补间动画,一般使用 tween.js

先存下照片墙、球、散乱三种状态的坐标点,然后切换抽奖状态时,同时切换,通过tween切换照片的位置,这样就实现了动画。

// 表格坐标 (在初始化)
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 ];scene.add( object );objects.push( object );// 根据索引,定制位置var object = new THREE.Object3D();var iy = Math.floor((i/2)/9);var ix = (i/2)%9;object.position.x = (ix * 140 ) -540;object.position.y = - ( iy * 180 ) + 480;targets.table.push( object );// 球的 照片坐标
var vector = new THREE.Vector3();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var phi = Math.acos( -1 + ( 2 * i ) / l );
var theta = Math.sqrt( l * Math.PI ) * phi;
var object = new THREE.Object3D();
object.position.x = 750 * Math.cos( theta ) * Math.sin( phi );
object.position.y = 750 * Math.sin( theta ) * Math.sin( phi );
object.position.z = 750 * Math.cos( phi );
vector.copy( object.position ).multiplyScalar( 2 );
object.lookAt( vector );
targets.sphere.push( object );
}
// 散乱随机位置
var vector = new THREE.Vector3();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var phi = Math.acos( -1 + ( 2 * i ) / l );
var theta = Math.sqrt( l * Math.PI ) * phi;
var object = new THREE.Object3D();
var py = Math.random() * 3400 - 1700;
if(py<400&&py>-400){    //防止停止时,图片位置不好挡住中央的图片中间空出点位置
if(py<0){
py-=400;
}else{
py+=400;
}
}
object.position.x = Math.random() * 3400 - 1700;
object.position.y = py;
object.position.z = Math.random() * 3400 - 1700;
object.lookAt( vector );
targets.chaos.push( object );
}

tweenjs 补件动画

// 切换状态时动画
function transform( targets, duration ,type) {var scale = 1;if(type==undefined){type=0;}TWEEN.removeAll();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 ).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();                                 }new TWEEN.Tween( this ).to( {}, duration * 2 ).onUpdate( render ).start();
}

抽奖时动画

这个时候的动画,主要是两个:照片切换、照片球的转动

照片切换,中间图片src  随机切换就好了

照片球转动?何必呢,转动相机不是更轻松?

于是使用:TrackballControls.js轨道控制器。转相机就好了嘛

var numsss =0,srcss='',txtsss='';
function movings(){// 相机旋转ang += Math.PI/50;camera.position.x = Math.cos(ang)*2000;camera.position.z = Math.sin(ang)*2000; camera.position.y = 0;// 相机方向重置camera.up.x = 0;camera.up.y = 1;camera.up.z = 0;// 图片方向固定objectsss.rotation.y =-ang+Math.PI/2;//中间图片切换numsss = Math.floor(Math.random()*tableLens);if(numsss==tableLens){numsss = tableLens-1;}srcss = table[numsss*2];txtsss =  table[numsss*2+1];changeImg.src = srcss;detailss.innerHTML = txtsss;
}

抽奖结束后中奖图片放大

抽奖结束,停止转动,中奖图片放大

// 停止时,图片放大动画
function objDeal(obj,nums){var option = {x: obj.scale.x,  y: obj.scale.y, z: obj.scale.z,                 };var tween = new TWEEN.Tween(option).to({x:nums,y:nums,z:nums,},300).delay(100).onUpdate(function() {obj.scale.x = this.x;obj.scale.y = this.y;obj.scale.z = this.z;isMoving = true;}).onComplete(function(){isMoving = false;                }).start();
}

四、完善细节、添加音乐

抽奖嘛,光效果是不够的,还得有点音乐才好。(音乐是当时人事姐姐提供的)

目前添加2个音乐:点击抽奖后,激动人心的音乐《猪突猛进》。中奖时的音乐,一段布灵布灵的铃声。

<!--抽奖音乐标签-->
<audio id="music" src="./music/04-抽奖音乐 猪突猛進.mp3" loop></audio>
<!--抽奖音乐标签-->
<audio id="music2" src="./music/9629.mp3"></audio>//开始
start:function(){if(vm.spic.img!=''){alert("抽完咯~~~完咯~~~咯~~~,在中奖名单中清空,再来一次?");return;}moving = true;              objectsss.position.y = 0;transform( targets.sphere, 1000 );objDeal(objectsss,1);music.play(); // 开始音乐this.ckPrice();           
},
//结束
closes:function(){music.pause(); // 关闭音乐if(!moving){return;} music2.play(); // 播放中奖音乐moving = false;this.choosePerson();transform( targets.chaos, 250 ,1);objDeal(objectsss,1.8);   
},

五、结束语

代码几年前写的,挺垃圾的,没考虑性能,也没有做啥优化。只是当时做的思路还算比较清晰。给大家看下,提供些相关业务的思路。

源码:

https://github.com/baiDog/something/tree/master/test

作者:狗贼
链接:https://juejin.cn/post/7057759297811251231

Node 社群

 

我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

8e4be9e5ee41318676ecc199fc54a177.png

“分享、点赞、在看” 支持一下

d58f7de2f2cf557d273c68bba3ec08ad.gif

这篇关于Three.js 实现年会3D抽奖页面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/818398

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount