本文基于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容器的粒子特效封装的更多相关文章

  1. 基于原生JS实现的Bean容器和AOP编程

    Bean是什么 我们知道Bean是Spring最基础的核心构件,大多数逻辑代码都通过Bean进行管理.NestJS基于TypeScript和依赖注入也实现了类似于Spring Bean的机制:服务提供 ...

  2. 基于slideout.js实现的移动端侧边栏滑动特效

    HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢~ ...

  3. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  4. 基于Three.js的360X180度全景图预览插件

    基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1 ...

  5. 基于Three.js的360度全景--photo-sphere-viewer--简介

    这个是基于three.js的全景插件  photo-sphere-viewer.js  ---------------------------------------- 1.能添加热点: 2.能调用陀 ...

  6. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  7. 基于 Egg.js 框架的 Node.js 服务构建之用户管理设计

    前言 近来公司需要构建一套 EMM(Enterprise Mobility Management)的管理平台,就这种面向企业的应用管理本身需要考虑的需求是十分复杂的,技术层面管理端和服务端构建是架构核 ...

  8. 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...

  9. 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]

    基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...

随机推荐

  1. JS高级---案例:贪吃蛇小游戏

    案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...

  2. PHP导出身份证号科学计数法

    最近在做PHP的数据导入和导出,到处身份证号的时候,直接变成了科学计算法,找了一个很简单的方法就是这样 $obj= " ".$v['idcard']; 但是这样有空格啊,网上搜了一 ...

  3. Python 多任务(线程) day2 (1)

    结论:多线程全局变量是共享的 (03) 因为多线程一般是配合使用,如果不共享,那么就要等到一个线程执行完,再把变量传递给另一个线程,就变成单线程了 但是如果多个线程同时需要修改一个全局变量,就会出现资 ...

  4. python面向对象封装案例2

    封装 封装 是面向对象编程的一大特点 面向对象编程的 第一步 —— 将 属性 和 方法 封装 到一个抽象的 类 中 外界 使用 类 创建 对象,然后 让对象调用方法 对象方法的细节 都被 封装 在 类 ...

  5. springboot的安装与初步使用

    1.引用springboot框架 1.在maven项目底下的pom.xml的中,引用springboot,如下 <?xml version="1.0" encoding=&q ...

  6. JDK-13下载安装及环境变量配置

    1.JDK-13下载安装及环境变量配置 直接去官网下载 附下载链接:https://www.oracle.com/technetwork/java/javase/downloads/index.htm ...

  7. Plastic Bottle Manufacturer Tips: Use Caution For Plastic Bottles

    Plastic bottles use polyester (PET), polyethylene (PE), polypropylene (PP) as raw materials, after a ...

  8. 高级命令之awk

    1.提取文件内容 2.提取ip

  9. Android SDK Tools,Platform-tools,Build-tools分别有什么作用?

    SDK Tools:是下载sdk最基础的,由它再来下载Platform-tools,Build-tools platform-tools包含开发app的平台依赖的开发和调试工具,包括 adb.fast ...

  10. Robot Framework初级

    一.robot framework环境搭建 二.robot 不同的测试库 三.创建项目 四.变量与常量 五.常用关键字介绍