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

代码语言:html

所属分类:动画

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

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

网友评论0