【Three.js】Creating Sky image in Unreal Engine5

Unreal Engine 5を使って、３６０度の空のテクスチャを作成し、Three.jsで表示させていきたいと思います。空の設定を変更すれば、昼、夕方、夜空、宇宙など作成することができると思います。備忘録ですが、よろしくお願いします。

【Demo】https://misora.main.jp/ue5sky/

　Unreal Engine 5（5.1.1）を使います。ダウンロードがまだの方は、アカウントを作成して、ダウンロードお願いいたします。

　UE5での、リニアコンテンツ（映画、TV番組やコマーシャル、ビデオ、静止画が含まれます。）は、使用は無料、100% ロイヤリティフリーだそうです。詳細は、よくある質問（Q&A）をご覧ください。

Just a moment...
www.unrealengine.com

Just a moment...
www.unrealengine.com
unrealengine.com

１．Creating 360° images in UE5
２．Display with three.js
1. How to display in Scene
３．Complete

１．Creating 360° images in UE5

　Unreal Engine5で、昼空の３６０度画像をキャプチャして、画像を出力したいと思います。

UE5をダウンロード後、起動をお願いいたします。

１. Scene Creation & Preparation

起動後、「ファイル」→「新規レベル」で新しいシーンを作成します。

「Basic」→「作成」でデフォルトシーンが作成できます。保存しましょう。（名前はなんでもOK）

シーンが立ち上がったら、必要ない「Floor」を削除します。

キャプチャに必要なカメラを設定します。「Cam カメラアクタ」を画面にドラックアンドドロップして、カメラを配置します。位置は「ｘ：０，ｙ：０，ｚ：０」にしましょう。

空模様の設定は、Lightinigフォルダから調整できます。回転を変えることで、太陽の位置を変更できます（ctrl+L）。

２. Sequencer Creation

　「追加」→「シネマティック」→「レベルシーケンサ」を追加。作成したファイルを、画面にドラックアンドドロップで追加してください。名前は「SQ」にしました。

作成した「レベルシーケンサ」ファイルをダブルクリックして、シーケンサタブを起動します。緑と赤のラインで、出力するフレーム数の調整します。今回は１フレームで良いので、１フレーム分の領域に設定します。

３. Camera Adjustment

うまく撮影できない場合もあるので、カメラの調整をします。カメラを選択して、「Lens」→「Exposure」→「測光モード」→「Manual」、「露出補正」→「１０程度」。

「現在のカメラ設定」→「Current Focal Length」→「１０程度」で画角を広くします。

４. Adding Plug-ins

　３６０度を画像用にプラグインをインストールします。「Movie Render Queue」「Movie Queue Additional Render Passes」にチェックして、再起動します。

５. Sequencer setting (shooting)

　撮影の設定します。

「Unsave Config」をクリックして、タブを起動。「設定」→「パノラマレンダリング」を設定。

「ディファードレンダリング」の項目を削除して、「パノラマレンダリング」→「AlloCate Histroy Par Pane」にチェックを入れる。そのほか、「Pngシーケンス」に設定します。

「出力」から、ファイルの保存先、画角サイズを設定して、「承認」します。

「レンダリング（ローカル）」で出力します。クリック前に保存することをおすすめします。

エラーなく、終われば完了です。

６. Completion of image

出力先にこのような画像があると思います。（SQ.png）

２．Display with three.js

sphereジオメトリに、先ほどの画像テクスチャ（SQ.png）を貼り付けます。

three.js

/////////////////////////////////////////////////////////////////////////
///// SkyDome

const Sgeometry = new THREE.SphereGeometry( 800, 128, 64 ); 
Sgeometry.scale(-1, 1, 1);
const texture = new THREE.TextureLoader().load("SQ.png");
texture.colorSpace = THREE.SRGBColorSpace; // THREE.LinearSRGBColorSpace THREE.SRGBColorSpace

const Smaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  map: texture, 
  //wireframe: true,
}); 

const sphere = new THREE.Mesh( Sgeometry, Smaterial );
sphere.position.set(0,0,0);
//sphere.rotation.y = THREE.MathUtils.radToDeg(-20);
scene.add( sphere );

How to display in Scene

Sceneに表示させる方法

/////////////////////////////////////////////////////////////////////////
///// SCENE CREATION

const texture = new THREE.TextureLoader().load("SQ.png");
texture.colorSpace = THREE.SRGBColorSpace; // THREE.LinearSRGBColorSpace THREE.SRGBColorSpace

const scene = new THREE.Scene()
scene.background = new THREE.Color('#000');
scene.background = texture;