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

问题描述：

我想在Three.js中获得一些基本的移动/刷新工作。我已将问题切回到以下代码。Three.js图像在几次调用requestAnimationFrame（）后消失

一个球体显示优良的第一个渲染和两个（由Nb指示），但图像消失了3个渲染通过requestAnimationFrame（模拟）调用（对于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();`

你能否更新这个小提琴（http://jsfiddle.net/cN2J8/）来显示你的问题？ – Tomalak 2013-05-11 11:27:02

谢谢。其实这小提琴不适合我，我已经尝试过在另一台能够正常工作的PC上使用jsfiddle，所以它一定是我的机器。我目前正在浏览器/图形设置，看看我能做些什么。谢谢。 – Ian 2013-05-11 12:18:25

如果您计算出可重现的错误情况，则可能值得将其记录在答案中。这可能有助于其他人。 – Tomalak 2013-05-11 13:30:07

答

在此案例（及可能的相关库/驱动程序）的Chromium浏览器更新至版本25.0.1346.160后，即可解决此问题。通过使用如上所示的Tomalak使用jsfiddle来隔离。

+1找出你自己并分享结果。 – Tomalak 2013-05-11 14:42:10

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

相关推荐