3次元入門

この記事では、インターネット上の 3D に関連するいくつかの重要な概念について説明します。2D および 3D 変換に関するガイドを参照して、これらのアイデアを Webflow プロジェクトに実装する方法を理解してください。

このチュートリアルで扱うトピック:

1. 2Dの基本原理を理解する
2. 水平方向と垂直方向の動き
3. 第三軸の紹介 - Z
4. 視差の概要
5. 3D 設定での 2D オブジェクトの配置

基本的な2D概念を理解する

3 次元を詳しく調べる前に、最初の 2 次元の仕組みを理解することが重要です。具体的には、X 軸に沿った水平方向の動きと、Y 軸に沿った垂直方向の動きが伴います。

ウェブコンテンツの大部分は2Dコンポーネントで構成されています。これには、ウェブサイト上の画像、見出し、段落、ボタンなどの要素が含まれます。これらの要素の幅、高さ、要素間の距離など、すべての寸法は2次元で表され、実際の 深さ。

軸に沿った動き

要素が水平方向に移動すると、X 位置が調整されます。同様に、垂直方向に移動すると、Y 位置が調整されます。対角方向の移動は、X 調整と Y 調整の組み合わせによって実現されます。

したがって、2 次元での位置決めには X 軸と Y 軸が関係します。

Z軸の紹介

ここで、3 次元である Z 軸に注目しましょう。3 次元で作業する場合、左右上下に移動するだけでなく、奥行きも考慮する必要があります。

ウェブは多くの 2D 要素で構成されているので、それらを例に挙げてみましょう。すべての 3D 要素が突起物や完全な 3D オブジェクトである必要はありません。実際、個々の 2D 要素は、3D 空間内で Z 軸に沿って操作できます。移動、回転など、基本的に何でも可能です。

パララックスの概要

3D モーションの魅力的な側面の 1 つは、視差の概念です。以下の例では、視差を示すためにテーブルの上にカードを置いています。カードは物理的に動いていません。代わりに、カメラまたは視野が X 軸に沿ってのみ移動しています。

近くにあるカードはより速く動いているように見え、遠くにあるカードはよりゆっくりと動いているように見えることを観察してください。近くの物体と遠くの物体の間の速度のこの変化は、視差として知られています。

3次元空間における2D要素

興味深いのは、これらのカードにはまったく奥行きがないことです。横から見ると、カードは消えてしまいます。 重要な ポイントは、3D モーションには必ずしも 3D オブジェクトが必要ではないということです。

視差モーションを組み込むことで、プロジェクトに奥行きを加えることができます。さまざまな要素をわずかに異なる速度で動かすことで、効果的に 3 次元的な外観を作り出すことができます。