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