three打造一个从天而降的火球燃烧三维效果代码
代码语言:html
所属分类:三维
代码描述:three打造一个从天而降的火球燃烧三维效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } </style> <style type="text/css"> .dg ul { list-style: none; margin: 0; padding: 0; width: 100%; clear: both } .dg.ac { position: fixed; top: 0; left: 0; right: 0; height: 0; z-index: 0 } .dg:not(.ac) .main { overflow: hidden } .dg.main { -webkit-transition: opacity .1s linear; -o-transition: opacity .1s linear; -moz-transition: opacity .1s linear; transition: opacity .1s linear } .dg.main.taller-than-window { overflow-y: auto } .dg.main.taller-than-window .close-button { opacity: 1; margin-top: -1px; border-top: 1px solid #2c2c2c } .dg.main ul.closed .close-button { opacity: 1 !important } .dg.main:hover .close-button,.dg.main .close-button.drag { opacity: 1 } .dg.main .close-button { -webkit-transition: opacity .1s linear; -o-transition: opacity .1s linear; -moz-transition: opacity .1s linear; transition: opacity .1s linear; border: 0; line-height: 19px; height: 20px; cursor: pointer; text-align: center; background-color: #000 } .dg.main .close-button.close-top { position: relative } .dg.main .close-button.close-bottom { position: absolute } .dg.main .close-button:hover { background-color: #111 } .dg.a { float: right; margin-right: 15px; overflow-y: visible } .dg.a.has-save>ul.close-top { margin-top: 0 } .dg.a.has-save>ul.close-bottom { margin-top: 27px } .dg.a.has-save>ul.closed { margin-top: 0 } .dg.a .save-row { top: 0; z-index: 1002 } .dg.a .save-row.close-top { position: relative } .dg.a .save-row.close-bottom { position: fixed } .dg li { -webkit-transition: height .1s ease-out; -o-transition: height .1s ease-out; -moz-transition: height .1s ease-out; transition: height .1s ease-out; -webkit-transition: overflow .1s linear; -o-transition: overflow .1s linear; -moz-transition: overflow .1s linear; transition: overflow .1s linear } .dg li:not(.folder) { cursor: auto; height: 27px; line-height: 27px; padding: 0 4px 0 5px } .dg li.folder { padding: 0; border-left: 4px solid rgba(0,0,0,0) } .dg li.title { cursor: pointer; margin-left: -4px } .dg .closed li:not(.title),.dg .closed ul li,.dg .closed ul li>* { height: 0; overflow: hidden; border: 0 } .dg .cr { clear: both; padding-left: 3px; height: 27px; overflow: hidden } .dg .property-name { cursor: default; float: left; clear: left; width: 40%; overflow: hidden; text-overflow: ellipsis } .dg .c { float: left; width: 60%; position: relative } .dg .c input[type=text] { border: 0; margin-top: 4px; padding: 3px; width: 100%; float: right } .dg .has-slider input[type=text] { width: 30%; margin-left: 0 } .dg .slider { float: left; width: 66%; margin-left: -5px; margin-right: 0; height: 19px; margin-top: 4px } .dg .slider-fg { height: 100% } .dg .c input[type=checkbox] { margin-top: 7px } .dg .c select { margin-top: 5px } .dg .cr.function,.dg .cr.function .property-name,.dg .cr.function *,.dg .cr.boolean,.dg .cr.boolean * { cursor: pointer } .dg .cr.color { overflow: visible } .dg .selector { display: none; position: absolute; margin-left: -9px; margin-top: 23px; z-index: 10 } .dg .c:hover .selector,.dg .selector.drag { display: block } .dg li.save-row { padding: 0 } .dg li.save-row .button { display: inline-block; padding: 0px 6px } .dg.dialogue { background-color: #222; width: 460px; padding: 15px; font-size: 13px; line-height: 15px } #dg-new-constructor { padding: 10px; color: #222; font-family: Monaco,monospace; font-size: 10px; border: 0; resize: none; box-shadow: inset 1px 1px 1px #888; word-wrap: break-word; margin: 12px 0; display: block; width: 440px; overflow-y: scroll; height: 100px; position: relative } #dg-local-explain { display: none; font-size: 11px; line-height: 17px; border-radius: 3px; background-color: #333; padding: 8px; margin-top: 10px } #dg-local-explain code { font-size: 10px } #dat-gui-save-locally { display: none } .dg { color: #eee; font: 11px 'Lucida Grande', sans-serif; text-shadow: 0 -1px 0 #111 } .dg.main::-webkit-scrollbar { width: 5px; background: #1a1a1a } .dg.main::-webkit-scrollbar-corner { height: 0; display: none } .dg.main::-webkit-scrollbar-thumb { border-radius: 5px; background: #676767 } .dg li:not(.folder) { background: #1a1a1a; border-bottom: 1px solid #2c2c2c } .dg li.save-row { line-height: 25px; background: #dad5cb; border: 0 } .dg li.save-row select { margin-left: 5px; width: 108px } .dg li.save-row .button { margin-left: 5px; margin-top: 1px; border-radius: 2px; font-size: 9px; line-height: 7px; padding: 4px 4px 5px 4px; background: #c5bdad; color: #fff; text-shadow: 0 1px 0 #b0a58f; box-shadow: 0 -1px 0 #b0a58f; cursor: pointer } .dg li.save-row .button.gears { background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat; height: 7px; width: 8px } .dg li.save-row .button:hover { background-color: #bab19e; box-shadow: 0 -1px 0 #b0a58f } .dg li.folder { border-bottom: 0 } .dg li.title { padding-left: 16px; background: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.2) } .dg .closed li.title { background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==) } .dg .cr.boolean { border-left: 3px solid #806787 } .dg .cr.color { border-left: 3px solid } .dg .cr.function { border-left: 3px solid #e61d5f } .dg .cr.number { border-left: 3px solid #2FA1D6 } .dg .cr.number input[type=text] { color: #2FA1D6 } .dg .cr.string { border-left: 3px solid #1ed36f } .dg .cr.string input[type=text] { color: #1ed36f } .dg .cr.function:hover,.dg .cr.boolean:hover { background: #111 } .dg .c input[type=text] { background: #303030; outline: none } .dg .c input[type=text]:hover { background: #3c3c3c } .dg .c input[type=text]:focus { background: #494949; color: #fff } .dg .c .slider { background: #303030; cursor: ew-resize } .dg .c .slider-fg { background: #2FA1D6; max-width: 100% } .dg .c .slider:hover { background: #3c3c3c } .dg .c .slider:hover .slider-fg { background: #44abda } </style> <style type="text/css"> .dg ul { list-style: none; margin: 0; padding: 0; width: 100%; clear: both } .dg.ac { position: fixed; top: 0; left: 0; right: 0; height: 0; z-index: 0 } .dg:not(.ac) .main { overflow: hidden } .dg.main { -webkit-transition: opacity .1s linear; -o-transition: opacity .1s linear; -moz-transition: opacity .1s linear; transition: opacity .1s linear } .dg.main.taller-than-window { overflow-y: auto } .dg.main.taller-than-window .close-button { opacity: 1; margin-top: -1px; border-top: 1px solid #2c2c2c } .dg.main ul.closed .close-button { opacity: 1 !important } .dg.main:hover .close-button,.dg.main .close-button.drag { opacity: 1 } .dg.main .close-button { -webkit-transition: opacity .1s linear; -o-transition: opacity .1s linear; -moz-transition: opacity .1s linear; transition: opacity .1s linear; border: 0; line-height: 19px; height: 20px; cursor: pointer; text-align: center; background-color: #000 } .dg.main .close-button.close-top { position: relative } .dg.main .close-button.close-bottom { position: absolute } .dg.main .close-button:hover { background-color: #111 } .dg.a { float: right; margin-right: 15px; overflow-y: visible } .dg.a.has-save>ul.close-top { margin-top: 0 } .dg.a.has-save>ul.close-bottom { margin-top: 27px } .dg.a.has-save>ul.closed { margin-top: 0 } .dg.a .save-row { top: 0; z-index: 1002 } .dg.a .save-row.close-top { position: relative } .dg.a .save-row.close-bottom { position: fixed } .dg li { -webkit-transition: height .1s ease-out; -o-transition: height .1s ease-out; -moz-transition: height .1s ease-out; transition: height .1s ease-out; -webkit-transition: overflow .1s linear; -o-transition: overflow .1s linear; -moz-transition: overflow .1s linear; transition: overflow .1s linear } .dg li:not(.folder) { cursor: auto; height: 27px; line-height: 27px; padding: 0 4px 0 5px } .dg li.folder { padding: 0; border-left: 4px solid rgba(0,0,0,0) } .dg li.title { cursor: pointer; margin-left: -4px } .dg .closed li:not(.title),.dg .closed ul li,.dg .closed ul li>* { height: 0; overflow: hidden; border: 0 } .dg .cr { clear: both; padding-left: 3px; height: 27px; overflow: hidden } .dg .property-name { cursor: default; float: left; clear: left; width: 40%; overflow: hidden; text-overflow: ellipsis } .dg .c { float: left; width: 60%; position: relative } .dg .c input[type=text] { border: 0; margin-top: 4px; padding: 3px; width: 100%; float: right } .dg .has-slider input[type=text] { width: 30%; margin-left: 0 } .dg .slider { float: left; width: 66%; margin-left: -5px; margin-right: 0; height: 19px; margin-top: 4px } .dg .slider-fg { height: 100% } .dg .c input[type=checkbox] { margin-top: 7px } .dg .c select { margin-top: 5px } .dg .cr.function,.dg .cr.function .property-name,.dg .cr.function *,.dg .cr.boolean,.dg .cr.boolean * { cursor: pointer } .dg .cr.color { overflow: visible } .dg .selector { display: none; position: absolute; margin-left: -9px; margin-top: 23px; z-index: 10 } .dg .c:hover .selector,.dg .selector.drag { display: block } .dg li.save-row { padding: 0 } .dg li.save-row .button { display: inline-block; padding: 0px 6px } .dg.dialogue { background-color: #222; width: 460px; padding: 15px; font-size: 13px; line-height: 15px } #dg-new-constructor { padding: 10px; color: #222; font-family: Monaco,monospace; font-size: 10px; border: 0; resize: none; box-shadow: inset 1px 1px 1px #888; word-wrap: break-word; margin: 12px 0; display: block; width: 440px; overflow-y: scroll; height: 100px; position: relative } #dg-local-explain { display: none; font-size: 11px; line-height: 17px; border-radius: 3px; background-color: #333; padding: 8px; margin-top: 10px } #dg-local-explain code { font-size: 10px } #dat-gui-save-locally { display: none } .dg { color: #eee; font: 11px 'Lucida Grande', sans-serif; text-shadow: 0 -1px 0 #111 } .dg.main::-webkit-scrollbar { width: 5px; background: #1a1a1a } .dg.main::-webkit-scrollbar-corner { height: 0; display: none } .dg.main::-webkit-scrollbar-thumb { border-radius: 5px; background: #676767 } .dg li:not(.folder) { background: #1a1a1a; border-bottom: 1px solid #2c2c2c } .dg li.save-row { line-height: 25px; background: #dad5cb; border: 0 } .dg li.save-row select { margin-left: 5px; width: 108px } .dg li.save-row .button { margin-left: 5px; margin-top: 1px; border-radius: 2px; font-size: 9px; line-height: 7px; padding: 4px 4px 5px 4px; background: #c5bdad; color: #fff; text-shadow: 0 1px 0 #b0a58f; box-shadow: 0 -1px 0 #b0a58f; cursor: pointer } .dg li.save-row .button.gears { background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat; height: 7px; width: 8px } .dg li.save-row .button:hover { background-color: #bab19e; box-shadow: 0 -1px 0 #b0a58f } .dg li.folder { border-bottom: 0 } .dg li.title { padding-left: 16px; background: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.2) } .dg .closed li.title { background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==) } .dg .cr.boolean { border-left: 3px solid #806787 } .dg .cr.color { border-left: 3px solid } .dg .cr.function { border-left: 3px solid #e61d5f } .dg .cr.number { border-left: 3px solid #2FA1D6 } .dg .cr.number input[type=text] { color: #2FA1D6 } .dg .cr.string { border-left: 3px solid #1ed36f } .dg .cr.string input[type=text] { color: #1ed36f } .dg .cr.function:hover,.dg .cr.boolean:hover { background: #111 } .dg .c input[type=text] { background: #303030; outline: none } .dg .c input[type=text]:hover { background: #3c3c3c } .dg .c input[type=text]:focus { background: #494949; color: #fff } .dg .c .slider { background: #303030; cursor: ew-resize } .dg .c .slider-fg { background: #2FA1D6; max-width: 100% } .dg .c .slider:hover { background: #3c3c3c } .dg .c .slider:hover .slider-fg { background: #44abda } </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="module"> import { EffectComposer } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/EffectComposer.js"; import { RenderPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/RenderPass.js"; import { UnrealBloomPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/UnrealBloomPass.js"; import { ShaderPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/ShaderPass.js"; import { OrbitControls } from "https://unpkg.com/three@0.120.0/examples/jsm/controls/OrbitControls.js"; const ENTIRE_SCENE = 0, BLOOM_SCENE = 1; const bloomLayer = new THREE.Layers(); bloomLayer.set(BLOOM_SCENE); const materials = {}; const darkMaterial = new THREE.MeshBasicMaterial({ color: "black" }); const vert = ` varying vec3 vNormal; varying vec3 camPos; varying vec2 vUv; void main() { vNormal = normal; vUv = uv; camPos = cameraPosition; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `; const frag = ` #define NUM_OCTAVES 5 #define M_PI 3.1415926535897932384626433832795 uniform vec4 resolution; varying vec3 vNormal; uniform sampler2D perlinnoise; uniform sampler2D sparknoise; uniform float time; uniform vec3 color0; uniform vec3 color1; uniform vec3 color2; uniform vec3 color3; uniform vec3 color4; uniform vec3 color5; varying vec3 camPos; varying vec2 vUv; float setOpacity(float r, float g, float b, float tonethreshold) { float tone = (r + g + b) / 3.0; float alpha = 1.0; if(tone<tonethreshold) { alpha = 0.0; } return alpha; } vec3 rgbcol(vec3 col) { return vec3(col.r/255.0,col.g/255.0,col.b/255.0); } vec2 rotate(vec2 v, float a) { float s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c); return m * v; } vec2 UnityPolarCoordinates (vec2 UV, vec2 Center, float RadialScale, float LengthScale){ //https://twitter.com/Cyanilux/status/1123950519133908995/photo/1 vec2 delta = UV - Center; float radius = length(delta) * 2. * RadialScale; float angle = atan(delta.x, delta.y) * 1.0/6.28 * LengthScale; return vec2(radius, angle); } void main() { vec2 olduv = gl_FragCoord.xy/resolution.xy ; vec2 uv = vUv ; vec2 imguv = uv; float scale = 1.; olduv *= 0.5 + time; olduv.y = olduv.y ; vec2 p = olduv*scale; vec4 txt = texture2D(perlinnoise, olduv); float gradient = dot(normalize( -camPos ), normalize( vNormal )); float pct = distance(vUv,vec2(0.5)); vec3 rgbcolor0 = rgbcol(color0); vec3 rgbcolor1 = rgbcol(color1); vec3 rgbcolor2 = rgbcol(color2); vec3 rgbcolor5 = rgbcol(color5); // set solid background float y = smoothstep(0.16,0.525,pct); vec3 backcolor = mix(rgbcolor0, rgbcolor5, y); gl_FragColor = vec4(backcolor,1.); // set polar coords vec2 center = vec2(0.5); vec2 cor = UnityPolarCoordinates(vec2(vUv.x,vUv.y), center, 1., 1.); // set textures vec2 newUv = vec2(cor.x + time,cor.x*0.2+cor.y); vec3 noisetex = texture2D(perlinnoise,mod(newUv,1.)).rgb; vec3 noisetex2 = texture2D(sparknoise,mod(newUv,1.)).rgb; // set textures tones float tone0 = 1. - smoothstep(0.3,0.6,noisetex.r); float tone1 = smoothstep(0.3,0.6,noisetex2.r); // set opacity for each tone float opacity0 = setOpacity(tone0,tone0,tone0,.29); float opacity1 = setOpacity(tone1,tone1,tone1,.49); //set final render if(opacity1>0.0){ gl_FragColor = vec4(rgbcolor2,0.)*vec4(opacity1); } else if(opacity0>0.0){ gl_FragColor = vec4(rgbcolor1,0.)*vec4(opacity0); } } `; const vertcylinder = ` varying vec2 vUv; void main() { vUv = uv; vec3 pos = vec3(position.x/1.,position.y,position.z/1.); if(pos.y >= 1.87){ pos = vec3(position.x*(sin((position.y - 0.6)*1.27)-0.16),position.y,position.z*(sin((position.y - 0.6)*1.27)-0.16)); } else{ pos = vec3(position.x*(sin((position.y/2. - .01)*.11)+0.75),position.y,position.z*(sin((position.y/2. - .01)*.11)+0.75)); } gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 ); } `; const fragcylinder = ` varying vec2 vUv; uniform sampler2D perlinnoise; uniform vec3 color4; uniform float time; varying vec3 vNormal; vec3 rgbcol(vec3 col) { return vec3(col.r/255.0,col.g/255.0,col.b/255.0); } void main() { vec3 noisetex = texture2D(perlinnoise,mod(1.*vec2(vUv.y-time*2.,vUv.x + time*1.),1.)).rgb; gl_FragColor = vec4(noisetex.r); if(gl_FragColor.r >= 0.5){ gl_FragColor = vec4(rgbcol(color4),gl_FragColor.r); }else{ gl_FragColor = vec4(0.); } gl_FragColor *= vec4(sin(vUv.y) - 0.1); gl_FragColor *= vec4(smoothstep(0.3,0.628,vUv.y)); } `; const vertflame = ` varying vec2 vUv; varying vec3 camPos; varying vec3 vNormal; varying vec3 nois; uniform sampler2D noise; uniform float time; void main() { vUv = uv; camPos = cameraPosition; vNormal = normal; vec3 pos = vec3(position.x/1.,position.y,pos.........完整代码请登录后点击上方下载按钮下载查看
网友评论0