ThreeJS 렌더링 중지

OrbitControls가있는 기본 3D 장면에서 ThreeJS로 작업하고 있습니다. 그것은 사용자가 그것을보고 있지 않을 때에도 스스로를 루핑하기 때문에 모든 사이트가 지연되는 것을 제외하고는 모든 것이 훌륭하게 작동합니다. 특정 조건이 충족 될 때 렌더링을 시작하고 중지 할 수있는 함수가 필요합니다.이 경우 사용자가 캔버스를보고 있지 않습니다. ThreeJS가 초기화 된 후 내 사이트가 참기 어려울 정도로 느려지므로 시작 기능이 제대로 작동하지만 정지 기능이 작동하지 않는 것 같습니다.ThreeJS 렌더링 중지

나는이 문제에 대한 해결책을 찾았으며 몇 가지 '해결책'을 찾았지만 어떤 이유로 든 내 응용 프로그램과 작동하지 않습니다. 내 가정은 이러한 솔루션이 ThreeJS의 구버전에서 나온 것입니다. 여기

내 내 main.js 파일의 코드입니다 : 자바 스크립트 파일 내 다른에서

var scene, 
    camera, 
    controls, 
    render, 
    requestId = undefined; 


function init() { 
    scene = new THREE.Scene(); 
    var threeJSCanvas = document.getElementById("threeJS"); 
    camera = new THREE.PerspectiveCamera(75, threeJSCanvas.width/threeJSCanvas.height, 0.1, 1000); 

    controls = new THREE.OrbitControls(camera); 

    // Controls and Camera settings 

    // Create Geometry. 

} 

function render() { 
    requestId = requestAnimationFrame(render); 
    renderer.render(scene, camera); 

} 

function start() { 
    render(); 
} 

function stop() { 
    window.cancelAnimationFrame(requestId); 
    requestId = undefined; 


}

, 다음과 같은 내 pageChange 기능의 조건부 내부 (이것은 다중 응용 프로그램입니다),이 :

if (page == 5) { // The page with the canvas on it 
    if (!locationsRendered) { 
    init(); 
    locationsRendered = true; 
} 
} else { // If the page is not the page with the canvas on it 
    if (locationsRendered) { 
     stop(); 
    } 
}

locationsRendered 로컬 영역 앞부분이 제 스크립트 파일 초기화된다.

이 간단한 3D 장면이로드 된 후에 전체 앱의 지연을 허용 할 수 없기 때문에 도움이 될 것입니다. 현실적이지 않습니다.

출처

2014-05-20 Bjornir

당신 장면이 정적으로 나타납니다

그냥이 패턴을 사용합니다. 그 맞습니까? 그렇다면 초당 60 번 다시 렌더링 할 필요가 없습니다. – WestLangley

그것은 매우 정확합니다. 아무것도 컨트롤을 제외하고 애니메이션입니다. 어떤 이유로 컨트롤이 부드럽게 작동하기 위해서는 60fps로 렌더링해야한다고 생각했습니다. 나는 그것을 고치고 다시보고 할 것이다! – Bjornir

'controls.addEventListener ('change', render);를 추가하십시오. ** – WestLangley

장면이 정적이면 애니메이션 루프가 필요하지 않습니다. 마우스 또는 터치 이벤트로 인해 카메라가 움직일 때만 다시 렌더링하면됩니다.

controls = new THREE.OrbitControls(camera, renderer.domElement); 

controls.addEventListener('change', render); 

function render() { 

    renderer.render(scene, camera); 

}

three.js를 r.67

출처

2014-05-20 23:48:40 WestLangley

이 작업을 수행하고 event.target.id! = "threeJS"이고 내 응용 프로그램이 더 빠르고 효율적으로 작동하면 OrbitControls.js 파일로 반환했습니다. 도움을 많이 주셔서 감사합니다! – Bjornir

ThreeJS 렌더링 중지

답변

관련 문제