当前位置: 首页 > 最新文章 > 正文

技术分享:用JS实现的3D海浪涌动特效

分享一个基于ThreeJS的3D海浪涌动特效,效果如下:常可用于页面背景,3D效果,视觉观感很好,海浪会随机涌动,科幻感、技术感强烈。代码说明代码会引用ThreeJS库,版本号为56。页面背景色可在Body的style中自行调节。完整源码如下,直接保存为html文件即可使用。也可对源码优化修改,以实现更好效果,如果不想修改后的源码泄露出去,可用JShaman对JS代码进行加密。分享一个基于Thre

admin

分享一个基于ThreeJS的3D海浪涌动特效,效果如下:常可用于页面背景,3D效果,视觉观感很好,海浪会随机涌动,科幻感、技术感强烈。代码说明代码会引用ThreeJS库,版本号为56。页面背景色可在Body的style中自行调节。完整源码如下,直接保存为html文件即可使用。也可对源码优化修改,以实现更好效果,如果不想修改后的源码泄露出去,可用JShaman对JS代码进行加密。

分享一个基于ThreeJS的3D海浪涌动特效,效果如下:

技术分享:用JS实现的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代码经JShaman加密后的版本

<body style="background:#000000">

<script src="three.js" type="application/javascript"></script>

<div></div>

<script>

var _0x4958=['innerWidth','innerHeight','createElement','div','body','appendChild','PerspectiveCamera','position','Scene','ParticleCanvasMaterial','beginPath','arc','fill','UpoPt','AWRfk','Particle','add','sin','scale','CanvasRenderer','setSize','domElement','addEventListener','mousemove','touchstart','touchmove','resize','aspect','updateProjectionMatrix','clientX','clientY','touches','length','preventDefault','pageX','pageY','lookAt','render'];var _0x53e2=function(_0x495868,_0x53e2d4){_0x495868=_0x495868-0x0;var _0x29be28=_0x4958[_0x495868];return _0x29be28;};var _0x283452=function(_0x3e53a6,_0x1254a6,_0x3be8d9,_0x555da9,_0x4d2ac7){return _0x53e2(_0x1254a6- -0xba,_0x3be8d9);};var _0x2718ad=function(_0x3c3382,_0x4430e0,_0x59d685,_0x54ef89,_0x50d243){return _0x53e2(_0x4430e0- -0xba,_0x59d685);};var SEPARATION=0x64,AMOUNTX=0x64,AMOUNTY=0x46;var container;var camera,scene,renderer;var particles,particle,count=0x0;var mouseX=0x55,mouseY=-0x156;var windowHalfX=window[_0x283452(-0xa7,-0xba,-0xc7,-0xc5,-0xb4)]/0x2;var windowHalfY=window[_0x283452(-0xb9,-0xb9,-0xbd,-0xc3,-0xaf)]/0x2;init();animate();function init(){var _0x9a83b7=function(_0x3260f8,_0x32bfe4,_0x49c07b,_0x56ced5,_0x3406ce){return _0x53e2(_0x3406ce- -0x41,_0x3260f8);};var _0x1726ae=function(_0x10a835,_0x21f451,_0x4a00d7,_0x48d447,_0x43dad2){return _0x53e2(_0x43dad2- -0x41,_0x10a835);};var _0x20e714=function(_0x4468f1,_0x5ad9aa,_0x5541cf,_0x264671,_0x3d70b5){return _0x53e2(_0x3d70b5- -0x41,_0x4468f1);};var _0x50088a=function(_0x19cf73,_0x5ae95e,_0x166ccc,_0xe88c24,_0x4afd36){return _0x53e2(_0x4afd36- -0x41,_0x19cf73);};var _0x3ffbc8=function(_0x5da469,_0xd2cb40,_0x376280,_0x33b3f7,_0xaedcef){return _0x53e2(_0xaedcef- -0x41,_0x5da469);};container=document[_0x9a83b7(-0x33,-0x46,-0x4f,-0x49,-0x3f)](_0x9a83b7(-0x3d,-0x4f,-0x4d,-0x32,-0x3e));document[_0x1726ae(-0x2b,-0x37,-0x46,-0x34,-0x3d)][_0x50088a(-0x3b,-0x3d,-0x3d,-0x35,-0x3c)](container);camera=new THREE[(_0x1726ae(-0x46,-0x3c,-0x3e,-0x49,-0x3b))](0x78,window[_0x1726ae(-0x43,-0x2e,-0x4f,-0x42,-0x41)]/window[_0x1726ae(-0x53,-0x4b,-0x52,-0x2f,-0x40)],0x1,0x2710);camera[_0x20e714(-0x47,-0x2a,-0x4c,-0x37,-0x3a)]['z']=0x3e8;scene=new THREE[(_0x1726ae(-0x27,-0x29,-0x48,-0x2b,-0x39))]();particles=new Array();var _0x3cac35=Math['PI']*0x2;var _0x26ea5b=new THREE[(_0x50088a(-0x32,-0x30,-0x41,-0x45,-0x38))]({'color':0xe1e1e1,'program':function(_0xe137ff){var _0x271564=function(_0x5a5227,_0x167a79,_0x27fcdc,_0x3e1066,_0x416114){return _0x53e2(_0x27fcdc-0x387,_0x5a5227);};var _0x4fed1d=function(_0x393409,_0x456012,_0x52f865,_0x323e74,_0x41de07){return _0x53e2(_0x52f865-0x387,_0x393409);};var _0xc7a4c2=function(_0x103186,_0x32f82b,_0x237284,_0x230514,_0x5db012){return _0x53e2(_0x237284-0x387,_0x103186);};_0xe137ff[_0x271564(0x391,0x385,0x391,0x38e,0x39e)]();_0xe137ff[_0x271564(0x389,0x392,0x392,0x397,0x39c)](0x0,0x0,0.6,0x0,_0x3cac35,!![]);_0xe137ff[_0x271564(0x39a,0x390,0x393,0x384,0x392)]();}});var _0x1ac0fb=0x0;for(var _0xf6846c=0x0;_0xf6846c<AMOUNTX;_0xf6846c++){if(_0x50088a(-0x3d,-0x23,-0x47,-0x42,-0x34)!==_0x3ffbc8(-0x32,-0x34,-0x3a,-0x42,-0x33)){for(var _0x35de31=0x0;_0x35de31<AMOUNTY;_0x35de31++){particle=particles[_0x1ac0fb++]=new THREE[(_0x9a83b7(-0x38,-0x27,-0x29,-0x3d,-0x32))](_0x26ea5b);particle[_0x20e714(-0x3f,-0x31,-0x4c,-0x2a,-0x3a)]['x']=_0xf6846c*SEPARATION-AMOUNTX*SEPARATION/0x2;particle[_0x50088a(-0x33,-0x41,-0x3a,-0x4d,-0x3a)]['z']=_0x35de31*SEPARATION-AMOUNTY*SEPARATION/0x2;scene[_0x50088a(-0x35,-0x3d,-0x3d,-0x2a,-0x31)](particle);}}else{var _0x44cf8b=function(_0x148fc9,_0x44925c,_0x1ec042,_0x118bc7,_0xb28430){return _0x53e2(_0x148fc9-0x102,_0x44925c);};var _0x20e411=function(_0x3a60d7,_0x37d8ec,_0x4307e3,_0x237d4d,_0x2feda5){return _0x53e2(_0x3a60d7-0x102,_0x37d8ec);};var _0x31fc8a=function(_0x3ea956,_0x7e18fe,_0x2d9b45,_0x26c6fa,_0x222b88){return _0x53e2(_0x3ea956-0x102,_0x7e18fe);};var _0x1f2f91=function(_0x238301,_0x1daf21,_0x49cc62,_0x4c770c,_0x3313be){return _0x53e2(_0x238301-0x102,_0x1daf21);};var _0x355814=function(_0x5edcde,_0x4d863f,_0x4da480,_0x37b7f4,_0x93063){return _0x53e2(_0x5edcde-0x102,_0x4d863f);};_0x5dd6f8=_0x796b19[_0x36deeb++];_0x1eb109[_0x44cf8b(0x109,0x114,0x10e,0xfa,0x10c)]['y']=_0xaf2183[_0x44cf8b(0x113,0x11d,0x11e,0x120,0x10e)]((_0x1f1c00+_0x488f89)*0.3)*0x32+_0x3914c6[_0x44cf8b(0x113,0x113,0x114,0x11f,0x11d)]((_0x53fc00+_0x5e7394)*0.5)*0x32;_0x5d0bdf[_0x44cf8b(0x114,0x102,0x127,0x127,0x109)]['x']=_0x34cf57[_0x1f2f91(0x114,0x125,0x124,0x113,0x117)]['y']=(_0x133e6e[_0x44cf8b(0x113,0x114,0x100,0x113,0x120)]((_0xe41bfc+_0xc472bf)*0.3)+0x1)*0x2+(_0x1a3810[_0x44cf8b(0x113,0x126,0x113,0x124,0x122)]((_0x146975+_0x54122)*0.5)+0x1)*0x2;}}renderer=new THREE[(_0x9a83b7(-0x29,-0x27,-0x1b,-0x31,-0x2e))]();renderer[_0x3ffbc8(-0x29,-0x27,-0x1c,-0x25,-0x2d)](window[_0x50088a(-0x38,-0x50,-0x3c,-0x42,-0x41)],window[_0x9a83b7(-0x2f,-0x3e,-0x4c,-0x41,-0x40)]);container[_0x50088a(-0x29,-0x29,-0x2b,-0x3e,-0x3c)](renderer[_0x20e714(-0x2c,-0x24,-0x3f,-0x3d,-0x2c)]);document[_0x1726ae(-0x24,-0x3d,-0x2d,-0x38,-0x2b)](_0x1726ae(-0x1d,-0x39,-0x28,-0x2b,-0x2a),onDocumentMouseMove,![]);document[_0x20e714(-0x1c,-0x28,-0x3d,-0x32,-0x2b)](_0x3ffbc8(-0x19,-0x38,-0x1f,-0x34,-0x29),onDocumentTouchStart,![]);document[_0x50088a(-0x3e,-0x2a,-0x1c,-0x2f,-0x2b)](_0x3ffbc8(-0x1b,-0x3a,-0x3a,-0x19,-0x28),onDocumentTouchMove,![]);window[_0x1726ae(-0x2f,-0x2f,-0x33,-0x39,-0x2b)](_0x50088a(-0x17,-0x24,-0x2f,-0x21,-0x27),onWindowResize,![]);}function onWindowResize(){var _0x101c96=function(_0x1acd79,_0xfe326b,_0x3e96a9,_0x2aa019,_0x4c609d){return _0x53e2(_0xfe326b-0xa0,_0x1acd79);};var _0x19a8f7=function(_0x78bb92,_0xe26f8e,_0x848c5b,_0x7685ee,_0x21de63){return _0x53e2(_0xe26f8e-0xa0,_0x78bb92);};var _0x3586e8=function(_0xa9a64e,_0x5af0f6,_0x3cc0de,_0x353915,_0x329480){return _0x53e2(_0x5af0f6-0xa0,_0xa9a64e);};var _0x4c3f7f=function(_0x2b774f,_0x461e06,_0x52b28f,_0x3d5cf3,_0x3675ba){return _0x53e2(_0x461e06-0xa0,_0x2b774f);};var _0x46f9ee=function(_0xf6ed19,_0x30331e,_0x305fee,_0x240f53,_0x5a743f){return _0x53e2(_0x30331e-0xa0,_0xf6ed19);};windowHalfX=window[_0x101c96(0x9c,0xa0,0xa9,0x90,0xb2)]/0x2;windowHalfY=window[_0x101c96(0xb0,0xa1,0x9d,0x91,0x90)]/0x2;camera[_0x19a8f7(0xaf,0xbb,0xc3,0xc7,0xb3)]=window[_0x19a8f7(0xa4,0xa0,0xa0,0x97,0x94)]/window[_0x101c96(0xaa,0xa1,0x9f,0x9c,0xab)];camera[_0x3586e8(0xc6,0xbc,0xca,0xb4,0xbf)]();renderer[_0x3586e8(0xc4,0xb4,0xbb,0xb3,0xbe)](window[_0x4c3f7f(0x8d,0xa0,0xaa,0x9c,0x92)],window[_0x3586e8(0xb2,0xa1,0xb3,0xb1,0x9c)]);}function onDocumentMouseMove(_0x5061e9){var _0x17cbc6=function(_0xc7306c,_0x5680a8,_0x86c64d,_0x136f85,_0x27d102){return _0x53e2(_0x27d102- -0x34,_0x5680a8);};var _0x4caa5f=function(_0x1a0898,_0x2697b0,_0x4155d7,_0x17ac6f,_0x291d78){return _0x53e2(_0x291d78- -0x34,_0x2697b0);};mouseX=_0x5061e9[_0x17cbc6(-0x13,-0x21,-0x1a,-0x14,-0x17)]-windowHalfX;mouseY=_0x5061e9[_0x4caa5f(-0xb,-0x21,-0xd,-0x10,-0x16)]-windowHalfY;}function onDocumentTouchStart(_0x577202){var _0x4140fa=function(_0x69dd97,_0x2fcdab,_0x59451d,_0x9d6fca,_0x389b9d){return _0x53e2(_0x9d6fca-0x2ae,_0x2fcdab);};var _0x18ca1b=function(_0x58bd2b,_0x3ce750,_0x215576,_0x2a1cde,_0x2c5ad7){return _0x53e2(_0x2a1cde-0x2ae,_0x3ce750);};var _0x59b157=function(_0x58f624,_0x3a812b,_0x45a091,_0xdeb33e,_0x18d0d2){return _0x53e2(_0xdeb33e-0x2ae,_0x3a812b);};var _0x1d48d5=function(_0x290f50,_0x385f86,_0x134e67,_0x2cca4f,_0x57ca77){return _0x53e2(_0x2cca4f-0x2ae,_0x385f86);};var _0x3b0d1d=function(_0x4c20c9,_0x1c0c43,_0x6703c3,_0x547ad0,_0x14d892){return _0x53e2(_0x547ad0-0x2ae,_0x1c0c43);};if(_0x577202[_0x4140fa(0x2c7,0x2c8,0x2bd,0x2cd,0x2cb)][_0x18ca1b(0x2db,0x2de,0x2c7,0x2ce,0x2de)]===0x1){_0x577202[_0x18ca1b(0x2d5,0x2d5,0x2db,0x2cf,0x2ce)]();mouseX=_0x577202[_0x1d48d5(0x2c7,0x2d2,0x2d7,0x2cd,0x2d9)][0x0][_0x3b0d1d(0x2df,0x2d7,0x2c9,0x2d0,0x2c9)]-windowHalfX;mouseY=_0x577202[_0x18ca1b(0x2ba,0x2da,0x2ca,0x2cd,0x2cc)][0x0][_0x1d48d5(0x2c4,0x2d1,0x2dd,0x2d1,0x2c6)]-windowHalfY;}}function onDocumentTouchMove(_0x382f83){var _0x49fa81=function(_0x488487,_0x88b838,_0xb3e31b,_0x17ce49,_0x1b2ec3){return _0x53e2(_0x1b2ec3- -0xc9,_0x17ce49);};var _0x4d4759=function(_0x18567f,_0x197726,_0x484d40,_0x138928,_0x585d97){return _0x53e2(_0x585d97- -0xc9,_0x138928);};var _0x31befa=function(_0x5f51c3,_0x3f11f5,_0x3f93e3,_0x2efa89,_0xf9111d){return _0x53e2(_0xf9111d- -0xc9,_0x2efa89);};var _0x69f870=function(_0x57ef19,_0x1f6bc6,_0x40a37a,_0x570061,_0x39e913){return _0x53e2(_0x39e913- -0xc9,_0x570061);};var _0xf5a88c=function(_0x542419,_0x38b3c0,_0x37a23b,_0x261b5d,_0x4dc388){return _0x53e2(_0x4dc388- -0xc9,_0x261b5d);};if(_0x382f83[_0x49fa81(-0xb6,-0xbb,-0x97,-0xbb,-0xaa)][_0x4d4759(-0x98,-0xa4,-0xb3,-0xb7,-0xa9)]===0x1){_0x382f83[_0x49fa81(-0xa9,-0xab,-0x97,-0xbb,-0xa8)]();mouseX=_0x382f83[_0x4d4759(-0xa1,-0xb3,-0x9f,-0xb7,-0xaa)][0x0][_0xf5a88c(-0xa7,-0x97,-0x98,-0xad,-0xa7)]-windowHalfX;mouseY=_0x382f83[_0xf5a88c(-0xb5,-0xaf,-0xb0,-0x97,-0xaa)][0x0][_0x31befa(-0xb3,-0xae,-0xb6,-0x98,-0xa6)]-windowHalfY;}}function animate(){requestAnimationFrame(animate);render();}function render(){var _0x2d56ab=function(_0x353031,_0x30e264,_0x3f285b,_0x324767,_0x440095){return _0x53e2(_0x324767-0x18a,_0x30e264);};var _0x35d243=function(_0xb6a570,_0x237b70,_0x54c80a,_0x2ce89b,_0x46a1c6){return _0x53e2(_0x2ce89b-0x18a,_0x237b70);};var _0x1f97ec=function(_0x1b3ae6,_0x3db505,_0xe0e488,_0x17aa0a,_0x388a79){return _0x53e2(_0x17aa0a-0x18a,_0x3db505);};var _0x336c37=function(_0x33b5fd,_0x526fca,_0x50ee8c,_0x2cac2e,_0x4e9569){return _0x53e2(_0x2cac2e-0x18a,_0x526fca);};var _0x14af67=function(_0x12d95f,_0x3335af,_0x4b2b53,_0x2d2a30,_0x23d74f){return _0x53e2(_0x2d2a30-0x18a,_0x3335af);};camera[_0x2d56ab(0x195,0x19c,0x193,0x191,0x194)]['x']+=(mouseX-camera[_0x35d243(0x19f,0x197,0x187,0x191,0x19e)]['x'])*0.05;camera[_0x1f97ec(0x190,0x192,0x1a3,0x191,0x198)]['y']+=(-mouseY-camera[_0x35d243(0x188,0x199,0x18d,0x191,0x189)]['y'])*0.05;camera[_0x35d243(0x1b0,0x1ae,0x1b6,0x1ae,0x1b1)](scene[_0x14af67(0x188,0x198,0x191,0x191,0x199)]);var _0x3ab4d3=0x0;for(var _0x55d02c=0x0;_0x55d02c<AMOUNTX;_0x55d02c++){for(var _0x23fa9b=0x0;_0x23fa9b<AMOUNTY;_0x23fa9b++){particle=particles[_0x3ab4d3++];particle[_0x1f97ec(0x195,0x1a3,0x195,0x191,0x19f)]['y']=Math[_0x1f97ec(0x1aa,0x1ac,0x18f,0x19b,0x197)]((_0x55d02c+count)*0.3)*0x32+Math[_0x2d56ab(0x1ad,0x196,0x1a4,0x19b,0x19d)]((_0x23fa9b+count)*0.5)*0x32;particle[_0x35d243(0x1a7,0x1a1,0x18f,0x19c,0x1ad)]['x']=particle[_0x14af67(0x18f,0x191,0x189,0x19c,0x190)]['y']=(Math[_0x2d56ab(0x18e,0x1a5,0x1a7,0x19b,0x1ad)]((_0x55d02c+count)*0.3)+0x1)*0x2+(Math[_0x14af67(0x1a4,0x1a1,0x1ad,0x19b,0x191)]((_0x23fa9b+count)*0.5)+0x1)*0x2;}}renderer[_0x1f97ec(0x1ac,0x1bb,0x1b1,0x1af,0x1a4)](scene,camera);count+=0.1;}

</script>

<div>

<canvas style="width: 1440px; height: 335px;" width="2160" height="502"></canvas>

</div>

</body>



上一篇: 要怎么自学(自学如何学) 下一篇:小白都能看懂的jdbc规范
返回顶部