0

Three.jsで基本的な動き/リフレッシュを機能させようとしています。問題を次のコードに戻しました。

球体は最初のレンダリングと 2 回 (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 に更新すると、これは解決されます。上記のように、Tomalak によって jsfiddle を使用して分離されます。

于 2013-05-11T14:38:26.633 に答える