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

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

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