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自定义的函数
Aug 05 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
javascript中递归的两种写法
Jan 17 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
Python map及filter函数使用方法解析
2020/08/06 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
经典优秀个人求职自荐信格式
2013/09/25 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
工作失职检讨书500字
2014/10/17 职场文书
销售助理岗位职责
2015/02/11 职场文书
公路施工安全责任书
2015/05/08 职场文书
史上最牛辞职信
2015/05/13 职场文书
务工证明怎么写
2015/06/18 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL