Three.jsのジオメトリで色々つくる

Sponsored Links

Pocket

Three.jsでは基本的な3D形状を生成するためのジオメトリクラスが用意されています。ジオメトリクラスを使うことで、ボックスやスフィアなどを生成できます。

下準備

3Dオブジェクトを生成する前に、必要な共通のコードを準備します。

直階段

真っ直ぐな階段なので、y座標、z座標をずらしながらキューブを生成することで表現できます。 Vector3.set()でVector3オブジェクトの要素に値を設定しています。直接Vector3オブジェクトを代入することはできないので、別のVector3から要素値を設定したい場合はVector3.copy()を使用します。また、各要素(x,y,z)に対してはVecotr3.xのように直接値を代入できます。 Camera.lookAt()で階段の中心を見るように設定しています。

See the Pen Untitled by noralog (@noralog) on CodePen.

樹木

See the Pen Untitled by noralog (@noralog) on CodePen.

レンガ積み

See the Pen Untitled by noralog (@noralog) on CodePen.

ランダムに八面体を散らす

See the Pen Untitled by noralog (@noralog) on CodePen.

螺旋階段

See the Pen Untitled by noralog (@noralog) on CodePen.

Pocket

Sponsored Links

コメントを残す

メールアドレスが公開されることはありません。