three webgl实现球体表面阴影变幻动画效果代码-html代码-BFW代码库

three webgl实现球体表面阴影变幻动画效果代码

代码语言：html

所属分类：动画

代码描述：three webgl实现球体表面阴影变幻动画效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">
  

  
  
<style>
*{
    margin: 0;
    }
</style>



</head>

<body >
  




<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.110.js"></script>
<canvas id="myCanvas" width="887" height="462" style="width: 710px; height: 370px;"></canvas>

<script id="fragmentShader" type="x-shader/x-fragment">
  #ifdef GL_ES
  precision mediump float;
  #endif

  #extension GL_OES_standard_derivatives : enable

  uniform float time;
  uniform vec2 mouse;
  uniform vec2 resolution;

  float map(vec2 p, float z) {
    return length(p) - 1.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;
  }

  float nsin(float value) {
    return sin(value * 6.2831853072) * 0.5 + 0.5;
  }

  void main( void ) {
    
    float dist;
    vec2 uv, p = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);


    float d = dot(uv,uv);
    float a = atan(uv.y,uv.x);
    
    
    float l=length(p);
    float z = time; 
    float angle = 6.2831853072 * nsin(z*0.001) * 10.0;
    vec3 color = vec3(0.0);

    
    for (int j = 0; j < 3; j++) {
      for ( int i = 0; i < 7; i++){
        
        z+=0.2;

        uv.x = map(p,z);
        uv.y = map(p,z);
        

        uv.x -= (
          sin(float(i)*0.2)*0.5
        );
        uv.y += (
         cos(float(j)*0.1)*0.5
        );

        uv = rotate(uv, angle);


        uv += p / l * abs(sin(l * 8.0 - z*0.05));

        color[j] +=  0.2 /  fract(uv.y*uv.x+cos(z*0.05))*1.0 -  0.01 /  abs(uv.y*uv.x)*2.0;                ;
        color[j] += 0.1;
        color[j] = clamp(color[j], 0.1, 1.7);
        
        
      }              
    }

    color[0] += 0.;
    color[1] -= 0.5;
    color[2] -= 0.9;
    gl_FragColor = vec4(color, 1.0);

  }
</script>

    <script id="vertexShader" type="x-shader/x-vertex">

			varying vec2 vUv;

			void main()
			{
				vUv = uv;
				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
				gl_Position = projectionMatrix * mvPosition;
			}
    </script>


  
      <script>
var camera, renderer;
// ページの読み込みを待つ
window.addEventListener('load', init);

function init() {

  // レンダラーを作成
  renderer = new THREE.WebGLRenderer({
    canvas: document.query.........完整代码请登录后点击上方下载按钮下载查看