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