Three.js를 사용하여 웹사이트에 3D 요소 추가하기

평면 디자인도 훌륭하지만 3D 요소는 웹 디자인 레이아웃을 새로운 차원으로 끌어 올립니다. 애니메이션 3D 그래픽과 대화형 3D 장면이 있는 웹사이트가 그 어느 때보다 주류가 되고 있습니다. 클라이언트는 이제 웹사이트에서 이러한 유형의 디자인을 원하고 귀하에게 요청할 것입니다. 3D 디자인을 웹 디자인 프로젝트에 통합하는 방법을 배우면 경력 경로가 향상되고 더 많은 고객을 확보할 수 있습니다. 고맙게도 Three.js와 같은 리소스는 Divi 디자이너와 개발자가 웹 사이트에 사용자 지정 3D 요소를 추가할 수 있도록 쉽게 제공됩니다.

이 게시물에서는 Three.js의 기본 사항과 웹 사이트에 3D 요소를 추가하는 데 왜 이것이 좋은 선택인지 살펴보겠습니다. 예, 귀하의 Divi 웹사이트도 마찬가지입니다. Three.js를 시작하려면 몇 가지 코딩 지식, 특히 HTML, CSS 및 Javascript가 필요합니다. 아직 코딩하는 방법을 배우고 있다면 처음부터 Three.js 웹 사이트의 단계별 자습서를 따르십시오. 코드를 추가할 위치에 대한 용어가 처음인 경우 기술 단계를 안내하는 데 사용할 수 있는 자습서가 많이 있습니다. 비디오를 시청하거나 Skillshare 또는 Udemy에서 과정을 수강하여 Three.js 라이브러리를 디자인에 통합하는 방법을 실제로 이해하는 것이 좋습니다.

시작하겠습니다.

Three.js 란 무엇입니까?

먼저 Three.js가 무엇인가요?

Three.js는 <canvas>, <svg>, CSS3D 및 WebGL 렌더러를 제공하는 자바스크립트 3D 라이브러리입니다. 플러그인 없이도 브라우저에 3D 디자인을 제공합니다. 라이브러리는 간단한 3D 요소, 복잡한 3D 상호 작용 및 창의적인 애니메이션 게임을 만드는 데 도움이 됩니다. Three.js는 사용자가 자신의 Three.js 제작물을 공유할 수 있는 Github 리포지토리가 있는 오픈 소스 라이브러리입니다.

Three.js가 다루는 모든 렌더러 중에서 가장 일반적으로 사용되는 것은 WebGL입니다. WebGL만으로 3D 요소를 생성하려면 많은 코드 줄과 많은 수학적 지식이 필요합니다. Three.js를 사용하면 장면을 만들고 WebGL로 렌더링하는 것이 훨씬 쉬워집니다.

3D 장면 및 Three.js 용어 이해

Three.js로 3D 애니메이션을 만들려면 먼저 3D 장면이 설정되는 방식을 이해해야 합니다. 3D 설정을 구축하는 데 필요한 세 가지 요소는 다음과 같습니다.

1. 장면
2. 카메라
3. 렌더러

장면 은 Three.js가 표시할 모든 3D 요소를 설정하는 곳입니다. 시각적으로 극장 무대나 텔레비전 세트와 비슷합니다. 카메라 는 장면의 관점이며 인간이 기술적으로 장면의 요소를 보는 방법입니다. 렌더러 는 모든 것을 함께 모아 장면을 그립니다. 3D애니메이션에 능통하신 분이라면 씬 설정의 기준으로 알고 계실 것입니다.

장면이 설정되면 개체가 그 안에 배치됩니다. 객체는 세 단계로 빌드됩니다.

1. 기하학
2. 재료
3. 메쉬

개체의 기하학 은 모양의 골격 또는 기본 윤곽선입니다. 지오메트리에 색상이나 질감을 주기 위해 재료 가 적용됩니다. 지오메트리와 재질의 조합을 메쉬 라고 합니다.

Three.js 라이브러리에는 이미 사용할 수 있는 기본 도형이 많이 있습니다. 처음부터 빌드할 필요가 없습니다. 라이브러리에서 코드로 호출한 다음 사용자 지정하기만 하면 됩니다. 색상에 대한 16진수 코드를 재료로 사용하는 것 외에도 이미지로 텍스처를 생성하거나 텍스처 라이브러리에서 찾을 수 있습니다.

장면을 설정하고 지오메트리를 추가한 후에는 장면을 비추고 개체에 애니메이션을 적용하는 등의 기능을 추가합니다. Three.js 라이브러리에서 사용할 수 있는 기본 개체 외에도 온라인 라이브러리 또는 Blender에서 만든 다른 3D 이미지를 업로드할 수도 있습니다.

Three.js 시작하기

Three.js에 익숙해지는 것이 이보다 더 쉬울 수는 없습니다. Three.js 웹사이트에는 라이브러리의 작동 방식과 사용 방법을 이해하는 데 필요한 모든 문서가 있습니다.

Three.js 웹사이트와 Github에서 가장 단순한 Three.js 애플리케이션을 위한 코드의 라이브 버전을 찾을 수 있습니다. 그들은 JSFiddle을 사용하지만 CodePen 또는 Codesandbox.io에서도 작동하는 것을 볼 수 있습니다.

Three.js 웹 사이트의 단계를 따라 모든 작동 방식을 실제로 이해하는 것이 좋습니다. Codepen, 터미널 또는 선호하는 코딩 소프트웨어를 사용합니다. 전체 Three.js 라이브러리는 장면을 설정하고 수행할 수 있는 작업을 확인하기 시작하면 Threejs.org 웹 사이트에서 사용할 수 있습니다. 아래에서 JSFiddle에서 작동하는 기본 Three.js 애플리케이션을 볼 수 있습니다. 코드로 재생하려면 "JSFiddle로 편집"을 클릭하십시오.

Three.js 학습 리소스

Three.js는 오픈 소스 API이므로 GitHub 리포지토리에서 항상 일이 발생합니다. 항상 새로운 것을 배울 것이 많다는 의미입니다. 고맙게도 그들은 변경 사항에 대해 지속적으로 업데이트되는 디지털 매뉴얼을 만들었습니다. Discoverthreejs.com에서 찾을 수 있습니다. 이것은 지금까지 최고의 리소스입니다. 애플리케이션을 설정하고 라이브러리 자산을 사용하는 방법에 대한 단계별 자습서가 필요한 경우 Three.js 문서의 모든 단계를 안내하는 Skillshare에 대한 훌륭한 과정이 있습니다.

마찬가지로 이 YouTube 튜토리얼은 Three.js로 장면을 설정하는 기본 사항을 보여주지만 기본 웹 개발 기술을 알고 있어야 합니다.

Three.js 및 WebGL에 대해 자세히 알아보려면 이 Udemy 과정에서 모든 것을 설명하고 이 과정이 끝날 때까지 3D 콘텐츠를 유창하게 만들 수 있도록 약속합니다.

핵심적이고 빠르고 더러운 튜토리얼을 찾고 계십니까? CreativeBloq에 대한 이 단계별 코드 자습서는 필요한 것입니다.

Three.js 예제

Three.js를 사용하여 자신만의 3D 디자인을 디자인하는 데 영감을 주는 것보다 더 좋은 것은 없습니다. 꽤 놀라운 Three.js 제작물을 보려면 해당 웹 사이트로 이동하여 탐색하십시오.

Divi와 함께 Three.js 사용하기

Three.js를 Divi와 함께 사용하는 것은 매우 간단합니다. 프로젝트 파일에 자바스크립트 라이브러리를 추가하고 HTML에 추가하기만 하면 됩니다. Divi 레이아웃에 응용 프로그램을 추가하려면 먼저 즐겨 사용하는 코딩 소프트웨어나 컴퓨터 터미널에서 3D 디자인을 별도로 생성합니다. 빌드가 준비되면 자바스크립트를 코드 모듈에 복사합니다. 열고 닫는 <script> 태그를 사용해야 합니다.

결론

Three.js는 웹사이트에 3D 요소를 추가하기 위한 강력한 리소스입니다. 이 게시물에서 우리는 Three.js가 어떻게 작동하는지에 대한 기본적인 사항을 살펴보았습니다. API에는 정말 깊이 파고들고 실험해야 할 것이 너무 많습니다. 가능성은 정말 무궁무진합니다. 단순한 회전 큐브에서 풍부한 디지털 세계의 복잡한 인터랙티브 게임까지. Three.js로 무엇을 만드시겠습니까?

theromb/Shutterstock.com을 통한 주요 이미지