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

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

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