【Three.js】現実時間と連動した、うちの子の日常【JavaScript, TypeScript】

Posted: / Modified:
ねこロボット
こんにちは、どうしますか？（選択肢は下画面を見て下さい。）
はい
いいえ
CONTROLS
INFOMATION
くにのなまえ
日の出
08:00
日の入
20:00

空の色 太陽の色

操作方法

「タイムマシン」で指定した時間に変更できます。
季節の変化や特定のイベント（ねるなど）をすぐ見たい時に使ってください。

マウス（スマホの場合はタップ）でカメラを自由に動かせます。

マウス

右クリックしながらマウスを動かす：カメラの角度を変える

Shiftを押しながら右クリックしながらマウスを動かす：カメラの角度は変えずに位置を移動する

ホイール：カメラの位置を前後に移動する（拡大縮小）

タップ

指1本をスライドさせる：カメラの角度を変える

指2本をスライドさせる：カメラの角度は変えずに位置を移動する

指2本で広げたり縮めたりする：カメラの位置を前後に移動する（拡大縮小）

説明

これは、私の内面世界を形にした作品です。

現実時間と連動し、昼夜が移り変わる世界で、
私のオリジナルキャラクター（うちの子）が、日常を過ごします。

イメージとしては、キャラが生活している世界を、私たちがのぞき込んでいる？
「環境映像」、現実でも全国各地にある「ライブカメラ」に近いかもしれません。

タイトル

やさしくかがやく環境 - Gently Radiant Environment

スケジュール

07:00　おきる

09:00 ~ 09:40　あさごはん

17:00 ~ 18:00　よるごはん

19:00 ~ 20:00　おふろ

21:00　ねる

太陽

球面三角法を利用し、日時、緯度、赤緯から太陽の天頂角（高度角）と方位角を計算しています。
方位角は0°が北です。天頂から見て時計回りに0~360の値を取ります。

ただし、あくまで簡略化しており、現実とは誤差があります。

太陽、地球ともに完全な球体としています。
太陽と地球の距離は無限としています。
大気の屈折は考慮していません。
均時差は考慮していません。
歳差は考慮していません。

経度は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'

空の色の仕組み

空の色は「天頂　中間　地平線付近」の3色のグラデーションになっています。

それらの色は、太陽の高度に応じて、変わります。

具体的には、それぞれの高度の閾値に色が設定されています。

現在の高度から、　どの色同士を混ぜるかを調べ、その色同士、色1と色2をどの割合で混ぜるか（係数）を決めます。
最終的な色は係数(factor)に応じた加重平均です。

例えば、以下はVer.0.2のでんきのくにの空色です。（HSV表記）

日の出 朝 昼 夕方 日の入り 夜
0° 12° 90° 12° 0° -18°以下
206, 0.45, 0.40
222, 0.60, 1.00
220, 0.70, 1.00
220, 0.60, 1.00
194, 0.55, 0.40
240, 0.20, 0.20
230, 0.40, 0.80
210, 0.40, 1.00
210, 0.55, 1.00
205, 0.40, 1.00
203, 0.49, 0.77
235, 0.25, 0.25
312, 0.30, 1.00
200, 0.05, 0.95
205, 0.30, 1.00
192, 0.05, 0.95
017, 0.36, 1.00
233, 0.30, 0.40

現在の太陽高度が朝の3°だとしましょう。

この時、混ぜる色は「日の出」と「朝」になります。

係数の計算式は正規化するのと同じです。
元の高度から、最小高度を引き、それを範囲(range)で割ります。

(高度 - 日の出の高度) / (朝の高度 - 日の出の高度)

(3 - 0) / (12 - 0) = 0.25

係数は0.25です。

したがって、日の出の色を75%、朝の色を25%で混ぜます。

天頂色の計算（RGBに直してから計算します。）。中間と地平線付近も同じようにやります。

56 * 0.75 + 102 * 0.25 = 67.5(68)
82 * 0.75 + 147 * 0.25 = 98.25(98)
102 * 0.75 + 255 * 0.25 = 140.25(140)

ミックスRGB
朝 3°
HSV ( 215, 0.51, 0.54 ), RGB ( 68, 98, 140 )
HSV ( 224, 0.40, 0.85 ), RGB ( 130, 152, 217 )
HSV ( 309, 0.22, 0.97 ), RGB ( 249, 193, 240 )

その他

※-18°~0°の帯域は、係数を2乗しています。イージングをかけています。
元の係数が0.5の時は、0.5 * 0.5 = 0.25といったように、係数が小さくなります。暗くなりやすいようにしています。
私が現実の空を観測した結果のバランス調整です。

太陽

太陽の色も、3色のグラデーションから単色になった部分以外は、空の色と同じ仕組みです。

ただし、閾値が違います。　閾値（高度）は [-18, -0.5, 0.5, 90] です。

日の出 朝 昼 夕方 日の入り 夜
-0.5° 0.5° 90° 0.5° -0.5° -18°以下
15, 0.5, 0.5
15, 0.4, 1.0
20, 0.2, 1.0
20, 0.4, 1.0
20, 0.5, 0.5
00, 0.0, 0.0

太陽では、日の出日の入りの瞬間に急激に明るさを変化させています。

（日の入りしても、太陽の明るさは急に0にはしていません。
現実でも、日の入りしても、しばらくはその方角からの光がまぶしいです。
今回のアプリでは、サンライトの明るさを調整することでそういう表現をしています。）

今後の予定、アイデア

時間イベントを増やす

キャラクターを増やす

背景を増やす

色などを美しくする

幻想的な...夢のような...。

天気を実装する

晴れ、曇り、雨、雪、雷、台風、砂嵐など...。

星、星座を実装する

現実の星空をマッピングできたら良いかもしれません。季節や緯度によって見える星は違う。

月を実装する

月の位置、満ち欠けを再現する。

月時計も実装する。　参考サイト： [こかげ] 月時計

ちゃんと空に月が見えるように、カメラの角度などを調整する。

音楽や効果音を鳴らす

音声ファイルは容量が重いので、midiで鳴らす。

時間帯、天気、季節などによって変える。トラック事に分ける。

お正月、ひな祭り、クリスマスなどの特定の日限定の演出を追加する

音楽も、ひな祭りの時はひな祭り、クリスマスの時はジングルベルなどのクリスマス曲を流す。

時報

キャラクターの行動パターンを増やす

キャラクターの反応

例えば...キャラをクリックしたら、そのキャラが気づいてこっちに来る。

英語に対応する

意外と海外からのアクセスも多いので、重要でしょう。

情報

解像度

全体　1024x576 16:9

それぞれ16の倍数（結果的に8,4,2の倍数でもある）です。

フレームレート

24fps

※このアプリでは、負荷を軽減するため、24fpsに制限しています。
しかし、requestAnimationFrame（webがアニメーションを実行する関数）が、
大体の場合で60fpsなため、
録画する際は60fpsの設定を推奨します。カクカクを防ぎます。

Q/A

実況したりファンアートを描いても良いですか？

常識的な範囲内であればOKです。

ソースコードは公開していますか？

GitHubに公開しています。

yukiyamane/3d_gently_radiant_environment

ぜひ、参考にしてください。しかし、無断転載はしないでください。

アップデート履歴

2025/05/29 制作開始

2025/06/06 Ver.0.1

初公開。
1週間で作るチャレンジでしたが、実際は9日かかりました（2日オーバー）。
※事前にJavaScriptやThree.jsの多少の知識はありました。

内容

・キャラ2人　・太陽の動きの変化　・起きる　食事　寝る等のイベント

コードはスパゲッティで、バグも多いと思います。

2025/06/17 Ver.0.2の制作開始

2025/07/15 Ver.0.2

思った以上に実装する要素が多く、時間がかかってしまいました。

国、ワールドマップ、ふきだし、UI修正、フェードインフェードアウト（コールバック関数）、等...。

変更内容

風景

・風景のオブジェクトを増やしました。

・国（でんきのくに、こおりのくに）を追加しました。

・「でんきのくに」は、都会で電気がたくさんある国です。
キラキラ光る時計機能付きの観覧車（横浜にあるコスモクロックを参考にしました。）がランドマークでしょう。

・「こおりのくに」は、年中、氷におおわれている、極地方にある国です。
緯度が高く、白夜と極夜もあります。今後のバージョンで雪をたくさん降らせたいです。

・日時計を追加しました。国ごとに異なる種類の日時計です。
・日時計を解説するロボットを追加しました。クリックすると説明してくれます。

・ワールドマップを追加しました。国を切り替える時に使用します。

スケジュール

・スケジュールに「おふろ」を追加しました。キャラがお風呂に入ります。

・トイレのオブジェクトを追加しました。しかし行きません。

その他

・空をグラデーションを2色から3色に増やしました。

・UIをサイバーパンク調、レトロなSci-Fi調にしました。

・UIの文字を大きくしました。実況動画などにした際に見やすくなったでしょう。

・カメラのデバッグモードをonにするボタンを廃止しました。ワールドマップ中以外では常にカメラを動かせるようにしました。

次回、Ver.0.3の案

音楽や効果音を鳴らす

ひとまず、これを最優先にしようと思います。音声ファイルではなく、MIDIを読み込み、Web Audio APIを使ってピコピコなシンセ音を鳴らそうと目を付けています。

使用ツール

...等

検索用キーワード

threejs, three js, 作品, 優しく輝く, オリジナル, 自作, ケモノ, 動物