先给大家看看登录页面的效果演示
这个登录页面分为三个部分（页面切换：连续按五次V，大小写都可以）
第一个（最初的鱼儿游动页面）
登录、切换页面、和鱼儿游动这个页面的代码就不放在这里了，这个虽然是我借鉴他人的，但到处有bug，当时耗费了我几天时间来修正、整理，太难做了，如果需要的话，可以三连后，后台联系我
第二个（人山人海页面）
具体代码如下：都是完整的代码，有什么问题可以评论区留言，我看到之后会回复
html：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas人群流动模拟动画DEMO演示</title>
<link rel="stylesheet" href="login2/style.css">
</head>
<body>
<div class="container">
<canvas id="canvas"></canvas>
</div>
<script src="login2/gsap.min.js"></script>
<script src="login2/script.js"></script>
<style>
*{
margin : 0;
padding : 0;
}
.container{
z-index: 1;
position : absolute;
width:100%;
height:99.6%;
}
</style>
</body>
</html>
style.css:
html, body {
height: 100%;
}
body {
margin: 0;
}
#canvas {
width: 100%;
height: 100%;
}
gsap.min.js:GSAP.MIN.JS: DOWNLOAD – CDNPKG
这不是我小气，不给你们源文件，是因为这个就算是压缩的js文件，一万多个词，而且我已经复制下来了，但csdn说我文字太长了，要分文章发，所以我就把代码删了，把下载地址发你们了
如果打不开，额....，那你们就在网上搜一搜，如果懒得找，也可以后台找我
script.js:
console.clear();
console.log('lsakdfalskjdflnksd');
const config = {
src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/open-peeps-sheet.png',
rows: 15,
cols: 7 };
// UTILS
const randomRange = (min, max) => min + Math.random() * (max - min);
const randomIndex = array => randomRange(0, array.length) | 0;
const removeFromArray = (array, i) => array.splice(i, 1)[0];
const removeItemFromArray = (array, item) => removeFromArray(array, array.indexOf(item));
const removeRandomFromArray = array => removeFromArray(array, randomIndex(array));
const getRandomFromArray = (array) =>
array[randomIndex(array) | 0];
// TWEEN FACTORIES
const resetPeep = ({ stage, peep }) => {
const direction = Math.random() > 0.5 ? 1 : -1;
// using an ease function to skew random to lower values to help hide that peeps have no legs
const offsetY = 100 - 250 * gsap.parseEase('power2.in')(Math.random());
const startY = stage.height - peep.height + offsetY;
let startX;
let endX;
if (direction === 1) {
startX = -peep.width;
endX = stage.width;
peep.scaleX = 1;
} else {
startX = stage.width + peep.width;
endX = 0;
peep.scaleX = -1;
}
peep.x = startX;
peep.y = startY;
peep.anchorY = startY;
return {
startX,
startY,
endX };
};
const normalWalk = ({ peep, props }) => {
const {
startX,
startY,
endX } =
props;
const xDuration = 10;
const yDuration = 0.25;
const tl = gsap.timeline();
tl.timeScale(randomRange(0.5, 1.5));
tl.to(peep, {
duration: xDuration,
x: endX,
ease: 'none' },
0);
tl.to(peep, {
duration: yDuration,
repeat: xDuration / yDuration,
yoyo: true,
y: startY - 10 },
0);
return tl;
};
const walks = [
normalWalk];
// CLASSES
class Peep {
constructor({
image,
rect })
{
this.image = image;
this.setRect(rect);
this.x = 0;
this.y = 0;
this.anchorY = 0;
this.scaleX = 1;
this.walk = null;
}
setRect(rect) {
this.rect = rect;
this.width = rect[2];
this.height = rect[3];
this.drawArgs = [
this.image,
...rect,
0, 0, this.width, this.height];
}
render(ctx) {
ctx.save();
ctx.translate(this.x, this.y);
ctx.scale(this.scaleX, 1);
ctx.drawImage(...this.drawArgs);
ctx.restore();
}}
// MAIN
const img = document.createElement('img');
img.onload = init;
img.src = config.src;
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const stage = {
width: 0,
height: 0 };
const allPeeps = [];
const availablePeeps = [];
const crowd = [];
function init() {
createPeeps();
// resize also (re)populates the stage
resize();
gsap.ticker.add(render);
window.addEventListener('resize', resize);
}
function createPeeps() {
const {
rows,
cols } =
config;
const {
naturalWidth: width,
naturalHeight: height } =
img;
const total = rows * cols;
const rectWidth = width / rows;
const rectHeight = height / cols;
for (let i = 0; i < total; i++) {
allPeeps.push(new Peep({
image: img,
rect: [
i % rows * rectWidth,
(i / rows | 0) * rectHeight,
rectWidth,
rectHeight] }));
}
}
function resize() {
stage.width = canvas.clientWidth;
stage.height = canvas.clientHeight;
canvas.width = stage.width * devicePixelRatio;
canvas.height = stage.height * devicePixelRatio;
crowd.forEach(peep => {
peep.walk.kill();
});
crowd.length = 0;
availablePeeps.length = 0;
availablePeeps.push(...allPeeps);
initCrowd();
}
function initCrowd() {
while (availablePeeps.length) {
// setting random tween progress spreads the peeps out
addPeepToCrowd().walk.progress(Math.random());
}
}
function addPeepToCrowd() {
const peep = removeRandomFromArray(availablePeeps);
const walk = getRandomFromArray(walks)({
peep,
props: resetPeep({
peep,
stage }) }).
eventCallback('onComplete', () => {
removePeepFromCrowd(peep);
addPeepToCrowd();
});
peep.walk = walk;
crowd.push(peep);
crowd.sort((a, b) => a.anchorY - b.anchorY);
return peep;
}
function removePeepFromCrowd(peep) {
removeItemFromArray(crowd, peep);
availablePeeps.push(peep);
}
function render() {
canvas.width = canvas.width;
ctx.save();
ctx.scale(devicePixelRatio, devicePixelRatio);
crowd.forEach(peep => {
peep.render(ctx);
});
ctx.restore();
}
第三个（旋转星球页面）
具体代码如下：都是完整的代码，有什么问题可以评论区留言，我看到之后会回复，这个代码稍微多
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas 3D天体运行动画DEMO演示</title>
<link rel="stylesheet" href="login3/css/style.css">
</head>
<body>
<div style="text-align:center;clear:both">
</div>
<div id="container"></div>
<script src="login3/js/three.min.js"></script>
<script src="login3/js/CopyShader.js"></script>
<script src="login3/js/EffectComposer.js"></script>
<script src="login3/js/FilmPass.js"></script>
<script src="login3/js/FilmShader.js"></script>
<script src="login3/js/ShaderPass.js"></script>
<script src="login3/js/RenderPass.js"></script>
<script src="login3/js/index.js"></script>
<style>
*{
margin : 0;
padding : 0;
}
canvas{
z-index: 1;
position : absolute;
width:100%;
height:100%;
}
</style>
</body>
</html>
style.css:
* {
margin: 0;
padding: 0;
outline: 0;
}
html, body {
width: 100%;
height: 100%;
background:#000;
}
#container {
width: 100%;
height: 100%;
}
three.min.js: three.js/three.min.js at dev · mrdoob/three.js (github.com)
这不是我小气，不给你们源文件，是因为这个就算是压缩的js文件，但也有八千多行代码，放在md文件里面直接有八万个词，我加载md都卡，而且我已经复制下来了，但csdn说我文字太长了，要分文章发，所以我就把代码删了，把下载地址发你们了，在github上面了
如果打不开github，额....，那你们就在网上搜一搜，应该有不用打开github就可以下载的，如果懒得找，也可以后台
CopyShader.js：
/**
* @author alteredq / http://alteredqualia.com/
*
* Full-screen textured quad shader
*/
THREE.CopyShader = {
uniforms: {
"tDiffuse": { value: null },
"opacity": { value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"uniform float opacity;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
"vec4 texel = texture2D( tDiffuse, vUv );",
"gl_FragColor = opacity * texel;",
"}"
].join( "\n" )
};
EffectComposer.js:
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.EffectComposer = function ( renderer, renderTarget ) {
this.renderer = renderer;
if ( renderTarget === undefined ) {
var parameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: false
};
var size = renderer.getDrawingBufferSize();
renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );
renderTarget.texture.name = 'EffectComposer.rt1';
}
this.renderTarget1 = renderTarget;
this.renderTarget2 = renderTarget.clone();
this.renderTarget2.texture.name = 'EffectComposer.rt2';
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
this.passes = [];
// dependencies
if ( THREE.CopyShader === undefined ) {
console.error( 'THREE.EffectComposer relies on THREE.CopyShader' );
}
if ( THREE.ShaderPass === undefined ) {
console.error( 'THREE.EffectComposer relies on THREE.ShaderPass' );
}
this.copyPass = new THREE.ShaderPass( THREE.CopyShader );
};
Object.assign( THREE.EffectComposer.prototype, {
swapBuffers: function() {
var tmp = this.readBuffer;
this.readBuffer = this.writeBuffer;
this.writeBuffer = tmp;
},
addPass: function ( pass ) {
this.passes.push( pass );
var size = this.renderer.getDrawingBufferSize();
pass.setSize( size.width, size.height );
},
insertPass: function ( pass, index ) {
this.passes.splice( index, 0, pass );
},
render: function ( delta ) {
var maskActive = false;
var pass, i, il = this.passes.length;
for ( i = 0; i < il; i ++ ) {
pass = this.passes[ i ];
if ( pass.enabled === false ) continue;
pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );
if ( pass.needsSwap ) {
if ( maskActive ) {
var context = this.renderer.context;
context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );
context.stencilFunc( context.EQUAL, 1, 0xffffffff );
}
this.swapBuffers();
}
if ( THREE.MaskPass !== undefined ) {
if ( pass instanceof THREE.MaskPass ) {
maskActive = true;
} else if ( pass instanceof THREE.ClearMaskPass ) {
maskActive = false;
}
}
}
},
reset: function ( renderTarget ) {
if ( renderTarget === undefined ) {
var size = this.renderer.getDrawingBufferSize();
renderTarget = this.renderTarget1.clone();
renderTarget.setSize( size.width, size.height );
}
this.renderTarget1.dispose();
this.renderTarget2.dispose();
this.renderTarget1 = renderTarget;
this.renderTarget2 = renderTarget.clone();
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
},
setSize: function ( width, height ) {
this.renderTarget1.setSize( width, height );
this.renderTarget2.setSize( width, height );
for ( var i = 0; i < this.passes.length; i ++ ) {
this.passes[i].setSize( width, height );
}
}
} );
THREE.Pass = function () {
// if set to true, the pass is processed by the composer
this.enabled = true;
// if set to true, the pass indicates to swap read and write buffer after rendering
this.needsSwap = true;
// if set to true, the pass clears its buffer before rendering
this.clear = false;
// if set to true, the result of the pass is rendered to screen
this.renderToScreen = false;
};
Object.assign( THREE.Pass.prototype, {
setSize: function( width, height ) {},
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
console.error( 'THREE.Pass: .render() must be implemented in derived pass.' );
}
} );
FilmPass.js:
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.FilmPass = function ( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {
THREE.Pass.call( this );
if ( THREE.FilmShader === undefined )
console.error( "THREE.FilmPass relies on THREE.FilmShader" );
var shader = THREE.FilmShader;
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
this.material = new THREE.ShaderMaterial( {
uniforms: this.uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
} );
if ( grayscale !== undefined ) this.uniforms.grayscale.value = grayscale;
if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
this.scene = new THREE.Scene();
this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
this.quad.frustumCulled = false; // Avoid getting clipped
this.scene.add( this.quad );
};
THREE.FilmPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.FilmPass,
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
this.uniforms[ "tDiffuse" ].value = readBuffer.texture;
this.uniforms[ "time" ].value += delta;
this.quad.material = this.material;
if ( this.renderToScreen ) {
renderer.render( this.scene, this.camera );
} else {
renderer.render( this.scene, this.camera, writeBuffer, this.clear );
}
}
} );
FilmShader.js:
/**
* @author alteredq / http://alteredqualia.com/
*
* Film grain & scanlines shader
*
* - ported from HLSL to WebGL / GLSL
* http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
*
* Screen Space Static Postprocessor
*
* Produces an analogue noise overlay similar to a film grain / TV static
*
* Original implementation and noise algorithm
* Pat 'Hawthorne' Shearon
*
* Optimized scanlines + noise version with intensity scaling
* Georg 'Leviathan' Steinrohder
*
* This version is provided under a Creative Commons Attribution 3.0 License
* http://creativecommons.org/licenses/by/3.0/
*/
THREE.FilmShader = {
uniforms: {
"tDiffuse": { value: null },
"time": { value: 0.0 },
"nIntensity": { value: 0.5 },
"sIntensity": { value: 0.05 },
"sCount": { value: 4096 },
"grayscale": { value: 1 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"#include <common>",
// control parameter
"uniform float time;",
"uniform bool grayscale;",
// noise effect intensity value (0 = no effect, 1 = full effect)
"uniform float nIntensity;",
// scanlines effect intensity value (0 = no effect, 1 = full effect)
"uniform float sIntensity;",
// scanlines effect count value (0 = no effect, 4096 = full effect)
"uniform float sCount;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
// sample the source
"vec4 cTextureScreen = texture2D( tDiffuse, vUv );",
// make some noise
"float dx = rand( vUv + time );",
// add noise
"vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx, 0.0, 1.0 );",
// get us a sine and cosine
"vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );",
// add scanlines
"cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;",
// interpolate between source and result by intensity
"cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );",
// convert to grayscale if desired
"if( grayscale ) {",
"cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );",
"}",
"gl_FragColor = vec4( cResult, cTextureScreen.a );",
"}"
].join( "\n" )
};
ShaderPass.js:
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.ShaderPass = function ( shader, textureID ) {
THREE.Pass.call( this );
this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";
if ( shader instanceof THREE.ShaderMaterial ) {
this.uniforms = shader.uniforms;
this.material = shader;
} else if ( shader ) {
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
this.material = new THREE.ShaderMaterial( {
defines: shader.defines || {},
uniforms: this.uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
} );
}
this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
this.scene = new THREE.Scene();
this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
this.quad.frustumCulled = false; // Avoid getting clipped
this.scene.add( this.quad );
};
THREE.ShaderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.ShaderPass,
render: function( renderer, writeBuffer, readBuffer, delta, maskActive ) {
if ( this.uniforms[ this.textureID ] ) {
this.uniforms[ this.textureID ].value = readBuffer.texture;
}
this.quad.material = this.material;
if ( this.renderToScreen ) {
renderer.render( this.scene, this.camera );
} else {
renderer.render( this.scene, this.camera, writeBuffer, this.clear );
}
}
} );
RenderPass.js:
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
THREE.Pass.call( this );
this.scene = scene;
this.camera = camera;
this.overrideMaterial = overrideMaterial;
this.clearColor = clearColor;
this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;
this.clear = true;
this.clearDepth = false;
this.needsSwap = false;
};
THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.RenderPass,
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
var oldAutoClear = renderer.autoClear;
renderer.autoClear = false;
this.scene.overrideMaterial = this.overrideMaterial;
var oldClearColor, oldClearAlpha;
if ( this.clearColor ) {
oldClearColor = renderer.getClearColor().getHex();
oldClearAlpha = renderer.getClearAlpha();
renderer.setClearColor( this.clearColor, this.clearAlpha );
}
if ( this.clearDepth ) {
renderer.clearDepth();
}
renderer.render( this.scene, this.camera, this.renderToScreen ? null : readBuffer, this.clear );
if ( this.clearColor ) {
renderer.setClearColor( oldClearColor, oldClearAlpha );
}
this.scene.overrideMaterial = null;
renderer.autoClear = oldAutoClear;
}
} );
index.js:
var container = document.getElementById("container");
var width = container.clientWidth;
var height = container.clientHeight;
var aspect = width / height;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, aspect, 0.1, 1000);
camera.position.z = 500
system = new THREE.Group(); // planetary system
scene.add(
new THREE.AmbientLight(0xFFFFFF, 0.2)
);
var light = new THREE.DirectionalLight(0xFFFFFF, 2.5);
light.position.set(1500, 2500, 0);
scene.add(light);
var material = new THREE.MeshLambertMaterial({
color: 0x0C2D4D
});
var planet = new THREE.Mesh(
new THREE.IcosahedronGeometry(100, 3),
material
);
for (var i = 0; i < planet.geometry.vertices.length; i++)
planet.geometry.vertices[i].multiplyScalar(
Math.random() * 0.05 + 0.95
);
planet.geometry.computeFlatVertexNormals();
system.add(planet);
var asteroids = new THREE.Group();
for (var p = 0; p < Math.PI * 2; p = p + Math.random() * 0.15) {
var asteroid = new THREE.Mesh(
new THREE.IcosahedronGeometry(8, 0),
material
);
var size = Math.random() * 0.5;
for (var i = 0; i < asteroid.geometry.vertices.length; i++)
asteroid.geometry.vertices[i].multiplyScalar(
Math.random() * 0.5 + size
);
rand = Math.random() * 60 - 30;
asteroid.position.set(200 * Math.sin(p) + rand, rand, 200 * Math.cos(p) + rand);
asteroid.geometry.computeFlatVertexNormals();
asteroids.add(asteroid);
}
system.add(asteroids);
system.rotation.x = 0.1;
system.rotation.y = -.3;
system.rotation.z = -0.4;
scene.add(system);
for (i = 0; i < 10; i++) {
particles = new THREE.Points(
new THREE.Geometry(),
new THREE.PointsMaterial({
size: Math.random() * 5
})
);
for (j = 0; j < 20; j++) {
var vertex = new THREE.Vector3();
vertex.x = Math.random() * width * 1.1 - width * 1.1 / 2;
vertex.y = Math.random() * height * 1.1 - height * 1.1 / 2;
vertex.z = -500;
particles.geometry.vertices.push(vertex);
particles.material.color.setScalar(Math.random() * 0.4 + 0.2);
}
scene.add(particles);
}
function render() {
requestAnimationFrame(render);
planet.rotation.y += 0.001;
planet.rotation.z -= 0.0005;
asteroids.rotation.y += 0.003;
renderer.render(scene, camera);
}
render();
登录用毛玻璃特效做了处理
毛玻璃，这个是我照着改的，参考文章放在下面
参考文章：纯CSS 毛玻璃效果
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/74717.html
