JavaScript实现飞舞的泡泡效果


Posted in Javascript onFebruary 07, 2020

本文实例为大家分享了JavaScript实现飞舞泡泡效果的具体代码,供大家参考,具体内容如下

示例

JavaScript实现飞舞的泡泡效果

CSS

html,
body {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
}

canvas {
 position: fixed;
 width: 100%;
 height: 100%;
}

JS

const nbObjects = 800;
var conf, scene, camera, cameraCtrl, light, renderer;
var whw, whh;

var objects;
var spriteMap, spriteMaterial;

var mouse = new THREE.Vector2();
var mouseOver = false;
var mousePlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
var mousePosition = new THREE.Vector3();
var raycaster = new THREE.Raycaster();

function init() {
 conf = {
 opacity: 0.8
 };

 scene = new THREE.Scene();
 camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
 cameraCtrl = new THREE.OrbitControls(camera);
 cameraCtrl.autoRotate = true;
 cameraCtrl.autoRotateSpeed = 5;

 renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);

 initScene();

 onWindowResize();
 window.addEventListener('resize', onWindowResize, false);

 animate();
};

function initScene() {
 scene = new THREE.Scene();
 scene.background = new THREE.Color(0xFFF8DC);

 camera.position.z = 30;
 camera.position.y = 20;
 camera.lookAt(0, 0, 0);

 spriteMap = new THREE.Texture();
 var bubble = new Image();
 bubble.src = "data:image/png;base64,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";
 bubble.onload = function () {
 spriteMap.image = bubble;
 spriteMap.needsUpdate = true;
 };

 objects = [];
 for (var i = 0; i < nbObjects; i++) {
 var object = new Truc();
 objects.push(object);
 scene.add(object.sprite);
 }
}

function animate() {
 requestAnimationFrame(animate);

 cameraCtrl.update();

 renderer.render(scene, camera);
};

function Truc() {
 this.init();
 this.shuffle();
}

Truc.prototype.init = function () {
 this.material = new THREE.SpriteMaterial({
 color: randomColor({ luminosity: 'light' }),
 map: spriteMap,
 transparent: true,
 opacity: 1,
 depthTest: false,
 depthWrite: false,
 blending: THREE.AdditiveBlending
 });
 this.sprite = new THREE.Sprite(this.material);
};

Truc.prototype.shuffle = function () {
 this.scale1 = 0.1;
 this.scale2 = 2 + rnd(3);
 this.sprite.scale.set(this.scale1, this.scale1, 1);

 var rndv = getRandomVec3();
 this.sprite.position.set(rndv.x, rndv.y, rndv.z).multiplyScalar(50);
 this.sprite.position.y -= 25;

 this.material.opacity = conf.opacity;

 this.tt = this.scale2;
 TweenMax.to(this.sprite.scale, 1, { x: this.scale2, y: this.scale2, ease: Power2.easeIn });
 TweenMax.to(this.sprite.position, this.scale2, { y: this.sprite.position.y + 100, ease: Power2.easeIn });

 this.t1 = 1;
 TweenMax.to(this.sprite.position, this.t1, {
 x: this.sprite.position.x + rnd(10, true),
 z: this.sprite.position.z + rnd(10, true),
 ease:Linear.ease,
 repeat: Math.floor((this.tt/this.t1)/2),
 yoyo: true
 });

 TweenMax.to(this.material, 1, {
 opacity: 0,
 delay: this.tt-1,
 ease: Power2.easeIn,
 onCompleteParams: [this],
 onComplete: function (o) {
  o.shuffle();
 }
 });
};

function getRandomVec3() {
 const u = Math.random();
 const v = Math.random();
 const theta = u * 2.0 * Math.PI;
 const phi = Math.acos(2.0 * v - 1.0);
 const r = Math.cbrt(Math.random());
 const sinTheta = Math.sin(theta);
 const cosTheta = Math.cos(theta);
 const sinPhi = Math.sin(phi);
 const cosPhi = Math.cos(phi);
 const x = r * sinPhi * cosTheta;
 const y = r * sinPhi * sinTheta;
 const z = r * cosPhi;
 return { x: x, y: y, z: z };
}

function rnd(max, negative) {
 return negative ? Math.random() * 2 * max - max : Math.random() * max;
}

function onWindowResize() {
 whw = window.innerWidth / 2;
 whh = window.innerHeight / 2;
 camera.aspect = window.innerWidth / window.innerHeight;
 camera.updateProjectionMatrix();
 renderer.setSize(window.innerWidth, window.innerHeight);
}

init();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
JavaScript实现Excel表格效果
Feb 07 #Javascript
js实现自动播放匀速轮播图
Feb 06 #Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 #Javascript
vue 检测用户上传图片宽高的方法
Feb 06 #Javascript
vue中对象数组去重的实现
Feb 06 #Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 #Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 #Javascript
You might like
第十四节--命名空间
2006/11/16 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
python实现简易云音乐播放器
2018/01/04 Python
python爬取个性签名的方法
2018/06/17 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
审计主管岗位职责
2014/01/31 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
端午节演讲稿
2014/05/23 职场文书
求职教师自荐书
2014/06/19 职场文书
英语投诉信范文
2015/07/03 职场文书
DSP接收机前端设想
2022/04/05 无线电