HTML5의 WebGL 3D 개요(2부) - 클래스 라이브러리 개발 및 Framework_html5 튜토리얼 기술 소개

앞서 네이티브 WebGL API를 사용하여 개발하는 것이 얼마나 힘든지 살펴봤습니다. 이로 인해 수많은 WebGL 프레임워크가 개발되었습니다. 이러한 프레임워크를 사용하면 필요한 3D 장면을 빠르게 만들 수 있습니다. 이러한 프레임워크는 장면, 카메라, 모델, 조명, 재료 등과 같이 3D 장면을 만들기 위한 다양한 요소를 캡슐화하므로 필요한 3D 장면을 쉽게 만들 수 있으므로 집중하기만 하면 됩니다. 논리에 대해 더 자세히 알아보세요.

현재로서는 다른 프레임워크를 압도할 수 있는 장점이 없습니다. 어떤 프레임워크를 선택할지는 개인 취향에 따라 다르지만, 개인적으로는 프레임워크를 선택할 때 마지막 업데이트 시간을 살펴보는 것이 좋다고 생각합니다. 안정적이고 업데이트된 프레임워크를 사용하면 항상 최신 기능을 사용할 수 있어 프로그램이 더욱 안정적으로 만들어집니다.

다음 예제는 Three.js 프레임워크를 사용하여 개발되었습니다.
Three.js는 3D 장면의 다양한 요소를 잘 캡슐화하는 비교적 포괄적인 오픈 소스 프레임워크입니다. 이를 사용하여 카메라, 모델, 조명, 재료 등을 쉽게 만들 수 있습니다. 다양한 렌더러를 선택할 수도 있습니다. Three.js는 렌더링에 캔버스를 사용하도록 선택하거나 렌더링에 WebGL 또는 SVG를 사용할 수 있습니다.

게다가 Three.js는 다양한 형식의 3D 파일을 로드할 수 있습니다. 모델 파일은 Blender, Maya, Chinema4D, 3DMax 등에서 가져올 수 있습니다. 그리고 (구체) 구, (평면) 평면, (큐브) 큐브, (실린더) 원통과 같은 상대적으로 기본적인 것들이 내장되어 있습니다. Three.js를 사용하면 이러한 개체를 매우 쉽게 만들 수 있습니다.

자, 더 이상 말도 안 되는 소리는 하지 말고 코드를 보세요.

코드 복사

코드는 다음과 같습니다. :

<메타 문자 집합 ="utf-8 ">