three.js网站背景设置速度

Question

我的朋友和我正在一个网站上工作，我们使用three.js来为它做背景。我们试图找出一些尺寸问题，所以现在它看起来最好只有1300 x 800的窗口。我们遇到的主要问题是我们无法弄清楚如何让动画保持设定的速度。它开始缓慢，然后无限加速，这是我们不想要的。

在JS中，我标记了导致问题的速度控制。我尝试了多种不同的方式来做“if，else if，else if”的东西，我尝试了多种不同的数字组合，我无法让它保持单一速度。每当我认为它会起作用时，就没有动画。它没有加速或任何东西。

此外，如果您要渲染它，最好将代码保存在一个文件夹中：

styles.css，index.html和animation.js

Javascript

var scene, camera, renderer, controls;
var geometry, material, plane,
  meshes = [];

var timeout;

var width = window.innerWidth,
  height = window.innerHeight;
var canvas = document.getElementById('canvas');

var init = function () {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(80, width / height, .01, 2000);
  camera.position.set(0, -45, (height / 9));
  camera.rotation.x = .3;

  scene.fog = new THREE.FogExp2(0x222233, 0.001275);

  var ambientLight = new THREE.AmbientLight(0x121212);
  scene.add(ambientLight);

  var spotLight = new THREE.SpotLight(0xFFFFFF);
  spotLight.position.set(0, -25, 200);

  spotLight.castShadow = true;

  spotLight.shadowDarkness = 1;

  spotLight.shadowMapWidth = 1024;
  spotLight.shadowMapHeight = 1024;

  spotLight.shadowCameraNear = 0.01;
  spotLight.shadowCameraFar = 1000;
  spotLight.shadowCameraFov = 80;

  scene.add(spotLight);

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });
  renderer.setClearColor(0x222228);
  renderer.setSize(width, height);
  canvas.appendChild(renderer.domElement);

  geometry = new THREE.PlaneGeometry((width / 5), (height / 7), 13, 8);

  material = new THREE.MeshLambertMaterial({
    // color: 0x03A9F4,
    color: 0x2196F3,
    shading: THREE.FlatShading
  });

  plane = new THREE.Mesh(geometry, material);
  meshes.push(plane);

  scene.add(plane);

  window.addEventListener('resize', onWindowResize, false);
};

function onWindowResize() {
  width = window.innerWidth;
  height = window.innerHeight;

  camera.aspect = width / height;
  camera.updateProjectionMatrix();

  camera.position.set(0, -45, (height / 9));
  canvas.style.height = height * .575 + "px";
  plane.geometry.width = (width / 5);
  plane.geometry.height = (height / 7);
  renderer.setSize(width, height);
};


// Animation speed controls

var inc = .02,
  rotation = 5;
var render = function () {
  requestAnimationFrame(render);

  updatePos();

  renderer.render(scene, camera);

  if (rotation > 5)
    inc = .005;
  else if (rotation < 5)
    inc = -.005;
 else if (rotation = 5.2)
    inc = -.02;

  rotation += inc;
};

// End of speed controls

var updatePos = function () {
  for (i = 0; i < plane.geometry.vertices.length; i++) {
    var vertex = plane.geometry.vertices[i];
    vertex.z = Math.sin(((vertex.x + rotation * rotation) + (vertex.y + rotation / rotation)) / 8 ) * 5 + 20;
  };
  geometry.dynamic = true;
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();
  geometry.normalsNeedUpdate = true;
  geometry.verticesNeedUpdate = true;
}

var derender = function () {
  for (i = 0; i < meshes.length; i++) {
      meshes[i].geometry.dispose();
      meshes[i].material.dispose();
      scene.remove(meshes[i]);
  };
};

Math.range = function (min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

window.onload = function () {
  canvas.style.height = height * .575 + "px";
  init();
  render();
  // setInterval(updatePos, 150);
};

window.onbeforeunload = function () {
  derender();
};

CSS

/* Misc Global */
html {
  width: 100%;
}
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', Arial, Sans-Serif;
  background-color: #E5E5E5;
  font-weight: 400;
  color: #343434;
  font-size: 1.075em;
}
a {
  color: #2196F3;
  text-decoration: none;
  font-weight: 700;
  opacity: .8;
}
a:hover {
  text-decoration: underline;
  opacity: 1;
}
p {
  text-indent: 1em;
}

/* Header and Stuff */
.banner {
  width: 100%;
  overflow: hidden;
  z-index: 0;
  box-shadow: 0px -4px 6px #9E9E9E;
}
#title {
  text-align: center;
  font-weight: 200;
  font-size: 4em;
  letter-spacing: .6em;
  padding-top: 10px;
  padding-bottom: 10px;
  z-index: 1;
  text-decoration: none;
  color: inherit;
  position: absolute;
  width: 100%;
  color: #FAFAFA;
  margin-top: 3.5%;
  opacity: .98;
}
#phrase {
  font-weight: 300;
  color: #F0F0F0;
  width: 100%;
  font-size: 2.2em;
  position: absolute;
  margin-top: 14%;
  letter-spacing: .375em;
  text-align: center;
  z-index: 2;
  opacity: .8;
  font-style: oblique;
}
#canvas {
  width: 100%;
  height: 50%;
  opacity: .88;
  z-index: 0;
}

/* Begin page content */
.content {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  z-index: 2;
}
.mission-statement {
  width: 100%;
  font-size: 1.4em;
  text-align: center;
  font-weight: 400;
}

/* Previews */
#previews {
  width: 90%;
  margin: 0 auto;
}
.preview {
  width: 330px;
  height: 240px;
  text-align: center;
  margin: 35px;
  display: inline-block;
}
.preview-title {
  font-size: 1.2em;
  margin: 10px;
}
.preview img {
  border-radius: 2px;
  opacity: .98;
  margin-left: 45px;
  margin-right: 45px;
  width: 240px;
  height: 120px;
}
.preview-text {
  font-weight: 300;
  font-size: 1em;
  padding: 5px;
}

/* Recent Projects */
#recent-projects {
  width: 100%;
  height: 350px;
  background: #C0C0C0;
}
#rpr-title {
  width: 16%;
  padding: 4px;
  text-align: center;
  background-color: #535353;
  color: #EEEEEE;
  float: left;
  margin-top: -.8em;
  margin-left: 42%;
  border-radius: 2px;
}

/* Recent Posts */
#recent-posts {
  width: 100%;
  height: 350px;
  background-color: #C0C0C0;
}
#rpo-title {
  width: 16%;
  padding: 4px;
  text-align: center;
  background-color: #535353;
  color: #EEEEEE;
  float: left;
  margin-top: -.8em;
  margin-left: 42%;
  border-radius: 2px;
}

/* Footer */
#footer {
  width: 96%;
  background-color: #D0D0D0;
  padding: 2%;
  font-size: .8em;
  opacity: .85;
}
.ft-el {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}
.ft-heading {
  font-weight: 500;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <link href='//fonts.googleapis.com/css?family=Roboto:500,900,300,700,400,100' rel='stylesheet'>
    <title>Cryptocosm Developers</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="Cryptocosm Developers, Samuel Steele, Devin Fowler">
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
  </head>
  <body>
    <div class="banner">
      <a id="title" href="/index.html">CRYPTOCOSM</a>
      <div id="phrase">Find New Worlds</div>
      <div id="canvas"></div>
    </div>
    <div class="content">
      <br>
      <div id="previews">
        <div class="preview">
          <div class="preview-title">We love code, a lot</div>
          <img id="editor" src="img/editor.gif">
          <div class="preview-text">We strive to create optimized code by constantly refining it, keeping speed and size in mind.</div>
        </div>
        <div class="preview">
          <div class="preview-title">Attention to detail</div>
          <!-- @TODO: Animate detail.png to zoom with magnify glass to the corner of the card -->
          <img id="detail" src="img/detail.png">
          <div class="preview-text">We don't fret the little things because it can't be afforded. When designing a page, every pixel has meaning.</div>
        </div>
        <!-- @TODO: Think of some fake bullshit to put in this last **preview** -->
        <div class="preview">
          <div class="preview-title">Lorem Ipsum</div>
          <img id="lorem" src="img/.png">
          <div class="preview-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed pretium tortor.</div>
        </div>
      </div>

      <br><br><br>
      <div id="recent-projects">
        <div id="rpr-title">RECENT PROJECTS</div>
      </div>
      <br><br><br><br>
      <div id="recent-posts">
        <div id="rpo-title">RECENT BLOG POSTS</div>
      </div>
      <br><br>
      <div id="footer">
        <div id="ft-contact" class="ft-el">
          <p class="ft-heading">CONTACT:</p>
          <p>Samuel Steele</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:steelesam72@gmail.com?subject:Contact%20Cryptocosm">steelesam72@gmail.com</a></p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;<a href="//twitter.com/Cryptoc1">@Cryptoc1</a></p>
          <p>Devin Fowler</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:fowlerd11@gmail.com?subject:Contact%20Cryptocosm">fowlerd11@gmail.com</a></p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;<a href="//twitter.com/DevinFowler11">@DevinFowler11</a></p>
        </div>
        <div id="ft-git" class="ft-el">
          <p class="ft-heading">GITHUB:</p>
          <p>Samuel Steele</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;<a href="//github.com/cryptoc1">Cryptoc1</a></p>
          <!-- <p>Devin Fowler</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;<a href="//github.com/fowlerd11">Fowlerd11</a></p> -->
          <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        </div>
      </div>
    </div>
  </body>
  <script src="animation.js"></script>
</html>