Question

我正在尝试在Three.js中获得一些基本的动作/刷新工作。我已将问题解决回以下代码。

一个球体首先显示精细渲染，两次显示（由Nb指示），但是通过requestAnimationFrame（模拟）调用的3个渲染图像消失（对于4，它显示然后消失）;我错过了重复渲染应该发生的事情吗？

var sphere, WIDTH, HEIGHT, VIEW_ANGLE, ASPECT, NEAR, FAR, renderer, camera, scene, sphereMaterial, radius, sphere, pointLight, container;

function init() {
  WIDTH = 400;
  HEIGHT = 300;
  VIEW_ANGLE = 45;
  ASPECT = WIDTH / HEIGHT;
  NEAR = 0.1;
  FAR = 10000;

  container = $('#container');
  renderer = new THREE.WebGLRenderer();
  camera = new THREE.PerspectiveCamera(  VIEW_ANGLE,
                              ASPECT,
                              NEAR,
                              FAR  );
  scene = new THREE.Scene();
  camera.position.z = 200;
  renderer.setSize( WIDTH, HEIGHT );
  container.append(renderer.domElement);
  sphereMaterial = new THREE.MeshLambertMaterial(
  {
      color: 0xCC0000
  });
  radius = 50; segments = 16; rings = 16;
  sphere = new THREE.Mesh(
    new THREE.SphereGeometry(radius, segments, rings),
    sphereMaterial);
  //sphere.position.z -= 100;
  scene.add(sphere);
  scene.add(camera);
  pointLight = new THREE.PointLight( 0xFFFFFF );
  pointLight.position.x = 10;
  pointLight.position.y = 50;
  pointLight.position.z = 130;
  scene.add(pointLight);
};

var Nb = 3;
var j = 0; 

function simulate() {
  console.log("simulate " + sphere.position.z);
  if (j == Nb) { return; } 
  j++;
  //sphere.position.z -= 1;
  render();
  requestAnimationFrame(simulate); 

};

function render() {

  console.log("rendering" + sphere.position.z);
  renderer.render(scene,camera);
};

init();
simulate();`

Answer 1

在这种情况下将Chromium浏览器（以及可能的相关库/驱动程序）更新到版本25.0.1346.160后，解决了这个问题。通过使用jsfiddle隔离，如Tomalak所示。

几次调用requestAnimationFrame（）后，Three.js图像消失了

1 个答案: