環境

MAMP導入済み
Visual Studio Code　設定済み

今回使用する言語

HTML
CSS
JS

作業の目次

１：各フォルダの作成
２：HTMLのコード作成
３：JSのコード作成
４：CSSのコード作成

1:各フォルダの作成

1.下記の画像のように、CSS / JS / img フォルダを作成しましょう！

２：HTMLのコード作成

1.threeJS_4.htmlファイルを作成!

2.head部分を作成しよう

３行目　を記入

４行目を記入
ここではCSSフォルダ内のNewstyle.cssを読み込みます。

５行目　を記入
これを読み込むことで、Three.jsが使用できるようになります！

６行目を記入
ここではjsフォルダ内のMoon.jsを読み込みます。

3.body部分を作成しよう

９行目 div class="example"クラスの宣言

１０行目　nav class="regular"　クラスの宣言

１１〜１３行目　Ulタグ　liタグで作成

１４行目　/nav で閉じる

１６行目　
ここでcanvasのidを宣言
このmyCanvasに対して、３Dアニメーションが効いてきます！

１７行目　pタグで表示したい文字記入今回はMoonと記入

以上でHTMLコードの作成完了

３：JSのコード作成

- 1.ページの読み込み確認とサイズの指定

ページの読み込みが完了してから４行目のfunction init() {　以降の処理を実行していきます！

6~7行目でページの大きさを決めます！

- 2.レンダラーを作成しよう！
※レンダラーとは仮想的な3D空間における物体を2Dのディスプレイに適切に描画するためのもの。

１０行目のWebGLRendererとは：その名のとおり、WebGLを扱うレンダラーのことです。

- 3.シーンとカメラの作成！

シーンとは：3D空間のことで、3Dオブジェクトや光源などの置き場のことです。

カメラとは：3D空間上での視点の位置を指します！

4.月と輪を作成しよう！

２６行目でmaterial（マテリアル）を作成します。
ここでは物体の色や質感または付与したい画像をロードします！

※月の画像は各自で用意してください。

３１行目でgeometry（ジオメトリ）を作成します。
主に、物体の形状を決めるものです。
例：球体・ドーナツ・キューブ

３４行目でmesh（メッシュ）を作成します。
これは、materialとgeometryの情報を元に物体を作るものです。

３６行目のmesh.position.set(300, 0.5, 0.5);は物体の初期位置を決めるものです。

３９行目のscene.add(mesh);でメッシュを3D空間に挿入します！

同じように、輪の形状のものを作成しよう！

5.光源を設置しよう！

※光源（ライト）とは、物体に対しての光の角度や、光の明るさ、を調整して陰影を作り出すものです。

５７行目：DirectionalLightクラスを定義

５８行目：directionalLightの初期位置を指定

６３行目：PointLightクラスの定義

6.星屑の作成！

７１行目：createStarField();で宣言

７３行目： function createStarField()

97行目： tick();の中に今までの設定が入っていると考えてください！

7.物体に動きを与えよう！

１００行目：tick()の配列の中に動きを入れます。

１０２〜１０３行目：X・Y方向に向かって回転させる速さむきを調整します。

１０７〜１１１行目：三角関数を元に。Sin/Cosを使ってライトの周回向きを調整する

１１４〜１１５行目：X・Y方向に向かって回転させる速さむきを調整します。

１１９行目：レンダリングを行う。

１２１行目：アニメーションの実行！

４：CSSのコード作成

.example では位置を設定します！

.example pではpタグ内の文字の設定をします！

navではnav要素全体の大きさや色合いを設定します！

nav ulでは行全体の設定をします！

nav a ではaタグ内の文字の設定をします！

nav li a:hover ではaタグにカーソルを合わせた時のアクションを設定します。

myCanvasでは画面全体のデザイン、背景の設定もおこないます。
※背景となる銀河などの写真は自由です。

完成

以上でThree.JSによる作品の制作は完了です！

最後に下記のgitからコードをクローンして答え合わせをしましょう！
https://github.com/katayama502/TEST_ThreeJS