threejs+webgl实现一个三维小球变形动画效果代码-html代码-BFW代码库

threejs+webgl实现一个三维小球变形动画效果代码

代码语言：html

所属分类：三维

代码描述：threejs+webgl实现一个三维小球变形动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
}

canvas {
  height: 100%;
  width: 100%;
}
</style>



</head>

<body>
  <script type="x-shader/x-fragment" id="background-fragment">

    float hue2rgb(float f1, float f2, float hue) {
    if (hue < 0.0)
        hue += 1.0;
    else if (hue > 1.0)
        hue -= 1.0;
    float res;
    if ((6.0 * hue) < 1.0)
        res = f1 + (f2 - f1) * 6.0 * hue;
    else if ((2.0 * hue) < 1.0)
        res = f2;
    else if ((3.0 * hue) < 2.0)
        res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
    else
        res = f1;
    return res;
}

vec3 hsl2rgb(vec3 hsl) {
    vec3 rgb;
    
    if (hsl.y == 0.0) {
        rgb = vec3(hsl.z); // Luminance
    } else {
        float f2;
        
        if (hsl.z < 0.5)
            f2 = hsl.z * (1.0 + hsl.y);
        else
            f2 = hsl.z + hsl.y - hsl.y * hsl.z;
            
        float f1 = 2.0 * hsl.z - f2;
        
        rgb.r = hue2rgb(f1, f2, hsl.x + (1.0/3.0));
        rgb.g = hue2rgb(f1, f2, hsl.x);
        rgb.b = hue2rgb(f1, f2, hsl.x - (1.0/3.0));
    }   
    return rgb;
}

vec3 hsl2rgb(float h, float s, float l) {
    return hsl2rgb(vec3(h, s, l));
}

vec3 random3(vec3 c) {
	float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));
	vec3 r;
	r.z = fract(512.0*j);
	j *= .125;
	r.x = fract(512.0*j);
	j *= .125;
	r.y = fract(512.0*j);
	return r-0.5;
}

const float F3 =  0.3333333;
const float G3 =  0.1666667;

float simplex3d(vec3 p) {
	 vec3 s = floor(p + dot(p, vec3(F3)));
	 vec3 x = p - s + dot(s, vec3(G3));
	 
	 vec3 e = step(vec3(0.0), x - x.yzx);
	 vec3 i1 = e*(1.0 - e.zxy);
	 vec3 i2 = 1.0 - e.zxy*(1.0 - e);
	 	
	 vec3 x1 = x - i1 + G3;
	 vec3 x2 = x - i2 + 2.0*G3;
	 vec3 x3 = x - 1.0 + 3.0*G3;
	 
	 vec4 w, d;
	 
	 w.x = dot(x, x);
	 w.y = dot(x1, x1);
	 w.z = dot(x2, x2);
	 w.w = dot(x3, x3);
	 
	 w = max(0.6 - w, 0.0);
	 
	 d.x = dot(random3(s), x);
	 d.y = dot(random3(s + i1), x1);
	 d.z = dot(random3(s + i2), x2);
	 d.w = dot(random3(s + 1.0), x3);
	 
	 w *= w;
	 w *= w;
	 d *= w;
	 
	 return dot(d, vec4(52.0));
}

float hash(vec2 p) { return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); }

    
    
    varying vec2 vUv;
    uniform float u_progress;
    uniform float u_time;
    
    
 
    
    void main() {    

        float n = simplex3d(vec3(vUv.xy, u_time * 1.0));
        vec3 color = hsl2rgb(
            0.0 + n * 0.1,
            0.0,
            0.03
        );
        
        float val = hash(vUv + u_time);
        
        gl_FragColor = vec4(color + vec3(val / 20.), 1.0);
    }
</script>
<script type="x-shader/x-vertex" id="background-vertex">
    varying vec2 vUv;
    uniform float u_time;
    
    void main() {
        vec3 p = position;
        
        vec4 mvPosition = modelViewMatrix * vec4(p, 1.0);
        gl_PointSize = 10.0 * (1.0 / -mvPosition.z);
        gl_Position = projectionMatrix * mvPosition;
        
        vUv = uv;
    }
</script>

<script type="x-shader/x-fragment" id="particle-fragment">
    uniform float u_progress;
    void main() {
        gl_FragColor = vec4(0.4, 0.4, 0.4, u_progress);
    }
</script>
<script type="x-shader/x-vertex" id="particle-vertex">
    uniform float u_time;
    void main() {
        vec3 p = position;
        
        p.y += 0.25*(sin(p.y * 5.0 + u_time) * 0.5 + 0.5);
        p.z += 0.05*(sin(p.y * 10.0 + u_time) * 0.5 + 0.5);
        
        
        vec4 mvPosition = modelViewMatrix * vec4(p, 1.0);
        gl_PointSize = 10.0 * (1.0 / -mvPosition.z);
        gl_Position = projectionMatrix * mvPosition;
    }
</script>

<script type="x-shader/x-fragment" id="fragment">
    varying vec2 vUv;
    varying vec3 v_color;
    varying vec3 v_normal;

    void main() {
        
        vec3 light = vec3(0.0);
        vec3 skyColor = vec3(1.000, 1.000, 0.547);
        vec3 groundColor = vec3(0.562, 0.275, 0.111);
        
        vec3 li.........完整代码请登录后点击上方下载按钮下载查看