1. 제품
  2.   3D
  3.   JavaScript
  4.   Curtains.js
 
  

3D 상호작용 및 애니메이션 생성을 위한 자바스크립트 라이브러리 

HTML DOM 요소를 대화형 질감 평면으로 변환할 수 있는 오픈 소스 자바스크립트 API입니다. WebGL을 쉽게 관리하고 웹페이지의 DOM 요소를 기준으로 메시를 배치할 수 있습니다.

Curtains.js는 소프트웨어 개발자가 HTML DOM 요소를 대화형 텍스처 평면으로 쉽게 변환할 수 있는 기능을 제공하는 오픈 소스 경량 JavaScript 라이브러리입니다. 라이브러리는 크기는 작지만 매우 안정적이어서 사용자가 강력한 3D 상호 작용 및 애니메이션을 쉽게 만들 수 있습니다. 이미지와 비디오가 포함된 HTML 요소를 3D WebGL 텍스처 평면으로 손쉽게 변환하여 사용자가 셰이더를 통해 애니메이션을 만들 수 있습니다.

라이브러리는 사용하기 매우 쉽지만 HTML, CSS, JavaScript 및 셰이더에 대한 기본적인 지식이 있어야 합니다. 셰이더는 그래픽 파이프라인에서 실행되고 컴퓨터에 각 픽셀을 렌더링하는 방법을 알려주는 일련의 명령입니다. 또한 버텍스 및 프래그먼트 셰이더, 유니폼 사용 방법 및 GLSL 구문 기본 사항에 대해 더 많이 알아야 합니다.

이 Curtains.js는 MIT 라이선스에 따라 사용할 수 있으므로 개인 및 상업용 프로젝트에 무료로 사용할 수 있습니다. 라이브러리의 주요 목표는 WebGL을 처리하고 웹 페이지의 DOM 요소를 기준으로 메쉬를 배치하는 쉬운 방법을 제공하는 것입니다. WebGL은 브라우저 내에서 3D 및 2D 그래픽의 실시간 렌더링을 위한 JavaScript API입니다.

Previous Next

Zen-3d 시작하기

Curtains.js를 설치하는 가장 쉬운 방법은 npm을 사용하는 것입니다. 원활한 설치를 위해 다음 명령어를 사용해주세요.

NPM을 통해 Curtains.js 설치

npm i curtainsjs

JavaScript를 사용하여 장면 관리

오픈 소스 라이브러리인 curtains.js에는 장면 관리 및 관련 속성과 관련된 유용한 기능이 포함되어 있습니다. 씬은 평면과 셰이더 패스를 포함하여 그려질 모든 객체를 서로 다른 배열에 쌓고 그릴 올바른 순서로 호출합니다. 평면 스택을 재설정하고, 장소 스택을 지우고, 새 장소 인덱스로 다시 빌드하고, 장면에 새 평면을 추가하고, 장면에서 평면을 제거하고, 평면의 위치를 변경하는 등의 작업을 쉽게 수행할 수 있습니다.

렌더링 속성 처리

무료 라이브러리인 curtains.js는 애플리케이션 내에서 쉽게 렌더링을 처리할 수 있는 기능을 제공합니다. Renderer 클래스 처리는 생성 및 복원, 확장, WebGL 명령 등과 같은 WebGL 컨텍스트와 관련된 몇 가지 중요한 기능을 제공했습니다. 컨테이너를 생성하고, 캔버스를 추가하고, WebGL 확장을 처리하고, 컨텍스트 손실/복원 이벤트를 처리하고, 추가된 모든 객체를 추적할 Scene 클래스 객체를 생성하는 데 사용할 수 있습니다. 위의 내용 외에도 장면 정리, 프레임 버퍼 바인딩, 깊이 설정, 혼합 기능 등과 같은 전역 WebGL 명령 처리도 지원합니다.

JavaScript를 통해 이미지 및 비디오 애니메이션

오픈 소스 라이브러리인 curtain.js는 소프트웨어 개발자에게 자신의 애플리케이션 내에서 쉽게 이미지와 비디오를 애니메이션으로 만들 수 있는 능력을 제공합니다. 라이브러리를 통해 개발자는 CSS 규칙에 의해 정의된 위치와 크기를 사용하여 일반 HTML 요소처럼 작동하는 이미지와 동영상이 포함된 평면을 만들 수 있습니다. 또한 다중 텍스처, 다중 평면, 다중 평면 캔버스 텍스트, 다중 비디오 텍스처 등을 사용할 수 있습니다.

 한국인