【Three.js】現実時間と連動した、うちの子の日常【JavaScript】
地平線付近: HSV(100, 0.2, 1)
説明
これは、私の内面世界を形にした作品です。
現実時間と連動し、昼夜が移り変わる世界で、
私のオリジナルキャラクター（うちの子）が、日常を過ごします。
イメージとしては、キャラが生活している世界を、私たちがのぞき込んでいる？
「環境映像」、現実でも全国各地にある「ライブカメラ」に近いかもしれません。
タイトル案
やさしくかがやく環境 - Gently Radiant Environment
スケジュール
07:00 おきる
09:00 ~ 9:40 あさごはん
17:00 ~ 18:00 よるごはん
21:00 ねる
太陽
球面三角法を利用し、日時、緯度、赤緯から太陽の天頂角（高度角）と方位角を計算しています。
方位角は0°が北です。天頂から見て時計回りに0~360の値を取ります。
ただし、あくまで簡略化しており、現実とは誤差があります。
太陽、地球ともに完全な球体としています。
太陽と地球の距離は無限としています。
大気の屈折は考慮していません。
緯度は35°にしました。東京をイメージしました。
経度は0°固定にしました。時差はないものとしています。表示される時間は日本時間です。
経度は、季節ごとの太陽の高度の変化に影響を及ぼしません。
太陽の色 空の色
太陽の高度により空の色が変化します。
色は私のフィーリングで決めています。物理学的な計算はしていません。
表示されているのはHSV色空間での数値です。
H（色相）は0~360、S（彩度）は0~1、V（明度）は0~1の値を取ります。
太陽と環境光以外のライト
3つあります。
2つは太陽の高度が0°未満になったらつきます。もう1つは太陽の高度が-18°未満になったらつきます。
ただし、睡眠中はオフになります。
※太陽の高度が-18°未満になったら、太陽はオフになります。
負荷を減らすため、シーン内で同時に灯るライトは3つ（環境光を含むと4つ）までにしています。
-18°な理由は、それが空が完全に暗くなる高度らしいからです。
参考サイト：薄明 - Wikipedia アクセス日時: 2025/06/05 19:30
天分薄明 - Astronomical Twilight 高度: -18°~-12°
航海薄明 - Nautical Twilight 高度: -12°~6°
市民薄明 - Civil Twilight 高度: -6°~50'
操作方法
「タイムマシン」で指定した時間に変更できます。
季節の変化や特定のイベント（ねるなど）をすぐ見たい時に使ってください。
「カメラのデバッグモードをonにする」をクリックすると、マウスでカメラを自由に動かせるようになります。一部のライトのヘルパーも表示します。もう一度押すと戻ります。
今後の予定、アイデア
時間イベントを増やす
風呂など。
キャラクターを増やす
背景を増やす
v0.1時点では殺風景なので、もっと色々な要素を追加したい。
様々な国の再現として緯度のバリエーションを増やす。
色などを美しくする
幻想的な...夢のような...。
天気を実装する
晴れ、曇り、雨、雪、雷、台風、砂嵐など...。
星、星座を実装する
現実の星空をマッピングできたら良いかもしれません。季節や緯度によって見える星は違う。
月を実装する
月の位置、満ち欠けを再現する。
月時計も実装する。 参考サイト： [こかげ] 月時計
ちゃんと空に月が見えるように、カメラの角度などを調整する。
音楽や効果音を鳴らす
音声ファイルは容量が重いので、midiで鳴らす。
時間帯、天気、季節などによって変える。トラック事に分ける。
お正月、ひな祭り、クリスマスなどの特定の日限定の演出を追加する
音楽も、ひな祭りの時はひな祭り、クリスマスの時はジングルベルなどのクリスマス曲を流す。
時報
キャラクターの行動パターンを増やす
キャラクターの反応
例えば...キャラをクリックしたら、そのキャラが気づいてこっちに来る。
情報
解像度
全体 1024x576 16:9
それぞれ16の倍数（結果的に8,4,2の倍数でもある）です。
フレームレート
24fps
Q/A
実況したりファンアートを描いても良いですか？
常識的な範囲内であればOKです。
ソースコードは見れます。参考にするのは良いですが、無断転載はしないでください。
アップデート履歴
2025/05/29
制作開始
2025/06/06 Ver.0.1
初公開。
1週間で作るチャレンジでしたが、実際は9日かかりました（2日オーバー）。
※事前にJavaScriptやThree.jsの多少の知識はありました。
内容
・キャラ2人 ・太陽の動きの変化 ・起きる 食事 寝る等のイベント
コードはスパゲッティで、バグも多いと思います。
使用ツール
- プログラミング言語：HTML, CSS, JavaScript
- Webで3DCGを表示するためのライブラリ：Three.js
- テキストエディタ：Visual Studio Code
- 2Dグラフィック：Clip Studio Paint
- 3Dモデリング：Blender
- アシスタント：Microsoft Copilot
...等
検索用キーワード
threejs, three js, 作品, 優しく輝く, オリジナル, 自作, ケモノ, 動物