#46|3Dの動きと視差について

今回は、Web用の3Dの基本的なコンセプトについて説明します。

目次


今回は、Webにおける3Dの基本的な概念について説明します。Webflowプロジェクトでこれらの概念を実践する方法については、2Dおよび3D変換のガイドをご覧ください。

このレッスンでは

  1. 2Dの基本を理解する
  2. X軸とY軸に沿った動き
  3. Z軸の紹介
  4. 視差の概要
  5. 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感を演出することができます。