three打造森林绿光走光动画效果

代码语言:html

所属分类:动画

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three-min.js"></script>
<style>
html
, body {
       
width: 100%;
       
height: 100%;
       
margin: 0;
       
padding: 0;
       
overflow: hidden;
}
</style>
</head>
<body>
<script>
'use strict';

var _class, _temp, _class2, _temp2, _class3, _temp3;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var BackgroundMaterial = (_temp = _class = function (_THREE$RawShaderMater) {
  _inherits(BackgroundMaterial, _THREE$RawShaderMater);

  function BackgroundMaterial() {
    _classCallCheck(this, BackgroundMaterial);

    var _this = _possibleConstructorReturn(this, _THREE$RawShaderMater.call(this, BackgroundMaterial.shader));

    _this.resize = function () {
      _this.uniforms.resolution.value.set(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);
    };

    _this.loop = function (timestamp) {
      requestAnimationFrame(_this.loop);
      _this.uniforms.globalTime.value = timestamp / 1000;
    };

    addEventListener('resize', _this.resize);
    requestAnimationFrame(_this.loop);
    return _this;
  }

  return BackgroundMaterial;
}(THREE.RawShaderMaterial), _class.shader = {
  vertexShader: '\n      attribute vec3 position;\n\n      uniform mat4 projectionMatrix;\n      uniform mat4 modelViewMatrix;\n\n      void main() {\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);\n      }\n    ',
  fragmentShader: '\n      #ifdef GL_ES\n      precision mediump float;\n      #endif\n\n      #define OCTAVES 2\n      #define RGB(r, g, b) vec3(float(r) / 255.0, float(g) / 255.0, float(b) / 255.0)\n\n      uniform vec2 resolution;\n      uniform float globalTime;\n\n      float random(vec2 co) {\n          return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);\n      }\n\n      vec2 rand2(vec2 p) {\n          p = vec2(dot(p, vec2(12.9898,78.233)), dot(p, vec2(26.65125, 83.054543))); \n          return fract(sin(p) * 43758.5453);\n      }\n\n      float rand(vec2 p) {\n          return fract(sin(dot(p.xy ,vec2(54.90898,18.233))) * 4337.5453);\n      }\n\n\n\n      //\n      // Description : Array and textureless GLSL 2D simplex noise function.\n      //      Author : Ian McEwan, Ashima Arts.\n      //  Maintainer : ijm\n      //     Lastmod : 20110822 (ijm)\n      //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n      //               Distributed under the MIT License. See LICENSE file.\n      //               https://github.com/ashima/webgl-noise\n      //\n\n      vec3 mod289(vec3 x) {\n        return x - floor(x * (1.0 / 289.0)) * 289.0;\n      }\n\n      vec2 mod289(vec2 x) {\n        return x - floor(x * (1.0 / 289.0)) * 289.0;\n      }\n\n      vec3 permute(vec3 x) {\n        return mod289(((x*34.0)+1.0)*x);\n      }\n\n      float snoise(vec2 v) {\n        const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0\n                            0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)\n                           -0.577350269189626,  // -1.0 + 2.0 * C.x\n                            0.024390243902439); // 1.0 / 41.0\n        vec2 i  = floor(v + dot(v, C.yy) );\n        vec2 x0 = v -   i + dot(i, C.xx);\n\n        vec2 i1;\n        i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n        vec4 x12 = x0.xyxy + C.xxzz;\n        x12.xy -= i1;\n\n        i = mod289(i); // Avoid truncation effects in permutation\n        vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))\n          + i.x + vec3(0.0, i1.x, 1.0 ));\n\n        vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);\n        m = m*m ;\n        m = m*m ;\n\n        vec3 x = 2.0 * fract(p * C.www) - 1.0;\n        vec3 h = abs(x) - 0.5;\n        vec3 ox = floor(x + 0.5);\n        vec3 a0 = x - ox;\n\n        m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );\n\n        vec3 g;\n        g.x  = a0.x  * x0.x  + h.x  * x0.y;\n        g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n        return 130.0 * dot(m, g);\n      }\n\n     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0