用html做龙卷风特效,利用HTML5实现Canvas龙卷风特效

特效描述：利用HTML5实现 Canvas 龙卷风特效。利用HTML5实现Canvas龙卷风特效

代码结构

1. 引入JS

2. HTML代码

const vertexShader = `

varying vec2 vUv;

void main() {

vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

}

`;

const fragmentShader = `

varying vec2 vUv;

uniform float uTime;

void main() {

float len = 0.15;

float falloff = 0.1;

float p = mod(uTime * 0.25, 1.0);

float alpha = smoothstep(len, len - falloff, abs(vUv.x - p));

float width = smoothstep(len * 2.0, 0.0, abs(vUv.x - p)) * 0.5;

alpha *= smoothstep(width, width - 0.3, abs(vUv.y - 0.5));

alpha *= smoothstep(0.5, 0.3, abs(p - 0.5) * (1.0 + len));

gl_FragColor.rgb = vec3(1.0);

gl_FragColor.a = alpha;

// gl_FragColor.a += 0.1;

}

`;

{

let _renderer, _scene, _camera, _controls;

let _geometry;

let _shaders = [];

window.onload = init;

function init() {

initWorld();

initScene();