three按住左键降速动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：three按住左键降速动画效果代码

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

<html lang="en">
<head>

    <meta charset="UTF-8">



    <style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);

        #instructions {
            position: absolute;
            width: 100%;
            top: 50%;
            margin: auto;
            margin-top: 100px;
            font-family: 'Open Sans', sans-serif;
            color: #fff;
            font-size: 1.2em;
            text-transform: uppercase;
            text-align: center;
        }

        #world {
            background-color: #8cdfd4;
        }

        body {
            background-color: #fff;
            overflow: hidden;
        }
        #credits {
            position: absolute;
            width: 100%;
            margin: auto;
            bottom: 0;
            margin-bottom: 20px;
            font-family: 'Open Sans', sans-serif;
            color: #56ac9f;
            font-size: 0.7em;
            text-transform: uppercase;
            text-align: center;
        }
        #credits a {
            color: #56ac9f;
        }
    </style>



</head>

<body>
    <div id="world">

        <div id="instructions">
            Press and hold<br>to slow down
        </div>


        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
        <script>
            var scene, camera, shadowLight, light, backLight, renderer;
            var container,
            HEIGHT,
            WIDTH,
            fieldOfView,
            aspectRatio,
            nearPlane,
            farPlane,
            stats,
            mouseX = 0,
            mouseY = 0,
            windowHalfX,
            windowHalfY,
            distortionAngle = 0,
            shakeAngle = 0,
            shakeAngle2 = 0,
            meteorite, metCore,
            wasteArray = [],
            frequency = 1,
            freqCount = 0,
            metShakeSpeed = .1,
            metRotateSpeed = .1,
            slowMoFactor = 1,
            shakeAmp = 3,
            colorsBright = ['#a3b509', '#79b68a', '#f4da7e', '#ff8f4e', '#9d797d', '#b91b2a', '#b4885c', '#dd6316', '#d9c4b4'],
            colorsDark = ['#000000', '#190502', '#1c1005', '#23190d', '#380008', '#131913', '#28120a', '#551705', '#471b01'],
            geometryMeteorite;



            initDocument();
            initTHREE();
            //createStats();
            createCam();
            createLight();
            createMeteorite();
            animate();
            switchFast();

            function initDocument() {
                HEIGHT = window.innerHeight;
                WIDTH = window.innerWidth;
                windowHalfX = WIDTH / 2;
                windowHalfY = HEIGHT / 2;
                container = document.getElementById('world');
                window.addEventListener('resize', onWindowResize, false);
                window.addEventListener('mousedown', switchSlow, false);
                window.addEventListener('mouseup', switchFast, false);

            }

            function initTHREE() {
                scene = new THREE.Scene();
                renderer = new THREE.WebGLRenderer({
                    alpha: true,
                    antialias: true
                });

                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(WIDTH, HEIGHT);
                container.appendChild(renderer.domElement);
            }

            function createStats() {
                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                stats.domElement.style.right = '0px';
                container.appendChild(stats.domElement);
            }

            function createCam() {
                fieldOfView = 75;
                aspectRatio = WIDTH / HEIGHT;
                nearPlane = 1;
                farPlane = 3000;
                cameraZ = 800;
                camera = new THREE.PerspectiveCamera(
                    fieldOfView,
                    aspectRatio,
                    nearPlane,
                    farPlane);
                camera.position.z = cameraZ;
            }

            function createLight() {
                shadowLight = new THREE.DirectionalLight(0xffffff, 2);
                shadowLight.position.set(20, 0, 10);
                shadowLight.castShadow = true;
                shadowLight.shadowDarkness = 0.01;
                scene.add(shadowLight);

                light = new THREE.DirectionalLight(0xffffff, .5);
                light.position.set(-20, 0, 20);
                scene.add(light);
                //*
                backLight = new THREE.DirectionalLight(0xffffff, 0.1);
                backLight.position.set(0, 0, -20);
                scene.add(backLight);
                //*/
            }

            function WasteParticle() {
                this.isFlying = false;
                this.color = hexToRgb(getColor("dark"));
                var threecol = new THREE.Color("rgb(" + this.color.r + "," + this.color.g + "," + this.color.b + ")");
                if (Math.random() > .5) {
                    var w = 110 + Math.random() * 30;
                    var h = 110 + Math.random() * 30;
                    var d = 5 + Math.random() * 10;

                    this.geometry = new THREE.BoxGeometry(w, h, d);
                } else {
                    var scale = 20 + Math.random() * 20;
                    var nLines = Math.floor(Math.random() * 3);
                    var nRows = Math.floor(Math.random() * 3);

                    this.geometry = new THREE.SphereGeometry(scale, nLines, nRows);
                }

                this.material = new THREE.MeshLambertMaterial({
                    color: threecol, shading: THREE.FlatShading, transparent: true
                });


                this.mesh = new THREE.Mesh(this.geometry, this.material);
                recycleWaste(this);
            }

            function recycleWaste(p) {
                p.mesh.position.x = 0;
                p.mesh.position.y = 0;
                p.mesh.position.z = 0;
                p.mesh.rotation.x = Math.random() * Math.PI * 2;
                p.mesh.rotation.y = Math.random() * Math.PI * 2;
                p.mesh.rotation.z = Math.random() * Math.PI * 2;
                p.mesh.scale.set(.1, .1, .1);
                p.mesh.material.opacity = 0;
                p.color = hexToRgb(getColor("dark"));
                p.mesh.material.color.setRGB(p.color.r / 255, p.color.g / 255, p.color.b / 255);
                p.material.needUpdate = true;
                scene.add(p.mesh);
                wasteArray.push(p);
            }
            function flyWaste(p) {
                var targetPosX,
                targetPosY,
                targetSpeed,
                targetColor;
                p.mesh.material.opacity = 1;
                p.mesh.position.x = -2000;
                p.mesh.position.y = -1500 + Math.random() * 2000;
                p.mesh.position.z = -1000 + Math.random() * 1500;
          .........完整代码请登录后点击上方下载按钮下载查看