three实现三维骷颅头在卡片视觉差异燃烧动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维骷颅头在卡片视觉差异燃烧动画效果代码
代码标签: three 三维 骷颅 头 卡片 视觉 差异 燃烧 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; /* background: black; */ /* text-align: center; */ outline: none; } #world { width: 100%; height: 100vh; background: black; } canvas { left: calc(50% - 325px); position: absolute; } </style> </head> <body > <div id="world"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EffectComposer.110.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RenderPass.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/UnrealBloomPass.110.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OBJLoader.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.108.js"></script> <script > var cardtemplate = "//repo.bfw.wiki/bfwrepo/images/skull/cardtemplate3.png"; var cardtemplateback = "//repo.bfw.wiki/bfwrepo/images/skull/cardtemplateback4.png"; var flower = "//repo.bfw.wiki/bfwrepo/images/skull/flower3.png"; var noise2 = "//repo.bfw.wiki/bfwrepo/images/skull/noise2.png"; var color11 = "//repo.bfw.wiki/bfwrepo/images/skull/color11.png"; var backtexture = "//repo.bfw.wiki/bfwrepo/images/skull/color3.jpg"; var skullmodel = "//repo.bfw.wiki/bfwrepo/obj/skull5.obj"; var voronoi = "//repo.bfw.wiki/bfwrepo/images/skull/rgbnoise2.png"; var scene, sceneRTT, camera, cameraRTT, renderer, container, width = 1301, height = window.innerHeight, frontmaterial, backmaterial, controls, bloomPass, composer, frontcard, backcard; var options = { exposure: 2.8, bloomStrength: 0.8, bloomThreshold: 0, bloomRadius: 1.29, color0: [197, 81, 245], color1: [65, 0, 170], color2: [0, 150, 255], isanimate: false }; var gui = new dat.GUI(); var bloom = gui.addFolder("Bloom"); bloom.add(options, "bloomStrength", 0.0, 5.0).name("bloomStrength").listen(); bloom.add(options, "bloomRadius", 0.1, 2.0).name("bloomRadius").listen(); bloom.open(); var color = gui.addFolder("Colors"); color.addColor(options, "color0").name("Border"); color.addColor(options, "color1").name("Base"); color.addColor(options, "color2").name("Eye"); color.open(); var isanim = gui.addFolder("Animate"); isanim.add(options, "isanimate").name("Animate"); isanim.open(); gui.close(); const vert = ` varying vec2 vUv; varying vec3 camPos; varying vec3 eyeVector; varying vec3 vNormal; void main() { vUv = uv; camPos = cameraPosition; vNormal = normal; vec4 worldPosition = modelViewMatrix * vec4( position, 1.0); eyeVector = normalize(worldPosition.xyz - abs(cameraPosition)); gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `; const fragPlane = ` varying vec2 vUv; uniform sampler2D skullrender; uniform sampler2D cardtemplate; uniform sampler2D backtexture; uniform sampler2D noiseTex; uniform sampler2D color; uniform sampler2D noise; uniform vec4 resolution; varying vec3 camPos; varying vec3 eyeVector; varying vec3 vNormal; float Fresnel(vec3 eyeVector, vec3 worldNormal) { return pow( 1.0 + dot( eyeVector, worldNormal), 1.80 ); } void main() { vec2 uv = gl_FragCoord.xy/resolution.xy ; vec4 temptex = texture2D( cardtemplate, vUv); vec4 skulltex = texture2D( skullrender, uv - 0.5 ); gl_FragColor = temptex; float f = Fresnel(eyeVector, vNormal); vec4 noisetex = texture2D( noise, mod(vUv*2.,1.)); if(gl_FragColor.g >= .5 && gl_FragColor.r < 0.6){ gl_FragColor = f + skulltex; gl_FragColor += noisetex/5.; } else { vec4 bactex = texture2D( backtexture, vUv); float tone = pow(dot(normalize(camPos), normalize(bactex.rgb)), 1.); vec4 colortex = texture2D( color, vec2(tone,0.)); //sparkle code, dont touch this! vec2 uv2 = vUv; vec3 pixeltex = texture2D(noiseTex,mod(uv*5.,1.)).rgb; float iTime = 1.*0.004; uv.y += iTime / 10.0; uv.x -= (sin(iTime/10.0)/2.0); uv2.y += iTime / 14.0; uv2.x += (sin(iTime/10.0)/9.0); float result = 0.0; result += texture2D(noiseTex, mod(uv*4.,1.) * 0.6 + vec2(iTime*-0.003)).r; result *= texture2D(noiseTex, mod(uv2*4.,1.) * 0.9 + vec2(iTime*+0.002)).b; result = pow(result, 10.0); gl_FragColor *= colortex; gl_FragColor += vec4(sin((tone + vUv.x + vUv.y/10.)*10.))/8.; // gl_FragColor += vec4(108.0)*result; } gl_FragColor.a = temptex.a; } `; const fragPlaneback = ` varying vec2 vUv; uniform sampler2D skullrender; uniform sampler2D cardtemplate; uniform sampler2D backtexture; uniform sampler2D noiseTex; uniform sampler2D color; uniform sampler2D noise; uniform vec4 resolution; varying vec3 camPos; varying vec3 eyeVector; varying vec3 vNormal; float Fresnel(vec3 eyeVector, vec3 worldNormal) { return pow( 1.0 + dot( eyeVector, worldNormal), 1.80 ); } void main() { vec2 uv = gl_FragCoord.xy/resolution.xy ; vec4 temptex = texture2D( cardtemplate, vUv); vec4 skulltex = texture2D( skullren.........完整代码请登录后点击上方下载按钮下载查看
网友评论0