오늘은 시간이 제한되어 있었지만 여전히 하루에 하나의 데모였습니다! 그래서 예전 데모의 #애니메이션과 색상을 수정했습니다.

그것은 당시 LUME가 가지고 있던 CSS 3D 렌더링만을 사용합니다.



LUME의 WebGL 렌더링 기능을 사용하면 일반 HTML 콘텐츠(div 태그, span 태그 등)를 동일한 3D 렌더링 공간에서 3D 콘텐츠와 혼합할 수 있습니다. 내 예제를 확인하고 2021년 내내 매일 새로운 데모를 시청하세요!

👇 제작:

루메 / 루메

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

트윈 / tween.js

자바스크립트 애니메이션 엔진

tween.js

쉬운 애니메이션을 위한 JavaScript 트위닝 엔진, 최적화된 Robert Penner의 방정식 통합.




업데이트 참고 v18에서는 포함해야 하는 스크립트가 src/Tween.js에서 dist/tween.umd.js로 이동했습니다. 아래installation section를 참조하십시오.

const box = document.createElement('div')
box.style.setProperty('background-color', '#008800')
box.style.setProperty('width', '100px')
box.style.setProperty('height', '100px')
document.body.appendChild(box)
// Setup the animation loop.
function animate(time) {
    requestAnimationFrame(animate)
    TWEEN.update(time)
}
requestAnimationFrame(animate)
const coords = {x: 0, y: 0} // Start at (0, 0)
const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
    .to({x: 300, y

…


View on GitHub

원본 데모는 다음과 같습니다.



주제: #css #javascript #webdev #3D #CSS3D #365DaysOfCode2021