requestAnimationFrame()을 몇 번 호출하면 Three.js 이미지가 사라집니다.

Three.js에서 기본 동작/새로 고침 작업을 수행하려고합니다. 문제를 다시 다음 코드로 잘라 냈습니다.requestAnimationFrame()을 몇 번 호출하면 Three.js 이미지가 사라집니다.

sphere는 fine first render를 표시하고 두번 (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();`

출처

2013-05-11 Ian

문제를 표시하려면이 피들 (http://jsfiddle.net/cN2J8/)을 업데이트 해 주실 수 있습니까? – Tomalak

감사합니다. 사실 그 바이올린은 나를 위해 작동하지 않습니다, 나는 잘 작동하는 다른 PC에서 jsfiddle 시도, 그래서 내 컴퓨터가 있어야합니다. 나는 현재 내가 할 수있는 일이 있는지보기 위해 브라우저/그래픽 설정을보고있다. 감사. – Ian

재현 할 수있는 오류 상태를 해결하면 대답으로 문서화하는 것이 유용 할 수 있습니다. 이것은 누군가 다른 사람을 도울 수 있습니다. – Tomalak

이 경우 Chromium 브라우저 (및 관련 libs/드라이버가있을 수 있음)를 버전 25.0.1346.160으로 업데이트하면 해결됩니다. Tomalak이 위에 표시된 것처럼 jsfiddle를 사용하여 격리.

출처

2013-05-11 14:38:26 Ian

+1 자신을 찾아 내고 결과를 공유하십시오. – Tomalak

requestAnimationFrame()을 몇 번 호출하면 Three.js 이미지가 사라집니다.

답변

관련 문제