HTML+CSS+JS实现 ❤️3D悬浮粒子翻转动效❤️

    效果演示:

three基于canvas制作全屏的3D方块粒子悬停,跟随鼠标移动3D翻转动画特效。支持360度无死角翻转效果。

   代码目录:

主要代码实现:

html代码 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>粒子</title>
</head><body><script src="js/three.min.js"></script><div></div><script>var Stats = function() {var e = Date.now(),t = e,i = 0,n = 1 / 0,r = 0,s = 0,o = 1 / 0,a = 0,l = 0,h = 0,c = document.createElement("div");c.id = "stats", c.addEventListener("mousedown", function(e) {e.preventDefault(), v(++h % 2)}, !1), c.style.cssText = "width:80px;opacity:0.9;cursor:pointer";var u = document.createElement("div");u.id = "fps", u.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#002", c.appendChild(u);var d = document.createElement("div");d.id = "fpsText", d.style.cssText = "color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px", d.innerHTML = "FPS", u.appendChild(d);var p = document.createElement("div");for (p.id = "fpsGraph", p.style.cssText = "position:relative;width:74px;height:30px;background-color:#0ff", u.appendChild(p); 74 > p.children.length;) {var f = document.createElement("span");f.style.cssText = "width:1px;height:30px;float:left;background-color:#113", p.appendChild(f)}var m = document.createElement("div");m.id = "ms", m.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#020;display:none", c.appendChild(m);var g = document.createElement("div");g.id = "msText", g.style.cssText = "color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px", g.innerHTML = "MS", m.appendChild(g);var y = document.createElement("div");for (y.id = "msGraph", y.style.cssText = "position:relative;width:74px;height:30px;background-color:#0f0", m.appendChild(y); 74 > y.children.length;) {var f = document.createElement("span");f.style.cssText = "width:1px;height:30px;float:left;background-color:#131", y.appendChild(f)}var v = function(e) {switch (h = e) {case 0:u.style.display = "block", m.style.display = "none";break;case 1:u.style.display = "none", m.style.display = "block"}},b = function(e, t) {var i = e.appendChild(e.firstChild);i.style.height = t + "px"};return {REVISION: 11,domElement: c,setMode: v,begin: function() {e = Date.now()},end: function() {var h = Date.now();return i = h - e, n = Math.min(n, i), r = Math.max(r, i), g.textContent = i + " MS (" + n + "-" + r + ")", b(y, Math.min(30, 30 - 30 * (i / 200))), l++, h > t + 1e3 && (s = Math.round(1e3 * l / (h - t)), o = Math.min(o, s), a = Math.max(a, s), d.textContent = s + " FPS (" + o + "-" + a + ")", b(p, Math.min(30, 30 - 30 * (s / 100))), t = h, l = 0), h},update: function() {e = this.end()}}};(function() {'use strict';// 'To actually be able to display anything with Three.js, we need three things:// A scene, a camera, and a renderer so we can render the scene with the camera.'// - https://threejs.org/docs/#Manual/Introduction/Creating_a_scenevar scene, camera, renderer;// I guess we need this stuff toovar container, HEIGHT,WIDTH, fieldOfView, aspectRatio,nearPlane, farPlane, stats,geometry, particleCount,i, h, color, size,materials = [],mouseX = 0,mouseY = 0,windowHalfX, windowHalfY, cameraZ,fogHex, fogDensity, parameters = {},parameterCount, particles;init();animate();function init() {HEIGHT = window.innerHeight;WIDTH = window.innerWidth;windowHalfX = WIDTH / 2;windowHalfY = HEIGHT / 2;fieldOfView = 75;aspectRatio = WIDTH / HEIGHT;nearPlane = 1;farPlane = 300;/* 	fieldOfView ? Camera frustum vertical field of view.aspectRatio ? Camera frustum aspect ratio.nearPlane ? Camera frustum near plane.farPlane ? Camera frustum far plane.- https://threejs.org/docs/#Reference/Cameras/PerspectiveCameraIn geometry, a frustum (plural: frusta or frustums)is the portion of a solid (normally a cone or pyramid)that lies between two parallel planes cutting it. - wikipedia.		*/cameraZ = farPlane / 3; /*	So, 1000? Yes! move on!	*/fogHex = 0x000000; /* As black as your heart.	*/fogDensity = 0.0007; /* So not terribly dense?	*/camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane);camera.position.z = cameraZ;scene = new THREE.Scene();scene.fog = new THREE.FogExp2(fogHex, fogDensity);container = document.createElement('div');document.body.appendChild(container);document.body.style.margin = 0;document.body.style.overflow = 'hidden';geometry = new THREE.Geometry(); /*	NO ONE SAID ANYTHING ABOUT MATH! UGH!	*/particleCount = 20000; /* Leagues under the sea *//*	Hope you took your motion sickness pills;We're about to get loopy.	*/for (i = 0; i < particleCount; i++) {var vertex = new THREE.Vector3();vertex.x = Math.random() * 2000 - 1000;vertex.y = Math.random() * 2000 - 1000;vertex.z = Math.random() * 2000 - 1000;geometry.vertices.push(vertex);}/*	We can't stop here, this is bat country!	*/parameters = [[[1, 1, 0.5], 5],[[0.95, 1, 0.5], 4],[[0.90, 1, 0.5], 3],[[0.85, 1, 0.5], 2],[[0.80, 1, 0.5], 1]];parameterCount = parameters.length;/*	I told you to take those motion sickness pills.Clean that vommit up, we're going again!	*/for (i = 0; i < parameterCount; i++) {color = parameters[i][0];size = parameters[i][1];materials[i] = new THREE.PointCloudMaterial({size: size});particles = new THREE.PointCloud(geometry, materials[i]);particles.rotation.x = Math.random() * 6;particles.rotation.y = Math.random() * 6;particles.rotation.z = Math.random() * 6;scene.add(particles);}/*	If my calculations are correct, when this baby hits 88 miles per hour...you're gonna see some serious shit.	*/renderer = new THREE.WebGLRenderer(); /*	Rendererererers particles.	*/renderer.setPixelRatio(window.devicePixelRatio); /*	Probably 1; unless you're fancy.	*/renderer.setSize(WIDTH, HEIGHT); /*	Full screen baby Wooooo!	*/container.appendChild(renderer.domElement); /* Let's add all this crazy junk to the page.	*//*	I don't know about you, but I like to know how bad mycode is wrecking the performance of a user's machine.Let's see some damn stats!	*/stats = new Stats();stats.domElement.style.position = 'absolute';stats.domElement.style.top = '0px';stats.domElement.style.right = '0px';container.appendChild(stats.domElement);/* Event Listeners */window.addEventListener('resize', onWindowResize, false);document.addEventListener('mousemove', onDocumentMouseMove, false);document.addEventListener('touchstart', onDocumentTouchStart, false);document.addEventListener('touchmove', onDocumentTouchMove, false);}function animate() {requestAnimationFrame(animate);render();stats.update();}function render() {var time = Date.now() * 0.00005;camera.position.x += (mouseX - camera.position.x) * 0.05;camera.position.y += (-mouseY - camera.position.y) * 0.05;camera.lookAt(scene.position);for (i = 0; i < scene.children.length; i++) {var object = scene.children[i];if (object instanceof THREE.PointCloud) {object.rotation.y = time * (i < 4 ? i + 1 : -(i + 1));}}for (i = 0; i < materials.length; i++) {color = parameters[i][0];h = (360 * (color[0] + time) % 360) / 360;materials[i].color.setHSL(h, color[1], color[2]);}renderer.render(scene, camera);}function onDocumentMouseMove(e) {mouseX = e.clientX - windowHalfX;mouseY = e.clientY - windowHalfY;}/*	Mobile users?  I got your back homey	*/function onDocumentTouchStart(e) {if (e.touches.length === 1) {e.preventDefault();mouseX = e.touches[0].pageX - windowHalfX;mouseY = e.touches[0].pageY - windowHalfY;}}function onDocumentTouchMove(e) {if (e.touches.length === 1) {e.preventDefault();mouseX = e.touches[0].pageX - windowHalfX;mouseY = e.touches[0].pageY - windowHalfY;}}function onWindowResize() {windowHalfX = window.innerWidth / 2;windowHalfY = window.innerHeight / 2;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}})();</script></body></html>

需要把three.min.js引入进来、

源码获取

精彩推荐更新中:

HTML5大作业实战100套

  打卡 文章 更新  36  /  100天

大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562108.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3 配置ftp文件服务器,03-FTP和TFTP配置

1.1 FTP简介FTP(File Transfer Protocol&#xff0c;文件传输协议)用于在远端服务器和本地主机之间传输文件&#xff0c;是IP网络上传输文件的通用协议。在万维网(WWW&#xff0c;World Wide Web)出现以前&#xff0c;用户使用命令行方式传输文件&#xff0c;最通用的应用程序…

HTML+CSS+JS实现 ❤️新型冠状病毒射击小游戏❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分JS代码 : var stage {w: 1280,h: 720 }var _pexcanvas document.getElementById("canvas"); _pexcanvas.width stage.w; _pexcanvas.height stage.h; var ctx _pexcanvas.getContext(…

微信小程序可以加服务器上的字体,微信小程序中自定义字体

微信小程序支持自定义字体开放出来也有段时间&#xff0c;这边整理下使用自定义字体中&#xff0c;容易忽略的一些问题&#xff0c;和简便的全局自定义方式。如果是同时加载两种字体包&#xff0c;先下载下来的会被后下载下来的字体包给覆盖。官网接口文档因此字体包有却只能用…

HTML+CSS+JS实现 ❤️3D奥运五环图形特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; /*** debug in progress ***/:root {--metal: #ffffff45;--gold: repeating-conic-gradient(#edc800 0deg, #ffe800 15deg, #f3cf00 30deg, #e3b600 45deg, #edc800 60deg) 10% 10%;…

【CSDN】-官方插件推荐懒人必备神器

前言&#xff1a; 插件(Plug-in,又称addin、add-in、addon或add-on,又译外挂)是一种遵循一定规范的应用程序接口编写出来的程序。其只能运行在程序规定的系统平台下&#xff08;可能同时支持多个平台&#xff09;&#xff0c;而不能脱离指定的平台单独运行。因为插件需要调用原…

HTML+CSS+JS实现 ❤️3D网状球体动画特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; property --color-position {syntax: <length-percentage>;inherits: false;initial-value: 30%; }body {margin: 0;overflow: hidden;--color-position: 30%;background: rad…

怎么读取can报文_【案例】东风天龙“仪表未收到EECU报文”

来呀&#xff01;来呀&#xff01;关注我吧&#xff01;&#xff01; 车辆信息车型东风天龙发动机ISD270 50ECU型号CM2150E尿素泵依米泰克故障现象卡车司机反馈车子跑起来没有力、爬坡无力、仪表上指示灯亮和仪表未收到EECU报文故障排除&#xff1a;检测仪无法进入系…

HTML+CSS+JS实现 ❤️悬挂摇摆的弹珠动画特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分HTML代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http:…

中如何对一个数取余_如何找到自己在一个城市中的定位?

更多资讯&#xff0c;关注微信公众号&#xff1a;好房U购四川。如何找到自己在一个城市中的定位&#xff1f;最近&#xff0c;各大企业都纷纷启动了校招工作。有条件的&#xff0c;全国都在跑&#xff1b;至少&#xff0c;川内都要跑一跑。而毕业生最迷茫的&#xff0c;不过这两…

HTML+CSS+JS实现 ❤️翻页倒计时ui特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; charset "utf-8"; body {background-color: #f2f1ed; }.wrap {position: absolute;bottom: 0;top: 0;left: 0;right: 0;margin: auto;height: 310px; }a {text-decoration…

HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️

效果演示&#xff1a; GIF压缩太大、故显示图片查看吧 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; charset "utf-8"; * {margin: 0;padding: 0;list-style: none; }body {background-color: #1B1B1B }img {border: 0;cursor: pointer; }a …

HTML+CSS+JS实现 ❤️响应式图文卡片滑块展示特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; import url("https://fonts.googleapis.com/css?familyQuicksand:400,500,700&subsetlatin-ext"); html {position: relative;overflow-x: hidden !important; }body…

代码写好了怎么在php里裕兴_8 行代码用Python画一个中国地图

源 / SegmentFaultJupyter首先&#xff0c;第一神器是Jupyter。如果你是第一次使用&#xff0c;可能搞不清楚它的开发者做这么个鬼东西出来干什么&#xff0c;说它是博客系统也不像&#xff0c;说它是web服务器也不像&#xff0c;但它就是有用。因为我们传统的web开发首先想的就…

❤️六W字《计算机基础知识》(三)(建议收藏)❤️

推荐阅读&#xff1a; ❤️《计算机基础知识》&#xff08;一&#xff09;&#xff08;建议收藏&#xff09;❤️ ❤️《计算机基础知识》&#xff08;二&#xff09;&#xff08;建议收藏&#xff09;❤️ ❤️ java项目精品实战案例 ❤️ 101. Internet上&#xff0c;访问We…

源码 状态机_阿里中间件seata源码剖析七:saga模式实现

saga模式是分布式事务中使用比较多的一种模式&#xff0c;他主要应用在长流程的服务&#xff0c;对一个全局事务&#xff0c;如果某个节点抛出了异常&#xff0c;则从这个节点往前依次回滚或补偿事务。今天我们就来看看它的源码实现。状态机初始化在之前的文章《springcloudeur…

❤️六W字《计算机基础知识》(四)(建议收藏)❤️

151. www.cernet.edu.cn 的网址中&#xff0c;可以明确地看出是属于哪一类机构____。 A、教育界 B、政府单位 C、法人组织 D、公司 152. 在Wed网页中指向其他网页的‘指针“称之为____。 A、超链接 B、超文本 C、超媒体 D、多媒体 153. 下列关于URL的解释错误的是____。…

❤️六W字《计算机基础知识》(五)(建议收藏)❤️

客户/服务器模式的局域网&#xff0c;其网络硬件主要包括服务器、工作站、网卡和____。 A、网络拓扑结构 B、计算机 C、传输介质 D、网络协议 和广域网相比&#xff0c;局域网____。 A、有效性好但可靠性差 B、有效性差但可靠性高 C、有效性好可靠性也高 …

唯有自己变得强大_唯有自己变得强大,才能获得有用人脉!

孔子说&#xff1a;不患人之莫知己&#xff0c;求为可知也来源&#xff1a;田俊国课堂对初入职场的人来讲人微言轻&#xff0c;即便使出浑身解数去拓展关系&#xff0c;有权力、有地位的人也未必正眼瞧你。全世界的人都想巴结那些炙手可热的有权力、有资源的名人。问题是&#…

❤️六W字《计算机基础知识》(六)(建议收藏)❤️

FTP是因特网上最早使用的文件传输程序&#xff0c;使用FTP不能____。 A、查看文件 B、文件目录操作 C、下载文件 D、运行文件 WWW是一种建立在Internet上的全球性的、交互的、动态、多平台、分布式的图形信息系统&#xff0c;它的…

android sdk方法隐藏_每个Android开发都必须知道的利器

1.背景介绍在移动端项目功能不断完善和丰富的过程中我们一直在寻找一种可以高效开发且复用率高的开发模式&#xff0c;特别是多应用同步开发、管理。在开发过程中你是否遇到需要发布影子工程&#xff1f;新建项目是否需要耗费大量时间将原有基类、工具类、第三方通用类库逐个 c…