0

我正在尝试在 Three.js 中进行一些基本的运动/刷新工作。我已将问题切回以下代码。

一个球体显示良好的第一次渲染，两次（由 Nb 指示），但是对于通过 requestAnimationFrame(simulate) 调用的 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();`
4

1 回答 1

1

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

于 2013-05-11T14:38:26.633 回答