基于three.js实现特定Div容器的粒子特效封装
本文基于three.js实现特定容器的粒子特效效果,支持用户传入特定的dom对象以及粒子颜色。
效果图
移入库
<script src="jquery-1.11.3.min.js" type="text/javascript"> </script>
<script src="three.min.js" type="text/javascript"></script>
<script src="bodong.js" type="text/javascript"></script>
Html页面指定容器
<!-- 波动动画 -->
<div id="particles" style="width:100%; overflow:hidden; height:200px;background:#383232;"></div>
创建波动示例并完成容器绑定
<srcipt>
$(function(){
//构造波动对象,指定dom元素,指定粒子颜色字符串
var BodongObj=new Bodong($('#particles'),'#c0cbff');
BodongObj.init();
BodongObj.animate();
}) </script>
第三方库下载链接
http://v.bootstrapmb.com/2019/4/u0d54217/dom01/three.min.js
核心代码(bodong.js)
function Bodong(domElement,color) {
var SEPARATION = 100,
AMOUNTX = 50,
AMOUNTY = 50;
var container;
var camera, scene, renderer;
var particles, particle, count = 0;
var mouseX = -660,
mouseY = -210;
var windowHalfX = domElement.innerWidth() / 2;
var windowHalfY = domElement.innerHeight() / 1; this.init = function() {
container = document.createElement("div");
container.id = "banner-canvas";
document.getElementById("particles").appendChild(container);
camera = new THREE.PerspectiveCamera(75, domElement.innerWidth() / domElement.innerHeight(), 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
particles = new Array();
var e = Math.PI * 2;
var d = new THREE.ParticleCanvasMaterial({
color: color||"#46c37b",
program: function(f) {
f.beginPath();
f.arc(0, 0, 1, 0, e, true);
f.fill()
}
});
var a = 0;
for (var b = 0; b < AMOUNTX; b++) {
for (var c = 0; c < AMOUNTY; c++) {
particle = particles[a++] = new THREE.Particle(d);
particle.position.x = b * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
particle.position.z = c * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
scene.add(particle)
}
}
renderer = new THREE.CanvasRenderer();
renderer.setSize(domElement.innerWidth(), domElement.innerHeight());
container.appendChild(renderer.domElement);
document.addEventListener("mousemove", this.onDocumentMouseMove, false);//整个页面监听鼠标移动事件
domElement.on("resize", this.onWindowResize, false);
} this.onWindowResize = function() {
windowHalfX = domElement.innerWidth() / 2;
windowHalfY = domElement.innerHeight() / 2;
camera.aspect = domElement.innerWidth() / domElement.innerHeight();
camera.updateProjectionMatrix();
renderer.setSize(domElement.innerWidth(), domElement.innerHeight())
} this.onDocumentMouseMove = function(a) {
mouseX = a.clientX - windowHalfX;//水平移动距离
mouseY = a.clientY - windowHalfY;//竖直移动距离
mouseY=mouseY>0?-mouseY:mouseY;//防止视角上扬
} this.onDocumentTouchStart = function(a) {
if (a.touches.length === 1) {
a.preventDefault();
mouseX = a.touches[0].pageX - windowHalfX;
mouseY = a.touches[0].pageY - windowHalfY
}
} this.onDocumentTouchMove = function(a) {
if (a.touches.length === 1) {
a.preventDefault();
mouseX = a.touches[0].pageX - windowHalfX;
mouseY = a.touches[0].pageY - windowHalfY
}
} this.animate = function() {
requestAnimationFrame(this.animate.bind(this));//绑定this
this.render()
} this.render = function() {
camera.position.x += (mouseX - camera.position.x) * 0.05;
camera.position.y += (-mouseY - camera.position.y) * 0.05;
camera.lookAt(scene.position);
var a = 0;
for (var b = 0; b < AMOUNTX; b++) {
for (var c = 0; c < AMOUNTY; c++) {
particle = particles[a++];
particle.position.y = (Math.sin((b + count) * 0.3) * 50) + (Math.sin((c + count) * 0.5) * 50);
particle.scale.x = particle.scale.y = (Math.sin((b + count) * 0.3) + 1) * 2 + (Math.sin((c + count) * 0.5) + 1) * 2
}
}
renderer.render(scene, camera);
count += 0.08
}; } /*--------------------测试数据------------------------*/ //var BodongObj=new Bodong($('#particles'),'#c0cbff');
//BodongObj.init();
//BodongObj.animate();
bodong.js
在线Dome效果链接(以整个网页为容器,本文在此基础上进行封装)
http://v.bootstrapmb.com/2019/4/u0d54217/
基于three.js实现特定Div容器的粒子特效封装的更多相关文章
- 基于原生JS实现的Bean容器和AOP编程
Bean是什么 我们知道Bean是Spring最基础的核心构件,大多数逻辑代码都通过Bean进行管理.NestJS基于TypeScript和依赖注入也实现了类似于Spring Bean的机制:服务提供 ...
- 基于slideout.js实现的移动端侧边栏滑动特效
HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢~ ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- 基于Three.js的360X180度全景图预览插件
基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10 HTML5中国 原文 http://www.html5cn.org/article-8621-1 ...
- 基于Three.js的360度全景--photo-sphere-viewer--简介
这个是基于three.js的全景插件 photo-sphere-viewer.js ---------------------------------------- 1.能添加热点: 2.能调用陀 ...
- 基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
- 基于 Egg.js 框架的 Node.js 服务构建之用户管理设计
前言 近来公司需要构建一套 EMM(Enterprise Mobility Management)的管理平台,就这种面向企业的应用管理本身需要考虑的需求是十分复杂的,技术层面管理端和服务端构建是架构核 ...
- 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...
- 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...
随机推荐
- JS高级---案例:贪吃蛇小游戏
案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...
- PHP导出身份证号科学计数法
最近在做PHP的数据导入和导出,到处身份证号的时候,直接变成了科学计算法,找了一个很简单的方法就是这样 $obj= " ".$v['idcard']; 但是这样有空格啊,网上搜了一 ...
- Python 多任务(线程) day2 (1)
结论:多线程全局变量是共享的 (03) 因为多线程一般是配合使用,如果不共享,那么就要等到一个线程执行完,再把变量传递给另一个线程,就变成单线程了 但是如果多个线程同时需要修改一个全局变量,就会出现资 ...
- python面向对象封装案例2
封装 封装 是面向对象编程的一大特点 面向对象编程的 第一步 —— 将 属性 和 方法 封装 到一个抽象的 类 中 外界 使用 类 创建 对象,然后 让对象调用方法 对象方法的细节 都被 封装 在 类 ...
- springboot的安装与初步使用
1.引用springboot框架 1.在maven项目底下的pom.xml的中,引用springboot,如下 <?xml version="1.0" encoding=&q ...
- JDK-13下载安装及环境变量配置
1.JDK-13下载安装及环境变量配置 直接去官网下载 附下载链接:https://www.oracle.com/technetwork/java/javase/downloads/index.htm ...
- Plastic Bottle Manufacturer Tips: Use Caution For Plastic Bottles
Plastic bottles use polyester (PET), polyethylene (PE), polypropylene (PP) as raw materials, after a ...
- 高级命令之awk
1.提取文件内容 2.提取ip
- Android SDK Tools,Platform-tools,Build-tools分别有什么作用?
SDK Tools:是下载sdk最基础的,由它再来下载Platform-tools,Build-tools platform-tools包含开发app的平台依赖的开发和调试工具,包括 adb.fast ...
- Robot Framework初级
一.robot framework环境搭建 二.robot 不同的测试库 三.创建项目 四.变量与常量 五.常用关键字介绍