当前位置:首页 > 前端技术 > 正文内容

前端实现冰墩墩2.0版本,3D视角

nrta1107个月前 (02-18)前端技术306

项目背景

2022年2月4日,冬奥会在北京开幕。作为北京冬奥会的吉祥物,与"冰墩墩"相关的产品在国内成为爆款,市场供不应求。不少人纷纷自制冰墩墩。作为开发人员,尝试使用前端技术制作一个网页版冰墩墩,借此来纪念北京冬奥会的举行。

运行方式

在线演示,访问以下地址:

http://www.zzfriend.com/demo/qianduan/3Dbingdundun/

注意:第一次打开时,资源加载会比较慢。需要等待一段时间即可

源码运行

下载源码后,使用vscode打开。安装LiveServer插件,点击右下角"Go Live"即可打开运行。

技术选型

原生JavaScript实现资源传输和动画效果

使用GLTF文件描绘立体场景

项目功能

展示"冰墩墩"的立体效果。

滚动鼠标滚轮,可以放大或缩小"冰墩墩";既可以观察"冰墩墩"身上的细节,也可以观察"冰墩墩"的整体结构。

按住鼠标左键,往不同的方向拖拽,可以从不同的角度观察"冰墩墩"。

不足之处

该项目需要加载的资源非常庞大,多达15MB,而且要把所有资源加载进来后才能进行显示,所以第一次访问该项目时,需要等待一段时间才能看到效果,用户体验不友好。第一次访问完成后,由于存在缓存机制,所以后面的访问会比较快。

源码下载:

点击下载(提取码:bbh6)

qrcode_for_gh_95ec6d40e739_258.jpg

扫描二维码关注公众号

如在微信端,长按二维码即可关注

版权声明:本文由蚂蚁开源_H5游戏,微信小程序,蚂蚁大喇叭发布,如需转载请注明出处。

本文链接:http://www.zzfriend.com/post/21.html

分享给朋友:

相关文章

CSS3实现冰墩墩自由

CSS3实现冰墩墩自由

CSS3代码:body {     background: rgba(72, 167, 255, 0.733);   &nbs...

CSS3实现雪容融自由

CSS3实现雪容融自由

CSS3代码:* {     box-sizing: border-box;     margin: 0; } body&...

基于canvas的纯JS二维码生成,可以控制二维码的尺寸、颜色

基于canvas的纯JS二维码生成,可以控制二维码的尺寸、颜色

简要教程qrious是一款基于HTML5 canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码,你可以控制二维码的尺寸颜色,还可以将生成的二维码进行Base64编码。使用方法使用该二维码生成插件需要在页面中引入q...

使用Threejs和D3可视化全球新冠疫情

使用Threejs和D3可视化全球新冠疫情

话不多说,整体效果是这样的,本文主要讲解的地球实现核心需求地球半透明,可以看到背面点阵式的全球地图根据数据的经纬度生成对应的柱体数值越大,柱体的颜色和高度就越深越长引入Threejs和D3<script src="...

直播课代码 —— 俄罗斯方块

直播课代码 —— 俄罗斯方块

源码下载:点击下载(提取码:6qrs)...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。