HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码
特效描述:html5 3D立体 粒子波浪动画。3D 粒子动画特效
代码结构
1. 引入JS
2. HTML代码
/// Scene
const sceneSettings = {
width: () => $(window).width(),
height: () => $(window).height(),
angle: 45,
aspect: () => sceneSettings.width() / sceneSettings.height(),
close: 0.1,
far: 10000
};
const sceneContainer = $("#scene");
const setSceneDimenstions = () =>
sceneContainer.css({
width: sceneSettings.width(),
height: sceneSettings.height()
});
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
const camera = new THREE.PerspectiveCamera(
sceneSettings.angle,
sceneSettings.aspect(),
sceneSettings.close,
sceneSettings.far
);
const scene = new THREE.Scene();
scene.add(camera);
renderer.setSize(sceneSettings.width(), sceneSettings.height());
renderer.setClearColor(0xffffff, 0);
sceneContainer.append(renderer.domElement);
// Sphere settings
const sphereSettings = {
radius: 10,
segments: 60,
rings: 60
};
// Sphere shape
let sph = new THREE.SphereGeometry(
sphereSettings.radius,
sphereSettings.segments,
sphereSettings.rings
);
// Create spherical particles
let particles = [];
let xPiecesAmount = Math.round(sceneSettings.width() / 60);
for (let i = 1; i < 75; i++) {
let row = new THREE.Object3D();
const sphereMaterial = new THREE.MeshLambertMaterial({
color: "#ffffff",
transparent: true,
opacity: 1 - i / 40
});
for (let j = -xPiecesAmount; j < xPiecesAmount; ++j) {
let sphere = new THREE.Mesh(sph, sphereMaterial);
sphere.position.x = 300 * j;
sphere.position.z = -300 * i;
row.add(sphere);
}
scene.add(row);
particles[i] = row;
}
// Create light
const pointLight = new THREE.HemisphereLight(0xffffff, 0x000000, 1);
// set its position
pointLight.position.x = 2;
pointLight.position.y = 100;
pointLight.position.z = 2000;
// add to the scene
scene.add(pointLight);
camera.position.set(0, 400, -200);
camera.lookAt(new THREE.Vector3(0, 300, -1000));
renderer.render(scene, camera);
for (let i in particles) {
let row = particles[i];
TweenMax.to(row.position, 2, {
y: Math.sin(i / 25) * 300 + 100,
yoyo: true,
repeat: -1,
ease: Sine.easeInOut,
delay: i / 10
});
}
TweenMax.ticker.addEventListener("tick", () => {
renderer.render(scene, camera);
});
/// Window events
$(window)
.on("load resize", () => {
setSceneDimenstions();
if (typeof window.orientation == "undefined") {
camera.aspect = sceneSettings.width() / sceneSettings.height();
camera.updateProjectionMatrix();
renderer.setSize(sceneSettings.width(), sceneSettings.height());
}
})
.on("orientationchange", () => {
setSceneDimenstions();
camera.aspect = sceneSettings.width() / sceneSettings.height();
camera.updateProjectionMatrix();
renderer.setSize(sceneSettings.width(), sceneSettings.height());
});
HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码相关推荐
- html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
- html波浪动态效果,HTML5+CSS3逼真水波浪动画特效
HTML5+CSS3逼真水波浪动画特效 @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 5 ...
- html map热点特效,html5 svg卡通世界地图热点动画特效
特效描述:html5 svg 卡通世界地图 热点动画特效.html5 svg绘制圆形世界地图热点线性动画展示特效. 代码结构 1. 引入JS 2. HTML代码 var select = functi ...
- 汽车 配件 html 特效,html5 echarts汽车仪表盘图表动画特效
特效描述:html5 echarts 汽车仪表盘 图表动画特效,html5汽车仪表盘,第一次从使用echarts,如何调用js,CSS,测试 代码结构 1. 引入JS 2. HTML代码 // 基于准 ...
- 如何设置HTML背景特效,HTML5之按钮背景不同动画特效设计
今天来给大家介绍一下HTML5,讲什么呢,讲讲一组效果非常酷的鼠标滑过按钮背景动画特效. 在该特效中,当鼠标滑过按钮时,使用CSS3 animation来动画background-size和backg ...
- css3上升悬浮粒子特效,HTML5 CSS3星空背景悬浮粒子动画特效
CSS 语言: CSSSCSS 确定 /* Config */ /* Styles */ html, body { height: 100%; } body { display: -webkit-bo ...
- html 萤火虫特效,html5杯子里萤火虫发光动画特效
js代码 var numP = 50; TweenMax.set("#content", {transformOrigin:"50% -45%"}) //Twe ...
- h5动画 php,HTML_多视角3D逼真HTML5水波动画 ,html5+css3进度条倒计时动画特效 - phpStudy...
多视角3D逼真HTML5水波动画 html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了htm ...
- html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
最新文章
- 2021年人工神经网络第一次作业要求
- 3142:[HNOI2013]数列 - BZOJ
- android 日期弹出框,Android 日期选择框 简洁常用
- Android基础(八) – Service AIDL
- java 找不到方法,已经定义的方法找不到
- 深入理解数据结构和算法
- MFC 网络编程小结
- 在 Ubuntu 上安装 .NET SDK 或 .NET 运行时
- ios 代码设置控件宽高比_iOS--利用比例纯代码适配屏幕大小
- linux把标准输出赋值给变量遇到的问题
- 吴恩达神经网络和深度学习-学习笔记-6-训练集、验证集和测试集 + 偏差bias和方差variance
- Entlib DAAB映射枚举类型
- GC overhead limit exceeded填坑心得
- 淘宝开放接口api分享
- C#中Panel控件的使用
- 旅游B2B2C系统解决方案
- nginx代理服务器
- 简单说一下寄存器寻址
- ESP8266开发之旅 网络篇④ Station——ESP8266WiFiSTA库的使用
- 阿里巴巴“新六脉神剑”背后的故事