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 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
详解JavaScript函数对象
Nov 15 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
python采集博客中上传的QQ截图文件
2014/07/18 Python
遗传算法之Python实现代码
2017/10/10 Python
分享6个隐藏的python功能
2017/12/07 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
Python实现插入排序和选择排序的方法
2019/05/12 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
爱情检讨书大全
2014/01/21 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
市场专员岗位职责
2014/02/14 职场文书
会计岗位职责模板
2014/03/12 职场文书
任命书范本大全
2014/06/06 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers