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;
.........完整代码请登录后点击上方下载按钮下载查看