three+webgl实现太阳内核耀斑闪耀三维效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three+webgl实现太阳内核耀斑闪耀三维效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
canvas {
	position: fixed;
	top: 0;
	left: 0;
}
html,
body {
	background-color: black;
}
</style>



</head>

<body >
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.147.js"></script>

      <script  type="module">

class App {
  constructor() {
    this.toUpdate = [];
    this.camera = new THREE.PerspectiveCamera(
      45,
      innerWidth / innerHeight,
      0.1,
      100.0
    );
    this.camera.position.set(2, 1.5, 2);
    this.camera.lookAt(new THREE.Vector3());
    this.initRenderer();

    // this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    // this.controls.target = new THREE.Vector3(0, 0, 0);
    // this.toUpdate.push(this.controls);

    this.scene = new THREE.Scene();

    this.name = "Sunshine";
    this.version = 1;
    this.initSun();
  }

  gradient() {
    var c = document.createElement("canvas");
    var g = c.getContext("2d");
    c.width = 64;
    c.height = 4;
    var grad = g.createLinearGradient(0, 0, 64, 0);
    grad.addColorStop(0, "white");
    grad.addColorStop(0.16, "#FEF28C");
    grad.addColorStop(0.39, "#FFDE69");
    grad.addColorStop(0.59, "#E36700");
    grad.addColorStop(0.78, "#5C2200");
    grad.addColorStop(1, "black");
    g.fillStyle = grad;
    g.fillRect(0, 0, 64, 4);
    return c;
  }

  initSun() {
    this.sun = new THREE.Mesh(
      new THREE.SphereGeometry(1, 40, 40),
      this.sunShader()
    );

    var corona = new THREE.Mesh(
      new THREE.CylinderGeometry(2.4, 1.0, 0.01, 32, 1, true),
      this.coronaShader()
    );
    corona.material.uniforms.scale.value = new THREE.Vector2(7, 0.2);
    this.scene.add(corona);

    for (var i = 0; i < 5; i++) {
      corona = corona.clone();
      this.scene.add(corona);
      corona.rotation.x = Math.random() * 4;
      corona.rotation.y = Math.random() * 4;
      corona.rotation.z = Math.random() * 4;
    }

    this.scene.add(this.sun);
    this.toUpdate.push({
      update: () => {
        this.sun.material.uniforms.time.value = performance.now() / 500;
        corona.material.uniforms.time.value = -performance.now() / 500;
      }
    });
  }

  coronaShader() {
    return new THREE.ShaderMaterial({
      vertexShader: `
                    varying vec2 vUV;
                    
                    void main() {  
                        vUV = uv;
                        gl_Position= projectionMatrix * modelViewMatrix* vec4(position, 1.0);

                    }
                `,
      side: THREE.DoubleSide,
      fragmentShader: `


                varying vec2 vUV;
                uniform float time;
                uniform vec2 scale;
                uniform sampler2D grad;
                uniform vec2 resolution;
                    float random (in vec2 _st) {
                    return fract(sin(dot(_st.xy,
                                        vec2(12.9898,78.233)))*
                        43758.5453123);
                }

                // Based on Morgan McGuire @morgan3d
                // https://www.shadertoy.com/view/4dS3Wd
                float noise (in vec2 _st) {
                    vec2 i = floor(_st);
                    vec2 f = fract(_st);

                    // Four corners in 2D of a tile
                    float a = random(i);
                    float b = random(i + vec2(1.0, 0.0));
                    float c = random(i + vec2(0.0, 1.0));
                    float d = random(i + vec2(1.0, 1.0));

                    vec2 u = f * f * (3.0 - 2.0 * f);

                    return mix(a, b, u.x) +
                            (c - a)* u.y * (1.0 - u.x) +
                            (d - b) * u.x * u.y;
                }

                #define NUM_OCTAVES 6

                float fbm ( in vec2 _st) {
                    float v = 0.0;
                    float a = 0.5;
                    vec2 shift = vec2(100.0);
                    // Rotate to reduce axial bias
                    mat2 rot = mat2(cos(0.5), sin(0.5),
                                    -sin(0.5), cos(0.50));
                    for (int i = 0; i < NUM_OCTAVES; ++i) {
                        v += a * noise(_st);
                        _st = rot * _st * 2.0 + shift;
                        a *= 0.5;
                    }
                    return v;
                }

                void main() {
                    vec2 st = vUV*8.; //TODO get the resolution at the poles right...
                    st *=scale;
                    // st += st * abs(sin(time*0.1)*3.0);
                    vec3 color = vec3(0.0);

                    vec2 q = vec2(0.);
                    q.x = fbm( st + 0.00*time);
                    q.y = fbm( st + vec2(1.0));

                    vec2 r = vec2(0.);
                    r.x = fbm( st + 1.0*q + vec2(1.7,9.2)+ 0.15*time );
                    r.y = fbm( st + 1.0*q + vec2(8.3,2.8)+ 0.126*time);

                    float f = fbm(st+r);

                    color = mix(vec3(0.101961,0.619608,0.666667),
                                vec3(0.666667,0.666667,0.498039),
                                clamp((f*f)*4.0,0.0,1.0));

                    color = mix(color,
                                vec3(0,0,0.164706),
                                clamp(length(q),0.0,1.0));

     .........完整代码请登录后点击上方下载按钮下载查看