    <div id="controls">
        <input type="file" id="stlFile" accept=".stl">
        <label for="stlFile">モデルを追加</label>
        <button id="openChildWindowButton">子ウィンドウを開く</button>

        <button id="environmentEditButton">環境編集</button>

        <button id="modeToggle">モード切り替え (周回モード)</button>

        <button id="editModeButton">モデル編集</button>
        <button id="helpButton">ヘルプ</button>
        </div>

    <canvas id="threeCanvas"></canvas>

    <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>


    <div id="editControls" class="edit-panel">
        <h3>モデル編集</h3>

        <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 active">
            <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="10" 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="normalsCheckbox">法線カラー表示:</label>
                     <input type="checkbox" id="normalsCheckbox">
                 </div>
            </div>
        </div>

        <button id="deleteModelButton" disabled>モデルを削除</button>
    </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="doubleSideCheckbox">メッシュ裏面表示:</label>
                <input type="checkbox" id="doubleSideCheckbox">
            </div>

            <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>

    </div>

 <div id="helpOverlay">
     <div id="helpContent">
            <h3>これは何？</h3>
            <p>プラネタリウムやドームシアターで3Dモデルを映し出すための3Dモデルビュアーです。
            ドームマスター形式の子ウィンドウを全画面表示させ、プラネタリウムの外部映像入力として取り込めば、ドーム全体に映し出すことができます。
            </p>
            <p>このビュアーは、ブラウザだけでより簡単に動作させることを目指して作成しました。より高度な機能や安定した動作が必要な場合は、プラネタリウムに組み込まれているデジタルシステムや<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形式の3Dモデルを選択して読み込みます。ファイル選択はひとつずつですが、後で追加することができます。</li>
            </ul>
            <h4>操作モード</h4>
            <ul>
                <li><strong>周回モード:</strong> モデルを中心にマウスで視点を回転・移動できます。</li>
                <li><strong>飛行モード:</strong> キーボード (W, A, S, D, R, F, 矢印キー) で自由に移動・視点変更ができます。Shifキーで動きが速くなります。</li>
            </ul>
            <h4>環境編集</h4>
            <ul>
                <li>背景色、背景画像、光源などの編集ができます。</li>
                <li>背景画像はエクイレクタングラー形式の画像をご用意ください。星空のエクイレクタングラー画像を用意すれば、簡易的なデジタルプラネタリウムとしても利用できます。</li>
                <li>メッシュの裏面を表示させる機能も環境編集画面にあります。</li>
            </ul>
             <h4>モデル編集</h4>
             <ul>
                 <li>表示中の3Dモデルを選択し、座標位置や回転、サイズ、色などを個々に調整できます。</li>
                 <li>選択したモデルは削除ボタンで削除できます。</li>
                 <li>全てのモデルの重心を原点として扱うため、座標移動は相対的なものです。</li>
             </ul>

            <h4>子ウィンドウ</h4>
            <ul>
                <li>ドームマスター形式のビューアを子ウィンドウに開きます。プラネタリウムの外部映像入力として全画面表示させるとドームの全天周に映像を映し出すことができます。</li>
            </ul>
             <h4>チルトコントロール (親ウィンドウ左下)</h4>
             <ul>
                 <li>子ウィンドウの視点を上下左右に傾けることができます。初期値は親ウィンドウの正面が子ウィンドウの天頂です。</li>
                 <li>実際に映し出すドームのスイートスポットに合わせてチルトを調整してください。</li>
             </ul>
             <p class="copyright">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>