three实现一个蝴蝶飞舞动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：three实现一个蝴蝶飞舞动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">


</head>

<body>
    <canvas class="p-canvas-webgl" id="canvas-webgl"></canvas>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script>

    <script>

        'use strict';

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

        var ConsoleSignature = function () {
            function ConsoleSignature() {
                _classCallCheck(this, ConsoleSignature);

                this.message = 'created by yoichi kobayashi';
                this.url = 'http://www.tplh.net';
                this.show();
            }

            ConsoleSignature.prototype.show = function show() {
                if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
                    var args = ['\n%c ' + this.message + ' %c%c ' + this.url + ' \n\n',
                        'color: #fff; background: #222; padding:3px 0;',
                        'padding:3px 1px;',
                        'color: #fff; background: #47c; padding:3px 0;'];
                    console.log.apply(console, args);
                } else if (window.console) {
                    console.log(this.message + ' ' + this.url);
                }
            };

            return ConsoleSignature;
        }();

        var debounce = function debounce(callback, duration) {
            var timer;
            return function (event) {
                clearTimeout(timer);
                timer = setTimeout(function () {
                    callback(event);
                }, duration);
            };
        };

        var SIZE = 280;

        var Butterfly = function () {
            function Butterfly(i, texture) {
                _classCallCheck(this, Butterfly);

                this.uniforms = {
                    index: {
                        type: 'f',
                        value: i
                    },
                    time: {
                        type: 'f',
                        value: 0
                    },
                    size: {
                        type: 'f',
                        value: SIZE
                    },
                    texture: {
                        type: 't',
                        value: texture
                    }
                };
                this.physicsRenderer = null;
                this.obj = this.createObj();
            }

            Butterfly.prototype.createObj = function createObj() {
                var geometry = new THREE.PlaneBufferGeometry(SIZE, SIZE / 2, 24, 12);
                var mesh = new THREE.Mesh(geometry, new THREE.RawShaderMaterial({
                    uniforms: this.uniforms,
                    vertexShader: 'attribute vec3 position;\nattribute vec2 uv;\n\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\nuniform float index;\nuniform float time;\nuniform float size;\n\nvarying vec3 vPosition;\nvarying vec2 vUv;\n\nvoid main() {\n  float flapTime = radians(sin(time * 6.0 - length(position.xy) / size * 2.6 + index * 2.0) * 45.0 + 30.0);\n  float hovering = cos(time * 2.0 + index * 3.0) * size / 16.0;\n  vec3 updatePosition = vec3(\n    cos(flapTime) * position.x,\n    position.y + hovering,\n    sin(flapTime) * abs(position.x) + hovering\n  );\n\n  vec4 mvPosition = modelViewMatrix * vec4(updatePosition, 1.0);\n\n  vPosition = position;\n  vUv = uv;\n\n  gl_Position = projectionMatrix * mvPosition;\n}\n',
                    fragmentShader: 'precision highp float;\n\nuniform float index;\nuniform float time;\nuniform float size;\nuniform sampler2D texture;\n\nvarying vec3 vPosition;\nvarying vec2 vUv;\n\n//\n// Description : Array and textureless GLSL 2D/3D/4D simplex\n//               noise functions.\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\nvec3 mod289(vec3 x) {\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 mod289(vec4 x) {\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 permute(vec4 x) {\n     return mod289(((x*34.0)+1.0)*x);\n}\n\nvec4 taylorInvSqrt(vec4 r)\n{\n  return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nfloat snoise3(vec3 v)\n  {\n  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;\n  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);\n\n// First corner\n  vec3 i  = floor(v + dot(v, C.yyy) );\n  vec3 x0 =   v - i + dot(i, C.xxx) ;\n\n// Other corners\n  vec3 g = step(x0.yzx, x0.xyz);\n  vec3 l = 1.0 - g;\n  vec3 i1 = min( g.xyz, l.zxy );\n  vec3 i2 = max( g.xyz, l.zxy );\n\n  //   x0 = x0 - 0.0 + 0.0 * C.xxx;\n  //   x1 = x0 - i1  + 1.0 * C.xxx;\n  //   x2 = x0 - i2  + 2.0 * C.xxx;\n  //   x3 = x0 - 1.0 + 3.0 * C.xxx;\n  vec3 x1 = x0 - i1 + C.xxx;\n  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y\n  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y\n\n// Permutations\n  i = mod289(i);\n  vec4 p = permute( permute( permute(\n             i.z + vec4(0.0.........完整代码请登录后点击上方下载按钮下载查看