webgl实现三维奶酪文字动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：webgl实现三维奶酪文字动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en"><head>

  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
  --purple: #e8cbf9;
  --grey: #2b2b2b;
  --seagreen: #61a69f;
  --beige: #c6a49b;
  --lightgrey: #c8c3c2;
  --lightbeige: #e0c6bf;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--lightbeige);
  transition: background 250ms ease-in;
  font-size: 16px;
  font-family: Arial;
}

#scene-container {
  position: absolute;
}

#credits {
  position: absolute;
  bottom: 0;
  right: 0;
  text-transform: none;
  text-decoration: none;
  color: black;
  padding: 0.35rem 0.5rem;
  margin: 0.75rem 0.75rem;
  font-size: 0.9rem;
  border: 1.5px solid black;
  transition: background 200ms ease-in;
  border-radius: 0.2rem;
  opacity: 0;
}

#credits:hover {
  background: rgba(255, 235, 189, 0.8);
  background: #fff1bc;
}


a[title]:hover::after {
  background: purple;
}

#svg-doodle {
  position: absolute;
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  max-height: 100vh;
  display: block;
  margin: auto;
  z-index: -1;
  opacity: 0;
  opacity: 1;
}

@keyframes fadeIn {
  
  0% { opacity: 0.0; }
  85% { opacity: 0.0; }
  100% { opacity: 1; }

}
</style>



</head>

<body style="background: rgb(193, 181, 194);">
  <div id="scene-container">
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg-doodle" version="1.1" viewBox="0 0 456.06533 219.00801" height="219.00801mm" width="456.06534mm">
  <defs id="defs2">
    <filter height="2.7376001" y="-0.86879998" width="2.7376001" x="-0.86879998" id="filter5140" style="color-interpolation-filters:sRGB">
      <feGaussianBlur id="feGaussianBlur5142" stdDeviation="28.460096"></feGaussianBlur>
    </filter>
    <filter height="2.7376001" y="-0.86879998" width="2.7376001" x="-0.86879998" id="filter5140-4" style="color-interpolation-filters:sRGB">
      <feGaussianBlur id="feGaussianBlur5142-8" stdDeviation="28.460096"></feGaussianBlur>
    </filter>
    <filter height="2.7376001" y="-0.86879998" width="2.7376001" x="-0.86879998" id="filter5140-4-9" style="color-interpolation-filters:sRGB">
      <feGaussianBlur id="feGaussianBlur5142-8-6" stdDeviation="28.460096"></feGaussianBlur>
    </filter>
  </defs>
  <g transform="translate(454.504,-15.496001)" id="layer1">
    <circle r="32" cy="145" cx="-300" id="airbrush-2" style="opacity: 1; fill: rgb(154, 87, 221); fill-opacity: 1; stroke: none; filter: url(&quot;#filter5140&quot;);"></circle>
    <circle r="40" cy="130" cx="-355" id="airbrush-1" style="opacity: 0.85; fill: rgb(87, 221, 202); fill-opacity: 1; filter: url(&quot;#filter5140-4&quot;);"></circle>
  </g>
  <circle r="32" cy="160" cx="200" id="airbrush-3" style="opacity: 1; fill: rgb(154, 87, 221); fill-opacity: 1; stroke: none; filter: url(&quot;#filter5140-4-9&quot;);" transform="matrix(0.58395083,0,0,0.58395083,200.82047,63.462674)"></circle>
  <path id="path1993" d="m 400.06744,100.66194 c 72.92885,-31.602499 -11.93219,103.27126 -44.7406,81.399 -9.80758,-6.53838 13.42289,-46.32744 18.47355,-41.2768 4.85693,4.85693 -28.85382,23.21405 -34.06058,23.95787 -9.87208,1.41029 10.98899,-23.36022 12.70056,-21.64867 1.93656,1.93657 -20.87221,6.57975 -21.93732,6.63892 -15.17544,0.84308 -22.12464,-5.07354 -32.3287,-14.1438" style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.75"></path>
  <path id="path2143" d="m 69.804124,120.62909 c -12.150349,23.79809 -6.270389,34.44835 3.673901,37.96366 C 115.8576,173.57393 210.21966,119.996 252.27455,99.810323 c 40.33216,-19.358794 -29.75854,45.849307 33.0651,23.676257 8.81687,-3.11183 16.9326,-6.52635 24.90089,-11.42992" style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.75"></path>
  <path id="path2165" d="m 246.5596,29.189776 c -32.05941,5.699941 -72.91125,19.315369 -115.11558,48.168929 -4.56841,3.123254 -27.79632,22.404173 -21.22698,30.615845 6.58259,8.22823 43.65266,-14.273574 45.95878,-15.483019 17.69104,-9.27807 12.56985,-11.733918 12.38642,-11.747574 -21.01766,-1.56474 -104.852544,85.042733 -35.51438,58.374203" style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.75"></path>
</svg>

<a id="credits" ></a>

<!-- MATCAP VERTEX SHADER --> 
<script type="x-shader/x-vertex" id="vs-matcap">

  varying vec2 vN;

	void main() {

		vec3 e = normalize( vec3( modelViewMatrix * vec4( position, 1.0 ) ) );
		vec3 n = normalize( normalMatrix * normal );

		vec3 r = reflect( e, n );
		float m = 2. * sqrt( pow( r.x, 2. ) + pow( r.y, 2. ) + pow( r.z + 1., 2. ) );
		vN = r.xy / m + .5;

		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1. );

	}

</script>

<!-- MATCAP FRAGMENT SHADER --> 
<script type="x-shader/x-fragment" id="fs-matcap">

  uniform sampler2D tMatCap;

	varying vec2 vN;

	void main() {
		
		vec3 base = texture2D( tMatCap, vN ).rgb;
		gl_FragColor = vec4( base, 1.0 );

	}
	
</script>

<script>
  
  function getExportedPoints() {
    
    let curvePoints = [[-8.070780754089355, 2.9191834926605225, 4.158595561981201] ,
[-9.49313735961914, 2.7790331840515137, 3.255053997039795] ,
[-10.603548049926758, 2.3837854862213135, 2.483524799346924] ,
[-11.422452926635742, 1.7956944704055786, 1.8428080081939697] ,
[-11.970760345458984, 1.0710524320602417, 1.3302218914031982] ,
[-12.269862174987793, 0.26018792390823364, 0.9415957927703857] ,
[-12.34162425994873, -0.5925332307815552, 0.6712753176689148] ,
[-12.208386421203613, -1.4487091302871704, 0.5121195316314697] ,
[-11.892966270446777, -2.2759008407592773, 0.45550215244293213] ,
[-11.418651580810547, -3.0476317405700684, 0.49131134152412415] ,
[-10.809218406677246, -3.743389844894409, 0.6079492568969727] ,
[-10.088897705078125, -4.348624229431152, 0.7923325896263123] ,
[-9.282422065734863, -4.854750633239746, 1.0298926830291748] ,
[-8.414978981018066, -5.259143829345703, 1.304574728012085] ,
[-7.511950969696045, -5.5646514892578125, 1.5991381406784058] ,
[-6.597087383270264, -5.776509761810303, 1.8970268964767456] ,
[-5.691351413726807, -5.900374889373779, 2.1835649013519287] ,
[-4.812859058380127, -5.942228317260742, 2.4460158348083496] ,
[-3.9768805503845215, -5.9083757400512695, 2.6735804080963135] ,
[-3.19584321975708, -5.805451393127441, 2.857398748397827] ,
[-2.4793272018432617, -5.640408992767334, 2.9905478954315186] ,
[-1.8340680599212646, -5.420531272888184, 3.0680437088012695] ,
[-1.2639561891555786, -5.153426170349121, 3.086841583251953] ,
[-0.7700360417366028, -4.847024917602539, 3.045832872390747] ,
[-0.3505084216594696, -4.509585857391357, 2.9458491802215576] ,
[-0.0007269755005836487, -4.1496901512146, 2.789658784866333] ,
[0.28679361939430237, -3.7762460708618164, 2.58196759223938] ,
[0.5217897891998291, -3.3982667922973633, 2.3290679454803467] ,
[0.7140316367149353, -3.0240674018859863, 2.0375349521636963] ,
[0.8724225759506226, -2.660937786102295, 1.7136975526809692] ,
[1.0049803256988525, -2.315131425857544, 1.363624930381775] ,
[1.118836760520935, -1.9918698072433472, 0.9931286573410034] ,
[1.220237374305725, -1.695339322090149, 0.6077611446380615] ,
[1.314542531967163, -1.4286935329437256, 0.2128167450428009] ,
[1.4062268733978271, -1.1940512657165527, -0.18666867911815643] ,
[1.498878836631775, -0.9924982190132141, -0.585918128490448] ,
[1.5952012538909912, -0.824085533618927, -0.9804126024246216] ,
[1.69701087474823, -0.6878307461738586, -1.3658922910690308] ,
[1.8052394390106201, -0.5817174911499023, -1.7383556365966797] ,
[1.9199377298355103, -0.5027035474777222, -2.0940608978271484] ,
[2.0405075550079346, -0.4470594525337219, -2.429584503173828] ,
[2.1662421226501465, -0.4111606478691101, -2.741960048675537] ,
[2.296466112136841, -0.39168739318847656, -3.028712034225464] ,
[2.430529832839966, -0.3856259286403656, -3.287855863571167] ,
[2.5678162574768066, -0.39026859402656555, -3.517897367477417] ,
[2.707735061645508, -0.40321364998817444, -3.717833995819092] ,
[2.849729299545288, -0.42236563563346863, -3.8871560096740723] ,
[2.9932668209075928, -0.44593483209609985, -4.02584171295166] ,
[3.1378488540649414, -0.4724380075931549, -4.134364128112793] ,
[3.2830042839050293, -0.5006974339485168, -4.213683605194092] ,
[3.4282915592193604, -0.5298417806625366, -4.265255451202393] ,
[3.5732996463775635, -0.5593059062957764, -4.291024208068848] ,
[3.7176458835601807, -0.5888246893882751, -4.293412208557129] ,
[3.8609745502471924, -0.618326723575592, -4.275086879730225] ,
[4.002954483032227, -0.6477744579315186, -4.238608360290527] ,
[4.143277168273926, -0.677140474319458, -4.186374187469482] ,
[4.281656265258789, -0.7064068913459778, -4.120622158050537] ,
[4.417830467224121, -0.7355661392211914, -4.043430328369141] ,
[4.551558971405029, -0.7646205425262451, -3.9567134380340576] ,
[4.682626247406006, -0.7935821413993835, -3.8622288703918457] ,
[4.8108391761779785, -0.822473406791687, -3.7615725994110107] ,
[4.936026573181152, -0.8513261079.........完整代码请登录后点击上方下载按钮下载查看