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

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

代码语言：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) + hover.........完整代码请登录后点击上方下载按钮下载查看