要在螢幕上顯示 3D 圖形，在 Three.js 中需要以下的基本元素：

場景（Scene）：供其他元素設置的空間。

相機（Camera）：在場景中建立觀察點，並確定觀察方向、角度。

透視投影相機（PerspectiveCamera）

正交投影相機（OrthographicCamera）

物體（Objects）：在場景中添加被觀察的物體。

網格模型（Mesh）

粒子模型（Points）

物體（Object）組成

光源（Light）：在場景中用來照亮物體的光。

不過在 Three.js 中有一些材質並不需要考慮光源即可被渲染在畫面上，例如 MeshBasicMaterial  、 MeshNormalMaterial  ，能夠與光源互動的材質一般會用 MeshLambertMaterial  或 MeshPhongMaterial  。

在 Three.js 中提供了包括環境光（AmbientLight）、點光源（PointLight）、 聚光燈 （SpotLight）、方向光（DirectionalLight）、半球光（HemisphereLight）等多種光源。

The [DirectionalLight](<https://threejs.org/docs/#api/lights/DirectionalLight>)  is designed to mimic a distant source of light such as the sun. Light rays from a DirectionalLight  don’t fade with distance. All objects in the scene will be illuminated equally brightly no matter where they are placed - even behind the light

The light rays of a DirectionalLight are parallel and shine from a position and towards a target . By default, the target is placed at the center of our scene (the point (0,0,0)), so as we move the light around it will always shine towards the center.

渲染器（Renderer）：將所要呈現的場景渲染到畫面上。

Three.js 中有不只一種渲染器，但一般而言都是使用 WebGLRenderer  這個渲染器，它能支援較多功能，像是材質、陰影等等，在後面的程式碼中會看到常透過渲染器來設定預設背景顏色、場景尺寸、陰影效果