Question

我注意到使用three.js在一个非常简单的动画中出现了一个小故障。你必须仔细观察，但它就在那里。它只是一个从左到右递归的立方体。这是渲染循环：

var then = Date.now();
var direction = 1;

function render() {

  mesh.position.x += direction * 0.1 * (Date.now() - then);

  then = Date.now();

  // put boundaries in animation
  if (mesh.position.x > 140) {
    direction = -1;
    mesh.position.x = 140;
  }
  if (mesh.position.x < -140) {
    direction = 1;
    mesh.position.x = -140;
  }

  renderer.render(scene, camera);

}

以下是一个例子：

var camera, scene, renderer, geometry, material, mesh;

init();


function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 400;
  scene.add(camera);

  geometry = new THREE.CubeGeometry(200, 200, 200);
  material = new THREE.MeshNormalMaterial();

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);
  render();

}

var then = Date.now();
var direction = 1;

function render() {

  mesh.position.x += direction * 0.1 * (Date.now() - then);
  then = Date.now();
  if (mesh.position.x > 140) {
    direction = -1;
    mesh.position.x = 140;
  }
  if (mesh.position.x < -140) {
    direction = 1;
    mesh.position.x = -140;
  }
  renderer.render(scene, camera);

}
animate();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r54/three.min.js"></script>

我试过不同的浏览器（chrome和firefox）和不同的PC，它就在那里。

有人可以帮忙吗？

在简单的three.js动画中出现故障

0 个答案: