three+webgl实现三维立体网格布料上下波动动画效果代码
代码语言:html
所属分类:三维
代码描述:three+webgl实现三维立体网格布料上下波动动画效果代码
代码标签: three webgl 三维 立体 网格 布料 上下 波动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/", "OrbitControls": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/controls/OrbitControls.js", "EffectComposer":"//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/postprocessing/EffectComposer.js" } } </script> <style> *{ padding:0; margin:0; } canvas{ display:block; } </style> </head> <body> <script type="x-shader/x-vertex" id="vertexshader"> // attribute float aOrder; uniform float uTime; varying vec2 vUv; varying float vOrder; #define PI 3.14159265359 void main() { vec4 modelPosition = modelMatrix * vec4(position, 1.0); vec2 dist = vec2(modelPosition.x,modelPosition.z); float radius = sin(uTime*.5); float elevation = 0.7 * sin(-PI * length(dist) * 3. + uTime * 2.7); modelPosition.y += elevation*.1; vec4 viewPosition = viewMatrix * modelPosition; gl_Position = projectionMatrix * viewPosition; vUv = uv; } </script> <script type="x-shader/x-fragment" id="fragment-dot"> varying vec2 vUv; void main() { float strength = 1.- step(.5,(step(.15, mod(vUv.y * 15.15,1.)) + step(.15, mod(vUv.x * 15.15,1.)))); vec3 color = vec3(0.2, 0.5, 1.0); gl_FragColor = vec4(strength * color, strength); } </script> <script type="x-shader/x-fragment" id="fragment-line"> varying vec2 vUv; uniform vec3 uColor; void main() { float strength = 1.-step(.1, mod(vUv.y * 15.1,1.)); // vec3 color = vec3(0.97, 0.00, 1.00); vec3 color = uColor; gl_FragColor = vec4(strength * color, strength); } </script> <script type="x-shader/x-fragment" id="fragment-grid"> varying vec2 vUv; void main() { float strength = 1. - step(.1, mod(vUv.y * 15.1,1.)) * step(.1, mod(vUv.x * 15.1,1.)); vec3 color = vec3(0.3, 0.8, 1.00); gl_FragColor = vec4(strength * color,strength); } </script>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0