うちのいぬ Tech Blog

Tech Blog of Uchinoinu/My dog

Three.js入門 1

👇のチュートリアルから入門してみました。

codepen.io

Scene

Sceneは3D空間であり、オブジェクトやカメラ、光源を配置できます。 Sceneの空間のは必要に応じて、拡縮できます。

var scene = new THREE.Scene();

Camera

Cameraの設定をするときには以下の4つの要素の設定をする必要があります。

  • fov: viewの垂直面。CameraのViewがリーチできる垂直空間のサイズ
  • aspect: 垂直線に基づいて水平視野を作成するために使用する縦横比
  • near: 最も近い平面View。CameraのViewが始まる場所
  • far: 遠い平面View。CameraのViewが終わる場所

Lighting

空間はLightingで照らすことが出来ます。

  • Directional Lights: ある1つの方向から照らす大きな光源(🌅とか)
  • Ambient Lights: Sceneの為の少ない光源とたくさんのソフトカラー
  • Point Lights: 蛍光バルブ灯の様な、全方向に輝いて範囲に制限がある光
  • Spot Lights: スポットライトそのもの
  • Hemisphere Lights: Sceneの天井や床からくる方向性をもたないアンビエント

ここまでやってみて

難しい。。。。

いきなり用語説明されてもわけわからないので、別のルートを探そうか。