技术分享：用JS实现的3D海浪涌动特效
分享一个基于ThreeJS的3D海浪涌动特效，效果如下：
常可用于页面背景，3D效果，视觉观感很好，海浪会随机涌动，科幻感、技术感强烈。
代码说明
代码会引用ThreeJS库，版本号为56。注：必须是此版本。
页面背景色可在Body的style中自行调节。
<body style="background:#000000">
完整源码如下，直接保存为html文件即可使用。
也可对源码优化修改，以实现更好效果，如果不想修改后的源码泄露出去，可用JShaman对JS代码进行加密。
源码
<body style="background:#000000">
<script src="three.js" type="application/javascript"></script>
<div></div>
<script>
var SEPARATION = 100,
AMOUNTX = 100,
AMOUNTY = 70;
var container;
var camera, scene, renderer;
var particles, particle, count = 0;
var mouseX = 85,
mouseY = -342;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
particles = new Array();
var PI2 = Math.PI * 2;
var material = new THREE.ParticleCanvasMaterial({
color: 0xe1e1e1,
program: function(context) {
context.beginPath();
context.arc(0, 0, .6, 0, PI2, true);
context.fill();
}
});
var i = 0;
for (var ix = 0; ix < AMOUNTX; ix++) {
for (var iy = 0; iy < AMOUNTY; iy++) {
particle = particles[i++] = new THREE.Particle(material);
particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
scene.add(particle);
}
}
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart(event) {
if (event.touches.length === 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
}
}
function onDocumentTouchMove(event) {
if (event.touches.length === 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
}
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.lookAt(scene.position);
var i = 0;
for (var ix = 0; ix < AMOUNTX; ix++) {
for (var iy = 0; iy < AMOUNTY; iy++) {
particle = particles[i++];
particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2;
}
}
renderer.render(scene, camera);
count += 0.1;
}
</script>
<div>
<canvas style="width: 1440px; height: 335px;" width="2160" height="502"></canvas>
</div>
</body>
技术分享：用JS实现的3D海浪涌动特效相关推荐
- HTML+CSS+JS实现 ❤️彩色3D线条动画特效❤️
效果演示: 代码目录: 主要代码实现: HTML代码 : <!doctype html> <html><head><meta charset="ut ...
- 超干货3D视觉技术分享+人才内推！独角兽奥比中光与你相约VALSE 2021
10月8日至10日,一年一度的VALSE大会(视觉与学习青年学者研讨会)将在杭州国际博览中心举办.行业领先的3D视觉感知领域整体技术方案提供商奥比中光金牌赞助本届VALSE大会,并以"感知· ...
- Cocos Creator 3D 蚂蚁庄园系列技术分享
编者按 "游戏开发小赤佬,也玩 python 和 shell" 白玉无冰是"Cocos 荣耀讲师"征稿活动第1期的获奖作者之一,除了征稿作品<用摄像机实现 ...
- 为武汉游戏人点赞！3D《巅峰漂移》技术分享
<巅峰漂移>是由武汉迷萌基于 Cocos Creator 3D 研发的一款 3D 赛车漂移竞速微信小游戏.近日,Cocos 对<巅峰漂移>项目组进行了专访,疫情之下,武汉当地游 ...
- 阿里DataV 2016双十一媒体大屏回顾技术分享
今年在多个部门共同努力下,阿里集团在2015水立方双十一媒体中心立起了一块宽21米,高10米的LED大屏.DataV 数据可视化小组有幸在这么大一块画布上尽兴创作,并且在这个项目中小组第一次尝试使用了 ...
- 使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课
使用webgl(three.js)搭建一个3D建筑,3D消防模拟--第三课 项目背景 消防安全一直是各大都市关注的重要课题,在消防体系中,特别是高楼消防体系中,消防系统整体布控与监控,火情有效准确定位 ...
- php 3d animation,基于three.js的酷炫Canvas 3D线条动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效 ...
- 前端技术分享之HTMLHTML5
前端技术分享之HTML&&HTML5 HTML 发展历史 HTML文档模式 标准模式 HTML 4.01 严格型 XHTML 1.0 严格型 HTML 5 准标准模式 HTML 4.0 ...
- 技术分享 | 混合云模式下SaaS端前端最佳实践
导读:集成开放平台采用的是混合云部署架构,包含两个大的组件,管理控制台和引擎.管理控制台是SaaS的,部署在公有云,按租户隔离.引擎部署在客户私有云.一套SaaS版的管理控制台如何适配不同客户的引擎, ...
最新文章
- 基于OpenCV进行相机标定
- Hash Table Benchmarks
- 安装m2eclipse插件
- C语言 · 单词数统计
- Linux LAMP搭建
- 使用Gitbook来编写你的Api文档
- Js之History对象
- HTML中使用IconFont图标
- 阿里云OSS配制域名及SSL证书教程
- 开关switch系列：android Switch显示文字
- Windows10插了耳机电脑还是外放
- 利用0.618法(黄金分割法)求极小值
- 搞笑的谷歌 还冠冕堂皇！
- 简单易用的像素动画工具，最新版Aseprite v1.2.29
- 快排优化代码__2018.07.26
- 积木报表画布显示不了
- 系统性思考-思考习惯的养成
- 小白学基金——基础篇
- 国家高新技术企业多少分通过？申请条件是什么？
- [HNOI2005]狡猾的商人 差分约束+判环