Three.JS => 큰 .Obj 파일을 300Mb 정도로드하면 브라우저가 다운되고로드하는 데 많은 시간이 걸릴 것입니다.

Question

로드하려는 .obj 파일 크기는 약 300MB입니다. 메신저 그 파일을로드하면 브라우저가 충돌하고로드하는 데 더 많은 시간이 걸릴 것이지만 그 후에는 메모리 코어가 버려진다고 말할 것입니다 ...

그래서 제가 여기 큰 물체를로드하는 데 실종 된 다른 방법이 있습니다 파일 및 자료 파일.

는 ... 사전에 감사합니다 : slight_smile :이

Answer 1

너무 많은 당신이 당신의 파일 및 응용 프로그램을 최적화 할 수 있습니다.

1. 최대한 폴리 카운트를 감소시킨다. 모델이 지나치게 상세히 설명되어서는 안된다는 것을 기억하십시오.

2. 변환의 Obj JSON으로 파일 및/또는 장면의 각 개체에 대한 saperate JSON 파일을 만듭니다. 기하학은로드하려는 파일에있는 가장 무거운 데이터입니다. 그래서, 가능하면, 각각에 대해 별도의 BufferGeometry 파일을 생성하고 당신은 모든 JS와 JSON 파일을로드하기 전에 몇 가지 압축/압축 해제 기술을 사용할 수 있습니다 BufferGeometryLoader

3. 를 통해로드합니다. OpenCTM 압축을 확인하십시오. gzip 파일을 시도해보고 onload를 압축 해제 할 수도 있습니다.

4. 메시를 생성 할 때 3D 모델링 단계에서 은 가능한 한 많은 형상을 병합합니다.. 가장 쉬운 방법은 동일하거나 유사한 재료를 가진 모든 메쉬를 확인하고, 그러한 지오메트리를 병합하고, 동일한 지오메트리를 동일한 재료에 할당하는 것입니다. 기하학 수가 적을수록 렌더링 파이프 라인에서 그리기 호출 수가 적어집니다. 따라서 성과가 향상됩니다.

5. 당신은 renderer.info

6. 이 낮은 해상도에서 텍스처 파일 크기를 계속 사용하여 drawcalls의 추적 할 수 있습니다. 일반적으로 다음을 권장합니다. 1K.

7. 재료 성능 비용이 MeshBasicMaterial < MeshLambertMaterial < MeshPhongMaterial < MeshStandardMaterial < MeshPhysicalMaterial처럼 간다. 따라서 재료를 지오메트리에 지정할 때주의하십시오. Threejs 문서는 각 자료의 모든 기능을 명확하게 보여줍니다. 따라서 소재의 일부 속성이 개체에 필요하지 않다는 것을 알고 있다면으로 대체하십시오.

8. 가짜 goemetries에 normalMaps을 사용하십시오. 이렇게하면 vertices 숫자가 줄어 듭니다.

9. 씬이 정적 인 경우 씬에 aoMap 및 LightMap을 사용하면 광원 및 계산 비용이 필요 없습니다.

10. 장면이 정적 인 경우 requestAnimationFrame을 중지하고 필요할 때만 렌더링합니다. 예. orbitcontrol.js를 사용하는 경우 사용자 작업이 실행될 때 렌더링하려면 onChange 메서드를 사용하십시오.

11. 디버그의 에 대한 Threejs Inspector 및 WebGL Inspector와 같은 크롬 확장을 사용하십시오.

12. 장면에서 어떤 것도 동적으로 제거하려면 데이터를 올바르게 처리하십시오 ().

13. 300mb 파일이 대단히 큽니다. 30MB 이하로 줄여야합니다. 이상적으로는 최상의 경험을 위해 10MB 미만으로 설정하는 것이 가장 이상적입니다. 훨씬 더 당신이이 지점의 대부분을 달성 할 수있는 경우, 수행 할 수 있습니다

, 당신은 현재의 문제에서 해방 될 것입니다 후 사전 최적화에 집중할 수 있습니다. Threejs documentation을 고집하는 것이 좋습니다.