for 루프의 각 반복에서 three.js 기하학 렌더링을 강제 실행하려고 시도했습니다.

Question

저는 three.js를 사용하기 시작했습니다. three.js 메인 웹 사이트에서 찾은 코드 조각을 사용하여 테스트를 수행했습니다.

나는 내가 만든 방정식에 따라 루프 내에서 위치가 바뀌는 입자를 나타내는 기하학적 집합 (구)을 가지고 있습니다. 나는 이러한 종류의 코드를 통해 각 반복을 렌더링하기 위해 노력 :

function simulate() { 
    for (var j = 0 ; j < Nb ; j++) {   
     // update the geometries positions 
     ... 
     render(); 
    } 
} 

하지만 렌더링은, 대신이 모든 반복을 거쳐 시행 하였다 완료되지 않은, simulate

후라는 animate 기능을 입력 할 때

function animate() { 
    render(); 
    requestAnimationFrame(animate); 
} 

실제로 크롬 브라우저의 자바 스크립트 콘솔에서 단계적으로 진행하면 렌더링이 수행됩니다.

function simulate() { 
    for (var j = 0 ; j < Nb ; j++) {   
     this.internalRenderingLoop = function() { 
      // update the objects shapes and locations 
      ... 
      render(); 
      requestAnimationFrame(this.internalRenderingLoop); 
     } 
    } 
} 

하지만이 중 하나가 작동하지 않았다 : 나는, 내 루프 내에서 그런 식으로 requestAnimationFrame을 사용할 수 있도록

그래서 나는 코드를 변경했습니다. 나는 또한 분명히 requestAnimationFrame 두 통화 사이의 충돌이 Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17

그래서 질문이 이어지는이 :이 내 simulate 함수에서 각 반복에서 렌더링을 강제 할 수있는 방법을 또는 내 코드를 리팩토링해야하나요 있도록 각 호출 형상을 업데이트하려면 animate 또는 render 함수에서 위치를 업데이트 하시겠습니까?

Answer 1

마지막 기능이 거의 있습니다. for 루프에서 내부 렌더링 루프 함수를 변경하지 않고 겹쳐 쓰면됩니다. 또한 모양 업데이트 코드에서 j 변수를 사용하는 경우 비트를 조금씩 다르게해야합니다. 어떻게 이런 일에 대한 (테스트되지 않은,하지만 당신은 아이디어를 얻을) : 이미 시뮬레이션에 애니 메이팅을하고 있기 때문에

var j = 0; // need to be outside function to have proper scope 
function simulate() { 
    j++; 
    if (j == Nb) { return; } // stop 

    // update the objects shapes and locations 

    render(); 
    requestAnimationFrame(simulate);  
} 

당신은 모든() 함수 애니메이션이 필요하지 않습니다().

시뮬레이션 속도 또한 같은과 함수의 마지막 줄을 교체 할 수 있도록 시뮬레이션 속도에 대한 제어를 위해, 프레임 속도에 따라 달라집니다 :

window.setTimeout(function() { requestAnimationFrame(simulate); }, 1000/25); 

이 25 FPS에서 약을 실행해야합니다.