three+webgl实现炫酷森林极光星空夜景动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：three+webgl实现炫酷森林极光星空夜景动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->

<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.82.js"></script>
  <script >
      function _defineProperty(obj, key, value) {
          if (key in obj) {
              Object.defineProperty(obj, key, {
                  value: value,
                  enumerable: true,
                  configurable: true,
                  writable: true
              });
          } else {
              obj[key] = value;
          }
          return obj;
      }
      class BackgroundMaterial extends THREE.RawShaderMaterial {


  constructor() {
    super(BackgroundMaterial.shader);_defineProperty(this, "resize",





    () => {
      this.uniforms.resolution.value.set(
      window.innerWidth * window.devicePixelRatio,
      window.innerHeight * window.devicePixelRatio);

    });_defineProperty(this, "loop",

    timestamp => {
      requestAnimationFrame(this.loop);
      this.uniforms.globalTime.value = timestamp / 1000;
    });addEventListener('resize', this.resize);requestAnimationFrame(this.loop);}}_defineProperty(BackgroundMaterial, "shader", { vertexShader: `
      attribute vec3 position;

      uniform mat4 projectionMatrix;
      uniform mat4 modelViewMatrix;

      void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
      }
    `, fragmentShader: `
      #ifdef GL_ES
      precision mediump float;
      #endif

      #define OCTAVES 2
      #define RGB(r, g, b) vec3(float(r) / 255.0, float(g) / 255.0, float(b) / 255.0)

      uniform vec2 resolution;
      uniform float globalTime;

      float random(vec2 co) {
          return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);
      }

      vec2 rand2(vec2 p) {
          p = vec2(dot(p, vec2(12.9898,78.233)), dot(p, vec2(26.65125, 83.054543))); 
          return fract(sin(p) * 43758.5453);
      }

      float rand(vec2 p) {
          return fract(sin(dot(p.xy ,vec2(54.90898,18.233))) * 4337.5453);
      }



      //
      // Description : Array and textureless GLSL 2D simplex noise function.
      //      Author : Ian McEwan, Ashima Arts.
      //  Maintainer : ijm
      //     Lastmod : 20110822 (ijm)
      //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
      //               Distributed under the MIT License. See LICENSE file.
      //               https://github.com/ashima/webgl-noise
      //

      vec3 mod289(vec3 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
      }

      vec2 mod289(vec2 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
      }

      vec3 permute(vec3 x) {
        return mod289(((x*34.0)+1.0)*x);
      }

      float snoise(vec2 v) {
        const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
                            0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
                           -0.577350269189626,  // -1.0 + 2.0 * C.x
                            0.024390243902439); // 1.0 / 41.0
        vec2 i  = floor(v + dot(v, C.yy) );
        vec2 x0 = v -   i + dot(i, C.xx);

        vec2 i1;
        i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
        vec4 x12 = x0.xyxy + C.xxzz;
        x12.xy -= i1;

        i = mod289(i); // Avoid truncation effects in permutation
        vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
          + i.x + vec3(0.0, i1.x, 1.0 ));

        vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
        m = m*m ;
        m = m*m ;

        vec3 x = 2.0 * fract(p * C.www) - 1.0;
        vec3 h = abs(x) - 0.5;
        vec3 ox = floor(x + 0.5);
        vec3 a0 = x - ox;

        m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );

        vec3 g;
        g.x  = a0.x  * x0.x  + h.x  * x0.y;
        g.yz = a0.yz * x12.xz + h.yz * x12.yw;
        return 130.0 * dot(m, g);
      }

      // Thanks to andmar1x https://www.shadertoy.com/view/MtB3zW
      float stars(in vec2 x, float numCells, float size, float br) {
        vec2 n = x * numCells;
        vec2 f = floor(n);

        float d = 1.0e10;
        for (int i = -1; i <= 1; ++i)
        {
          for (int j = -1; j <= 1; ++j)
          {
            vec2 g = f + vec2(float(i), float(j));
            g = n - g - rand2(mod(g, numCells)) + rand(g);
            // Control size.........完整代码请登录后点击上方下载按钮下载查看