    <div id="controls">
        <input type="file" id="stlFile" accept=".stl, .obj">
        <label for="stlFile">モデルを追加</label>
        <button id="openChildWindowButton">ドームビュー</button>
        <button id="environmentEditButton">環境編集</button>
        <button id="modeToggle">周回モード</button>
        <button id="editModeButton">モデル編集</button>
        <button id="commanderButton">コマンダ</button>
        <button id="helpButton">ヘルプ</button>
    </div>




    <div id="canvasContainer">
      <canvas id="threeCanvas"></canvas>
      <div id="cameraInfoDisplay"><button id="copyCameraInfoButton">copy</button><span id="cameraInfoTextContent"></span></div>
    </div>
    <div id="parentTiltControls">
        <div class="control-group">
            <label for="parentTiltXSlider">上下チルト (X軸)</label>
            <input type="range" id="parentTiltXSlider" min="-90" max="90" value="0" step="1">
            <span id="parentTiltXValue">0°</span>
        </div>
        <div class="control-group">
            <label for="parentTiltYSlider">左右チルト (Y軸)</label>
            <input type="range" id="parentTiltYSlider" min="-180" max="180" value="0" step="1">
            <span id="parentTiltYValue">0°</span>
        </div>
    </div>


<img id="icon" src="data:image/png;base64,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" />

    <div id="editControls" class="edit-panel">
        <h3>モデル編集</h3>
        <div id="modelListContent">
            <h4>モデルを選択してください</h4>
            <p>編集したいモデルをクリックするか、以下のリストから選択してください:</p>
            <ul id="modelList"></ul>
        </div>
        <div class="edit-tabs">
            <button class="tab-button active" data-tab="coordinates">座標</button>
            <button class="tab-button" data-tab="display">表示</button>
        </div>

        <div id="coordinatesTabContent" class="tab-content">
            <div class="transform-section">
                <h4>移動</h4>
                <div class="control-group">
                    <label for="translateXSlider">X:</label>
                    <input type="range" id="translateXSlider" min="-500" max="500" value="0" step="0.1"> <span id="translateXValue">0.0</span>
                </div>
                <div class="control-group">
                    <label for="translateYSlider">Y:</label>
                    <input type="range" id="translateYSlider" min="-500" max="500" value="0" step="0.1"> <span id="translateYValue">0.0</span>
                </div>
                <div class="control-group">
                    <label for="translateZSlider">Z:</label>
                    <input type="range" id="translateZSlider" min="-500" max="500" value="0" step="0.1"> <span id="translateZValue">0.0</span>
                </div>
            </div>

            <div class="transform-section">
                <h4>回転 (度)</h4>
                <div class="control-group">
                    <label for="rotateXSlider">X:</label>
                    <input type="range" id="rotateXSlider" min="-180" max="180" value="0" step="1">
                    <span id="rotateXValue">0°</span>
                </div>
                <div class="control-group">
                    <label for="rotateYSlider">Y:</label>
                    <input type="range" id="rotateYSlider" min="-180" max="180" value="0" step="1">
                    <span id="rotateYValue">0°</span>
                </div>
                <div class="control-group">
                    <label for="rotateZSlider">Z:</label>
                    <input type="range" id="rotateZSlider" min="-180" max="180" value="0" step="1">
                    <span id="rotateZValue">0°</span>
                </div>
            </div>

            <div class="transform-section">
                 <h4>サイズ</h4>
                 <div class="control-group">
                     <label for="scaleSlider">均一スケール:</label>
                     <input type="range" id="scaleSlider" min="0.1" max="100" value="1" step="0.01"> <span id="scaleValue">1.00</span>
                 </div>
            </div>
        </div>

        <div id="displayTabContent" class="tab-content">
            <div id="displayControls">
                <div class="control-row">
                     <label for="modelColorPicker">モデルの色:</label>
                     <input type="color" id="modelColorPicker" value="#00ff00">
                 </div>
                 <div class="control-group">
                     <label for="shininessSlider">質感 (Shininess):</label>
                     <input type="range" id="shininessSlider" min="0" max="1000" value="200" step="1">
                     <span id="shininessValue">200</span>
                 </div>
                 <div class="control-group">
                     <label for="wireframeCheckbox">ワイヤフレーム表示:</label>
                     <input type="checkbox" id="wireframeCheckbox">
                 </div>
                 <div class="control-group">
                     <label for="opacitySlider">透明度 (Opacity):</label>
                     <input type="range" id="opacitySlider" min="0" max="1" value="1" step="0.01">
                     <span id="opacityValue">1.00</span>
                 </div>
                  <div class="control-group">
                     <label for="normalsCheckbox">法線カラー表示:</label>
                     <input type="checkbox" id="normalsCheckbox">
                 </div>
                 <div class="control-group">
                     <label for="modelDoubleSideCheckbox">メッシュ裏面表示:</label>
                     <input type="checkbox" id="modelDoubleSideCheckbox">
                 </div>
            </div>
        </div>

        <button id="deleteModelButton" disabled>モデルを削除</button>
    </div>

 <div id="commanderControls" class="edit-panel">
     <h3>コマンダ</h3>
     <textarea id="commanderInput" style="width: 100%; height: 200px; box-sizing: border-box;"></textarea>
     <div class="commander-buttons">
         <button id="playCommandButton"></button>
         <button id="pauseCommandButton"></button>
         <button id="stopCommandButton"></button>
     </div>
</div>


    <div id="environmentEditControls" class="edit-panel">
        <h3>環境編集</h3>

        <div class="edit-tabs">
            <button class="tab-button active" data-tab="background">背景</button>
            <button class="tab-button" data-tab="lighting">光源</button>
            <button class="tab-button" data-tab="other">その他</button>
        </div>

        <div id="backgroundTabContent" class="tab-content active">
            <div class="control-row">
                <label for="backgroundColorPicker">背景色:</label>
                <input type="color" id="backgroundColorPicker" value="#cccccc">
            </div>
             <div class="control-row">
                 <input type="file" id="backgroundEquirectangularFile" accept="image/*"> <label for="backgroundEquirectangularFile">背景画像 (Equirectangular)</label>
             </div>
        </div>

        <div id="lightingTabContent" class="tab-content">
            <div class="control-group">
                <h4>環境光</h4>
                <div class="control-row">
                    <label for="ambientLightColorPicker">色:</label>
                    <input type="color" id="ambientLightColorPicker" value="#ffffff">
                </div>
                 <div class="control-group">
                    <label for="ambientLightIntensitySlider">強度:</label>
                    <input type="range" id="ambientLightIntensitySlider" min="0" max="2" value="0.5" step="0.01">
                    <span id="ambientLightIntensityValue">0.50</span>
                 </div>
            </div>

            <div class="control-group">
                <h4>指向性光源</h4>
                 <div class="control-row">
                    <label for="directionalLightColorPicker">色:</label>
                    <input type="color" id="directionalLightColorPicker" value="#ffffff">
                 </div>
                 <div class="control-group">
                    <label for="directionalLightIntensitySlider">強度:</label>
                    <input type="range" id="directionalLightIntensitySlider" min="0" max="2" value="0.8" step="0.01">
                    <span id="directionalLightIntensityValue">0.80</span>
                 </div>
            </div>

             <div class="control-group">
                 <h4>追加光源 (半球ライト)</h4>
                  <div class="control-row">
                     <label for="hemisphereLightSkyColorPicker">空色:</label>
                     <input type="color" id="hemisphereLightSkyColorPicker" value="#ffffff">
                  </div>
                   <div class="control-row">
                     <label for="hemisphereLightGroundColorPicker">地面色:</label>
                     <input type="color" id="hemisphereLightGroundColorPicker" value="#000000">
                  </div>
                  <div class="control-group">
                     <label for="hemisphereLightIntensitySlider">強度:</label>
                     <input type="range" id="hemisphereLightIntensitySlider" min="0" max="2" value="0" step="0.01">
                     <span id="hemisphereLightIntensityValue">0.00</span>
                  </div>
             </div>

        </div>

        <div id="otherTabContent" class="tab-content">
            <div class="control-group">
                <label for="cubeRenderTargetSizeSelect">解像度（CubeCamera）:</label>
                <select id="cubeRenderTargetSizeSelect">
                    <option value="256">256</option>
                    <option value="512">512</option>
                    <option value="1024">1024</option>
                    <option value="2048">2048</option>
                    <option value="4096">4096</option>
                </select>
            </div>
            <div class="control-group">
                <label>メッシュ表示設定（全てに適用）:</label>
                <div><button id="setAllModelsDoubleSide">両面表示</button> <button id="setAllModelsFrontSide">片面表示</button></div>
            </div>


        </div>

    </div>

 <div id="helpOverlay">
     <div id="helpContent">
            <h3>これは何？</h3>
            <p>プラネタリウムやドームシアターで3Dモデルを映し出すための3Dモデルビュアーです。
            子ウィンドウとして表示するドームビュー（ドームマスター映像）を全画面表示させ、プラネタリウムの外部映像入力として取り込めば、ドーム全体に映像を映し出すことができます。
            </p>
            <p>複雑な設定を必要とせず、限られた人しかアクセスできない環境も介さず、ブラウザだけで誰もが簡単に動作させられることを目指して作成しました。
            ブラウザ環境に依存する制約はありますが、モデルの編集やアニメーションなど、3Dモデルを使った演出に必要な機能を豊富に含んでいます。
            より高度な機能や安定した動作が必要な場合は、プラネタリウムに組み込まれているデジタルシステムや<a href="https://www.orihalcon.co.jp/amateras/modelviewer/" target="_blank">Amateras Model Viewer</a>の利用をご検討ください。
            </p>
            <h3>使い方</h3>
            <p>ブラウザで高速にレンダリングさせるため、ブラウザのGPUアクセラレータを有効にしておくことをお勧めします。処理能力の低い端末で利用した際や、解像度を上げた場合、サイズの大きなファイルを読み込んだ場合など、動作しずらくなることがあります。</p>
            <h4>モデルの追加</h4>
            <ul>
                <li>「モデルを追加」ボタンでSTL形式またはOBJ形式の3Dモデルを選択して読み込みます。
                OBJファイルが参照するMTLファイルやテクスチャファイルは読み込みません。複数のオブジェクトからなるOBJファイルは最初のオブジェクトのみ読み込みます。
                ファイル選択はひとつずつですが、後で追加することができます。</li>
            </ul>
            <h4>操作モード</h4>
            <ul>
                <li><strong>周回モード</strong>：モデルを中心にマウスで視点を回転・移動できます。</li>
                <li><strong>飛行モード</strong>：キーボード (Q, W, E, R, A, S, D, F, 矢印キー) で自由に移動・視点変更ができます。Shifキーで動きが速くなります。</li>
                <li>いずれのモードでも、Ctrl+マウスクリックした場所を視点の中心にすることができます。</li>
            </ul>
            <h4>環境編集</h4>
            <ul>
                <li>背景色、背景画像、光源、出力解像度などの編集ができます。</li>
                <li>背景画像はエクイレクタングラー形式の画像をご用意ください。星空のエクイレクタングラー画像を用意すれば、簡易的なデジタルプラネタリウムとしても利用できます。</li>
                <li>解像度の数値は変換処理に使っているキューブマップの解像度です。解像度1024はドームマスター換算で概ね2Kです。</li>
            </ul>
             <h4>モデル編集</h4>
             <ul>
                 <li>表示中の3Dモデルを選択し、座標位置や回転、サイズ、色などを個々に調整できます。</li>
                 <li>選択したモデルは削除ボタンで削除できます。</li>
             </ul>

            <h4>ドームビュー</h4>
            <ul>
                <li>ドームマスター形式のビューアを子ウィンドウとして開きます。プラネタリウムの外部映像入力として全画面表示させるとドームの全天周に映像を映し出すことができます。</li>
            </ul>
             <h4>チルトコントロール（コントロール画面左下）</h4>
             <ul>
                 <li>ドームビューの視点を上下左右に傾けることができます。初期状態では、コントロール画面の正面がドームビューの天頂です。</li>
                 <li>実際に映し出すドームのスイートスポットに合わせてチルトを調整してください。</li>
             </ul>
             <h4>カメラ座標・姿勢</h4>
             <ul>
                 <li>コントロール画面左上にカメラの座標（pos）と姿勢（rot）が表示されます。値をコピーしてクリップボードに保存すると、コマンド入力にそのまま使うことができます。</li>
             </ul>
             <h4>コマンダ</h4>
             <ul>
                 <li>事前に設定したコマンド（キュー）をもとに、アニメーションとして再生します。コマンドは1行ごとに解釈され、「//」「#」で始まる行はコメントとして扱われ、空行は無視されます。</li>
                 <li><strong>再生ボタン</strong>：キューを実行します。実行中はモデルの操作はできません。</li>
                 <li><strong>一時停止ボタン</strong>：一時停止すると画面が止まり、再開するかそのまま停止するかを選ぶ画面が表示されます。</li>
                 <li><strong>停止ボタン</strong>：再生途中でキューを停止します。</li>
                 <li><strong>コマンド</strong>
                 <ul>
                 <li><strong>カメラ座標</strong>：「pos: 0.00, 0.00, 0.00」の表記で記述します。「;」で区切ってカメラ姿勢とセットで記述できます。</li>
                 <li><strong>カメラ姿勢</strong>：「rot: 0.00, 0.00, 0.00」の表記で記述します（単位は角度）。「;」で区切ってカメラ座標とセットで記述できます。</li>
                 <li><strong>アニメーション時間</strong>：「dur: 0.00」または「duration: 0.00」の表記で記述します（単位は秒）。</li>
                 <li><strong>イージング</strong>：アニメーション時間と併用し、アニメーションの速度を滑らかに変化させます。「cubic-bezier: 0.00,0.00,0.00,0.00」の形式。基本的に0～1の値を使いますが、負の値や1より大きな値を入れることもできます。また、定義値として「linear」「ease」「ease-in」「ease-out」「ease-in-out」を単独で表記することもできます。定義値を含む例を以下に示します。
                   <ul>
                     <li>「linear」または「cubic-bezier: 0,0,1,1」：直線的に動き、無定義の場合と同じ。</li>
                     <li>「ease」または「cubic-bezier: 0.25,0.1,0.25,1」：最初ゆっくり、最後はよりゆっくり動きます。</li>
                     <li>「ease-in」または「cubic-bezier: 0.42,0,1,1」：最初はゆっくり、最後に向かって速く動きます。</li>
                     <li>「ease-out」または「cubic-bezier: 0,0,0.58,1」：最初は速く、最後に向かってゆっくり動きます。</li>
                     <li>「ease-in-out」または「cubic-bezier: 0.42,0,0.58,1」：最初と最後が同程度ゆっくり動きます。</li>
                     <li>「cubic-bezier: 0,1,1,-1」：中盤で一旦戻る。</li>
                     <li>「cubic-bezier:  0.5,0,0.5,1.5」：行き過ぎてから戻る。</li>
                   </ul>
                 </li>
                 <li><strong>ポーズ</strong>：「pause:0.00」の表記で記述します（単位は秒）。時間を表記しない場合は一時停止します。</li>
                 </ul>
                 </li>
             </ul>
             <p class="copyright">Hoshizuna: Model Viewer for Dome v1 | (c) <a href="https://researchmap.jp/estherian" target="_blank">Tasuku Yoshioka</a> (<a href="https://www.tsm.toyama.toyama.jp/" target="_blank">Toyama Science Museum</a>), 2025 | Released under the <a href="https://opensource.org/license/mit" target="_blank">MIT license</a>.</p>
         <button id="closeHelpButton">&times;</button>
     </div>
 </div>


    <div id="pauseOverlay" style="
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒背景 */
        display: none; /* 初期状態では非表示 */
        justify-content: center; /* コンテンツを水平方向に中央揃え */
        align-items: center;   /* コンテンツを垂直方向に中央揃え */
        z-index: 1001; /* 他の要素より前面に表示（ヘルプオーバーレイよりさらに前面） */
        color: white; /* テキスト色 */
    ">
        <div id="pauseContent" style="
            background-color: #444; /* 暗いグレーの背景 */
            color: #eee; /* 明るいテキスト色 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            text-align: center;
            display: flex; /* Flexbox を使用 */
            flex-direction: column; /* 縦方向に要素を並べる */
            gap: 15px; /* 要素間の隙間 */
        ">
            <p>コマンド実行を一時停止しました。</p>
            <div style="display: flex; justify-content: center; gap: 15px;"> <button id="resumeCommandButton" style="
                    padding: 10px 20px;
                    cursor: pointer;
                    border: none;
                    border-radius: 5px;
                    font-size: 16px;
                    color: white;
                    background-color: #28a745; /* 緑色 */
                    transition: background-color 0.3s ease;
                ">再生</button>
                <button id="stopCommandFromPauseButton" style="
                    padding: 10px 20px;
                    cursor: pointer;
                    border: none;
                    border-radius: 5px;
                    font-size: 16px;
                    color: white;
                    background-color: #dc3545; /* 赤色 */
                    transition: background-color 0.3s ease;
                ">停止</button>
            </div>
        </div>
    </div>


<div id="coordinateSelectOverlay" style="
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒背景 */
    display: none; /* 初期状態では非表示 */
    justify-content: center; /* コンテンツを水平方向に中央揃え */
    align-items: center;   /* コンテンツを垂直方向に中央揃え */
    z-index: 1002; /* 他のオーバーレイより前面に表示 */
    color: white; /* テキスト色 */
">
    <div id="coordinateSelectContent" style="
        background-color: #444; /* 暗いグレーの背景 */
        color: #eee; /* 明るいテキスト色 */
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 15px;
    ">
        <p>モデルをどのように追加しますか？</p>
        <div style="display: flex; justify-content: center; gap: 15px;">
            <button id="addModelCenteredButton" style="
                padding: 10px 20px;
                cursor: pointer;
                border: none;
                border-radius: 5px;
                font-size: 16px;
                color: white;
                background-color: #2196F3; /* 青色 */
                transition: background-color 0.3s ease;
            ">原点に移動させて追加</button>
            <button id="addModelAsIsButton" style="
                padding: 10px 20px;
                cursor: pointer;
                border: none;
                border-radius: 5px;
                font-size: 16px;
                color: white;
                background-color: #ff9800; /* オレンジ色 */
                transition: background-color 0.3s ease;
            ">座標通りに追加</button>
        </div>
    </div>
</div>
