今回は、Webにおける3Dの基本的な概念について説明します。Webflowプロジェクトでこれらの概念を実践する方法については、2Dおよび3D変換のガイドをご覧ください。
このレッスンでは
- 2Dの基本を理解する
- X軸とY軸に沿った動き
- Z軸の紹介
- 視差の概要
- 3D空間における2Dオブジェクト
1.2次元の基本を理解する
3次元に入る前に、まず最初の2次元の仕組みを理解する必要があります。具体的には、X軸に沿った水平方向の動きと、Y軸に沿った垂直方向の動きについて説明します。
Web上のコンテンツのほとんどは、2Dの要素で構成されています。これには、画像、見出し、段落、ボタンなど、Webサイトで目にするあらゆるものが含まれます。これらの要素の幅や高さ、他の要素との距離などは、すべて2次元で行われます。実際の奥行きはありません。
2.X軸とY軸に沿った移動
要素が水平方向に移動するとき、そのX位置を調整しています。また、垂直方向に移動する場合は、そのY位置を調整します。斜めに移動する場合は、XとYの組み合わせで行います。
つまり、X軸とY軸の2次元での位置決めです。
3.Z軸の導入
では、3つ目の次元について説明します。Z軸」です。もちろん、3次元で扱う場合は、単に左右や上下に動くだけでなく、奥行きも扱います。
そして、ウェブはこうした2Dの要素で構成されていることが多いので、それを例にとって説明します。3Dのすべてが押し出しや3Dオブジェクトでなければならないわけではありません。実際には、個々の2D要素を取り出して、3D空間の中でZ軸に沿って操作することができます。移動させたり、回転させたり、好きなように操作することができます。
4.視差の概要
3Dモーションで最も優れている点の1つは、視差のアイデアです。下の例では、視差を説明するために、テーブルの上にカードを立てています。カードはどれも動いておらず、カメラを左右に動かしているだけです。カメラや視野をX軸方向に動かしているだけです。
手前の名刺はより速く動いているように見え、遠くの名刺はより遅く動いているように見えます。そして、遠くにある名刺は、よりゆっくりと動いているように見えます。このズレ、つまり、近くにあるものと遠くにあるものの速度の差が視差です。
5.3D空間の2Dオブジェクト
このマジックは、どのカードにも奥行きがないことです。横から見ると、消えています。重要なのは、3Dモーションには必ずしも3Dオブジェクトが必要ではない、ということです。
パララックスモーションは、プロジェクトに奥行きを与えることができる概念です。異なる要素を少しずつ異なる速度で動かすことで、3D感を演出することができます。