새로운 데모! 2021년 내내 하루에 하나! 오늘은 HTML 3D 툴킷인 LUME에 <lume-gltf-model> 요소를 추가했습니다.

이것은 <img> 태그와 유사하게 작동합니다. 다음과 같이 파일에 src 속성을 지정하기만 하면 됩니다.

<lume-gltf-model src="path/to/model.gltf"></lume-gltf-model>

LUME로 제작:

루메 / 루메

HTML을 사용하여 CSS3D/WebGL 애플리케이션을 선언적으로 생성합니다. 일반 DOM 요소에 그림자와 조명을 제공합니다.

모바일에서 데스크톱, AR/VR에 이르기까지 모든 장치에서 풍부한 대화형 2D 또는 3D 경험을 간편하게 생성할 수 있는 툴킷입니다.

집 · 설명서 · 예시 · 포럼 · 채팅 · 원천

npm 설치 lume

특징

LUME는 개별적으로 사용할 수 있는 여러 패키지로 구성되어 있습니다.
전체적으로 함께:

lume - 풍부한 그래픽을 위한 HTML 요소

풍부한 대화형 2D 또는 3D 애플리케이션을 쉽게 정의하기 위한 HTML 요소
CSS와 WebGL 모두에 의해 구동됩니다.
이 패키지는 아래 패키지의 기능을 사용하고 다시 내보냅니다.

glas - AssemblyScript로 작성된 WebGL 엔진

이것은 AssemblyScript에 대한 Three.js의 포트입니다(다음으로 컴파일되는 TypeScript).
일관된 성능으로 WebGL 그래픽을 실행하기 위한 WebAssembly).

@lume/element - HTML 요소를 정의하는 시스템

빠르고, 새롭고, 빠르게 만들 수 있는 웹 컴포넌트 시스템입니다.
간단한 방법으로 성능 HTML 요소. 위한 토대를 제공합니다.
루메의…

View on GitHub


주제: #threejs #webgl #css #javascript #webdev #graphics #365DaysOfCode2021