3차원 소개

이 문서에서는 인터넷의 3D와 관련된 몇 가지 필수 개념에 대해 설명합니다. Webflow 프로젝트에서 이러한 아이디어를 구현하는 방법을 이해하려면 2D 및 3D 변환에 대한 가이드를 살펴보세요.

이 튜토리얼에서 다루는 주제:

1. 2D 기본 원리 파악
2. 수평 및 수직 이동
3. 세 번째 축 소개 – Z
4. 시차 개요
5. 3D 설정에서 2D 개체 배치

기본 2D 개념 이해

3차원을 탐구하기 전에 초기 2차원의 작동을 이해하는 것이 중요합니다. 특히 이는 X축을 따라 수평으로 이동하고 Y축을 따라 수직으로 이동하는 것을 수반합니다.

대부분의 웹 콘텐츠는 2D 구성 요소로 구성됩니다. 여기에는 웹사이트에 있는 이미지, 제목, 단락, 버튼 등의 요소가 포함됩니다. 너비, 높이, 요소와 다른 요소 사이의 거리를 포함하여 이러한 요소의 치수는 모두 2차원으로 발생하므로 실제 요소가 부족합니다. 깊이.

축을 따른 이동

요소가 수평으로 이동하면 X 위치가 조정됩니다. 마찬가지로 수직 이동에는 Y 위치 조정이 포함됩니다. 대각선 이동은 X 및 Y 조정의 조합을 통해 이루어집니다.

따라서 2차원 위치 지정에는 X축과 Y축이 포함됩니다.

Z축 소개

이제 세 번째 차원인 Z축에 초점을 맞춰 보겠습니다. 3차원으로 작업할 때는 단순히 왼쪽, 오른쪽, 위, 아래로 움직이는 것이 아닙니다. 그것은 또한 깊이를 포함합니다.

웹이 많은 2D 요소로 구성되어 있다는 점을 고려하여 이를 예로 들어보겠습니다. 모든 3D 요소가 돌출부이거나 완전한 3D 개체일 필요는 없습니다. 실제로 개별 2D 요소는 Z축을 따라 3D 공간 내에서 조작될 수 있습니다. 이동하거나 회전할 수 있습니다. 기본적으로 무엇이든 가능합니다.

시차 개요

3D 모션의 흥미로운 측면 중 하나는 시차 개념입니다. 아래 예에서는 시차를 보여주기 위해 테이블 위에 카드가 있습니다. 어떤 카드도 물리적으로 움직이지 않습니다. 대신 카메라 또는 시야가 X축을 따라서만 이동됩니다.

우리에게 더 가까운 카드가 어떻게 더 빨리 움직이는 것처럼 보이는 반면, 멀리 있는 카드는 더 느리게 움직이는 것처럼 보이는지 관찰하세요. 가까운 물체와 먼 물체 사이의 이러한 속도 변화를 시차라고 합니다.

3차원 공간의 2D 요소

흥미로운 부분은 이 카드에 깊이가 전혀 없다는 것입니다. 옆에서 보면 사라집니다. 그만큼 중대한 요점은 3D 모션에 항상 3D 개체가 필요한 것은 아니라는 것입니다.

시차 모션을 통합함으로써 프로젝트에 깊이를 더할 수 있습니다. 다양한 요소를 약간 다른 속도로 이동하면 효과적으로 3차원 모양을 만들 수 있습니다.