💡
Lightning Flowを使った💡照明ビジュアライゼーション

2025/11/17に公開
 この記事で知れること専用ビューアーがなくても360°見渡せる、照明ビジュアライズファイル（3D・VR）の作り方を解説します。

👇こんなやつ

LightningFlow A-Frameサンプル
Lightning Flowで出力した360°画像と、HTMLタグで簡単に3D・VR表示を実装できる「A-Frame」を組み合わせることで、お客さんが持っているような事務作業専用パソコンでもさくさく見渡せるファイルを作れます。

 対象読者建築・設備設計者や電気施工管理者のうち、照明のビジュアライズに興味のある人

 はじめにLightning Flow とは、パナソニックが開発した建築リアルタイムビジュアライゼーションである。https://www2.panasonic.biz/jp/lighting/plam/lightning-flow/
パナソニックが開発しているだけあって、DIALuxよりも操作性が良い。さらに他社の照明器具まで一緒にビジュアライズできるので使い勝手が非常に良い。

さらに完全無料で使用できるのが強み。DIALuxは一部の機能（ifc取込等）が有料。
こんな提案資料を作ることができる。

https://www.youtube.com/watch?v=SPCw2MZoe1s
無料でここまでできるなんて、完全にDIALux覇権を奪いに来てる。
同じパナソニックが開発している照明設計用ソフトLuminous Plannerとの違いは、ビジュアルシミュレーション（見た目）を目的としていること。

Luminous Plannerについても、2023年の大幅アップデートにより従来有償の機能が全て無料になる等、めちゃくちゃ進化しています。
Lightning Flowについては、日本語のwebマニュアルが充実しているので、データ作成はさらっと行きます。

 前提条件Revitが使用できる（今回はRevit2026.2を使用）

またはIFC+Lightning Flowで直接照明器具の配置も可能。（今回は割愛）

Lightning Flowのインストール（会員登録が必要）
30分程度の時間

 3Dデータの準備建築データをRevitデータで受領できる場合は、Revit上から建築データをリンクします。

もし提供してもらえない場合は、自分で簡単に壁床天井を配置します。

今回はRUGのサンプルモデルを使用。

次に配光データを持った照明器具を配置します。

配光データをもった照明器具ファミリを用意できれば、パナソニック製品に限らずビジュアライズ可能です。

※遠藤照明や大光電機他、Revitの照明ファミリを公開しているメーカーはたくさんあるのでありがたい。



※RUGのサンプル意匠には照明器具が元々配置されていますが、今回はテストのためこれを別ファイルとすることで、意匠から受領したデータに電気担当が照明器具を配置する想定としています。
アドインのインストールができていると、Panasonicタブが表示されていますので、Lightning Flowを実行します。

※ビジュアライズしたいモデルが、3D表示されているビューをカレント状態にして実行します。


 LightningFlowで360°画像を出力するRevit上から「LightningFlowで見る」を実行後、LightningFlowが立ち上がったでしょうか？

右上の「Edit」、左真ん中の視点📷を選択し、視点の編集モードに入ります。

ビジュアライズしたい位置に移動してから、新規作成します。

適当な名前に変更し、視点を更新して保存します。（後の処理のため、英数字名を推薦）

視点を保存できれば、左下のエクスポートから、

「メディア」を選択。

「パノラマ」から先ほど保存した視点をエクスポートします。

このような歪な画像を生成できたでしょうか？

ここまででLightningFlowdデータを保存したくなりますよね？
!LightningFlowデータ保存時の注意
絶対にBOXなどのクラウドストレージにそのまま保存しないでください。

容量は大したことが無いのですが、ファイル数が多すぎて高確率で固まります。

データをこのまま共有した場合は一度ローカルに保存し、ZIP圧縮してからクラウドにアップします。

 htmlファイル化出力した画像はその状態だと、一見何も意味のない歪んだ画像です。

これは360°パノラマ画像といい、専用ビューアー等を使用して、googlemapのようにぐるぐる見渡せる画像の元となるデータです。

この画像をhtml化し、ブラウザ上で簡単に閲覧できるようにするところが今回の肝です。
メモ帳に下記のコードを記載し、名前を付けて保存（拡張子を.htmlに変更）します。
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script>
  </head>
  <body>
  <a-scene>
    <a-assets>
      <img id="sky" src="data:image/jpeg;base64,※ここにbase64画像データ※" />
    </a-assets>
    <a-sky src="#sky" rotation="0 -130 0"></a-sky>
  </a-scene>
  </body>
</html>
コードを理解する必要はなく、aframeというスクリプトを読込んで、パノラマ画像を表示させるだけのシンプルなものです。
ただしコードは間違っていないのですが、ブラウザのセキュリティ上、HTMLから他ファイルで保存した画像を読み込むことができないため、ここに画像データをテキスト変換し埋め込む必要があります。

 画像のbase64変換幸いWindowsには標準で、画像をbase64変換できる機能が組み込まれています。

（またはweb上のツールやソフトを利用して変換しても構いませんが、データの性質上ローカルで処理したいので下記の方法を採用しました。）
メモ帳に下記コードを記載し、任意のフォルダへ名前を付けて保存（拡張子を.batへ変更）します。
@echo off
setlocal EnableExtensions

rem 同じフォルダ内の JPG/JPEG を1行の Base64 に変換
for %%F in (*.jpg *.jpeg *.JPG *.JPEG) do (
    echo [ENCODE] %%~nxF ^> "%%~dpnF_base64.txt"
    powershell -NoProfile -ExecutionPolicy Bypass -Command ^
        "$s=[Convert]::ToBase64String([IO.File]::ReadAllBytes('%%~fF')); [IO.File]::WriteAllText('%%~dpnF_base64.txt',$s,[Text.Encoding]::ASCII)"
)

echo 完了しました。
pause
batファイルを保存した同じフォルダへ、パノラマ画像を保存してからbatファイルを実行します。

※画像ファイル名は英数字とする

処理が完了すると、「元の画像ファイル名_base64.txt」が保存されるので、中身のテキストデータを先ほどのHTMLファイル内に挿入します。

下記の※に囲まれた部分を削除し、挿入します。

実際は省略部分に大量の文字列が入りますが、下記のようなイメージです。
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script>
  </head>
  <body>
  <a-scene>
    <a-assets>
      <img id="sky" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB~~~省略~~~Xl922179/n1vYD/9k=" />
    </a-assets>
    <a-sky src="#sky" rotation="0 -130 0"></a-sky>
  </a-scene>
  </body>
</html>
作成出来たら、こいつをダブルクリックで開いてみましょう！


 よくある戸惑い
 重くて固まってしまう場合重くて固まってしまう場合に、この方法なら作成できるかも？

 Revitからifcを直接リンクしないifcデータはとにかく重い。そのためRevitからifcを直接リンクさせ照明を配置していくことは、現実的ではない。（特に大型物件）

そのため、Navisworksに変換してからリンクさせるか、ACCを使う方法を公式も提案している。
ただこの方法だと、LightningFlowへ直接連携出来ないため、LightningFlowへ直接IFCを取り込む。

 LightningFlowデータの保存先には注意が必要boxやDocsなど、クラウドストレージに保存すると高確率で固まって動かなくなります。

理由はファイル数がめちゃくちゃ多いからだと推測。

容量は大したことないのに、ファイル数が多くて処理に時間がかかってしまう。
そのためローカルに保存するかつ、共有時はZIP圧縮するなどファイル数を下げる工夫が必要です。

圧縮すると公式のサンプルデータで33.7Mbの1ファイルになる。
間違ってもファイルごとアップロードしてはならない…


 LightningFlowで「GO!」が表示されないLightningFlow側で床を認識していないことが原因です。

編集からモデルの床を選択し、レイヤープロパティを「フロア」に変更することでLightningFlowg側が床を認識します。



モデルリストから床らしきデータを抽出、複数選択し一気に変更しましょう。

 おわりにこの方法ならビューアーを持たない相手にも、簡単に360°画像を無料で共有できる。

ちょっとした提案や資料の補足として利用してみてはいかがでしょうか。