html写的3d烟花带字幕,Three.js 3D烟花绽放动画
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var renderer, scene, camera, geometry, mouse, bubbles;
var gravity = .3;
var ww = window.innerWidth,
wh = window.innerHeight;
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(ww, wh);
renderer.setClearColor(0X521324);
renderer.shadowMapEnabled = true;
document.getElementById("stage").appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, ww / wh, 1, 10000);
camera.position.set(500, 700, 400);
controls = new THREE.OrbitControls(camera);
scene.add(camera);
bubbles = new THREE.Object3D();
scene.add(bubbles);
//Box on the ground
var geometry = new THREE.BoxGeometry(50, 50, 50);
var material = new THREE.MeshBasicMaterial({
color: 0X000000
});
var emitter = new THREE.Mesh(geometry, material);
scene.add(emitter);
//Ground
var geometry = new THREE.PlaneGeometry(900, 900, 900);
var material = new THREE.MeshLambertMaterial({
color: 0XFFDAE4,
side: THREE.DoubleSide
});
var plane = new THREE.Mesh(geometry, material);
plane.rotation.x = Math.PI / 2;
plane.position.y = -25.1;
plane.receiveShadow = true;
scene.add(plane);
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
var directionalLight = new THREE.DirectionalLight(0xFFFAC3, 1);
directionalLight.position.set(0, 1000, 0);
directionalLight.lookAt(new THREE.Vector3(0, 0, 0));
directionalLight.castShadow = true;
scene.add(directionalLight);
var light = new THREE.PointLight(0x5992C7, 1, 800);
light.position.set(0, 0, 0);
scene.add(light);
render();
}
var colours = [0XF5CC70, 0XF2676B, 0X325982, 0XBF4E6C, 0X5992C7];
function Bubble(position) {
var geometry = new THREE.SphereGeometry(12, 15, 15);
var material = new THREE.MeshLambertMaterial({
transparent: true,
color: colours[parseInt(Math.random() * 5)]
});
var bubble = new THREE.Mesh(geometry, material);
bubble.castShadow = true;
bubble.receiveShadow = true;
bubble.position.set(0, 0, 0);
bubble.velocity = Math.random() * 1 + 15;
bubble.offsetX = (Math.random() - .5) * 7;
bubble.offsetZ = (Math.random() - .5) * 7;
bubble.move = true;
//If baby explosion
if (position) {
bubble.position.set(position.x, position.y, position.z);
bubble.child = true;
bubble.scale.set(.6, .6, .6);
bubble.velocity = (Math.random() - .5) * 7 + 5;
} else {
bubble.child = false;
bubble.explosion = (Math.random() - .5) * 20;
}
return bubble;
};
function Explosion(bubble) {
var position = {
x: bubble.position.x,
y: bubble.position.y,
z: bubble.position.z
};
for (var i = 0; i < 10; i++) {
bubbles.add(new Bubble(position));
}
};
var counter = 0;
var render = function(a) {
requestAnimationFrame(render);
if (counter % 30 === 0) {
bubbles.add(new Bubble());
}
for (var i = 0, j = bubbles.children.length; i < j; i++) {
var bubble = bubbles.children[i];
if (bubble.move) {
bubble.position.x += bubble.offsetX;
bubble.position.z += bubble.offsetZ;
bubble.velocity -= gravity;
bubble.position.y += bubble.velocity;
}
if (!bubble.child && bubble.position.y < 0 || bubble.velocity < bubble.explosion) {
new Explosion(bubble);
bubbles.remove(bubble);
i--;
j--;
} else if (bubble.child && bubble.position.y < .1) {
bubble.move = false;
bubble.position.y = -15;
bubble.scale.x -= .006;
bubble.scale.y -= .006;
bubble.scale.z -= .006;
bubble.position.y -= .06;
if (bubble.scale.x < .05) {
bubbles.remove(bubble);
i--;
j--;
}
}
}
counter++;
renderer.render(scene, camera);
};
init();
html写的3d烟花带字幕,Three.js 3D烟花绽放动画相关推荐
- 春节将至,喜庆的烟花安排上(js实现烟花)
一年一度的春节即将来临,然后苦逼的我还在使劲的摸鱼,未能回家体验小时候路边放爆竹的快乐时光,所以只能在网上来实现这个小小的心愿了.烟花静态效果图如下: 为了大伙复制方便就不分开写,直接复制即可,具体实 ...
- html 3d立体阴影效果图,CSS3打造带阴影的旋转3D图像
CSS3打造带阴影的旋转3D图像 Sponsor CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D旋转图像,效果很漂亮,这个旋转图像的特别之处就是支持阴影旋转和兼容响应式网页设计,使 ...
- 麦克纳姆轮运动原理_【带字幕视频】麦克纳姆轮你了解多少?ESP32的WIFI信号,居然能覆盖10公里?...
DIY视频新更新 [RM]机器人常用的麦克纳姆轮,你了解多少? 麦克纳姆全向轮让机器人能够迅速准确地在赛场上全向移动.快来了解这种轮子的原理和特点吧! 点击"阅读全文"免费播放 [ ...
- minst手写数字识别(带界面)
minst手写数字识别(带界面) 目录 minst手写数字识别(带界面) 一.项目简介 二.项目结构及环境 三.网络结构介绍 四.程序文件介绍 五.使用介绍 六.源代码获取 一.项目简介 1)概述:手 ...
- HTML5七夕情人节表白网页(流星雨3D旋转相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤流星雨3D旋转相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程 ...
- Youtube上面的Red5 官方视频下载教程,带字幕【亲测成功】
前言 近来在学习Red5 开源流媒体服务框架,官网上的信息足以让一个新手入门 有官方参考手册 -- 快速了解red5的相关信息 有Red5 on Stackoverflow -- 在上面可以提问或者 ...
- 3d div带阴影_带盒阴影的3D阴影
3d div带阴影 View demo 查看演示 Download Source 下载源 When working with 3D transformed elements, you might no ...
- Matlab放烟花 带音效哟 祝大家新年快乐
这一次要更新的是用Matlab放烟花!祝大家新年快乐! 效果如下: 2021已然接近尾声,回顾这一年,总有这样或那样的收获,也有一些遗憾. 但是,一切过往,皆为序章. 这一期来填一下上上次留下的坑,用 ...
- Unity 3D游戏代码编程学习教程 Full Guide To Unity 3D C#: Learn To Code Making 3D Games
Unity 3D游戏代码编程学习教程 Full Guide To Unity 3D & C#: Learn To Code Making 3D Games Full Guide To Unit ...
- 单目3D物体级SLAM | CubeSLAM: Monocular 3D Object SLAM
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 本文由知乎作者原野寻踪授权转载,不得擅自二次转载.原文链接:https://zhuanlan.zhih ...
最新文章
- python批处理修改文件的名字
- magic系统将来能升鸿蒙,荣耀30和V30将首批搭载Magic UI 4.0 后续可升级鸿蒙系统
- 乐鑫代理启明云端分享| ESP32系列教程之五: Eclipse搭建esp-idf环境
- 详解Spring框架的AOP机制
- JS面向对象的程序设计之创建对象_工厂模式,构造函数模式,原型模式-1
- 【AI专利】中国成为全球AI专利第二大提交国,微软AI专利数比你论文字数都多...
- 华为辟谣将发布石墨烯电池手机;梁建章回应携程杀熟;GitLab 12.6 发布 | 极客头条...
- php ldap ad 登录验证,PHP中的LDAP身份验证 – 无需密码即可进行身份验证
- tn文本分析语言(三):高级语法
- 如何移植Android源码里面的东西到NDK
- mysql 在线优化工具_MySQL SQL查询优化工具EverSQL
- PPT高级教程及技巧
- 解决Win10磁盘占用100%
- Quantum Espresso安装
- 网页html生成图片的常用方案
- 如何带好一个团队?团队管理的要点有哪些?
- 超详细“CIDR地址块及其子网划分”
- Supervisor(四)
- 券商接口量化交易策略——KDJ指标
- php百度热门关键词小偷,火端搜索2.1源码 PHP百度+好搜小偷程序