<!DOCTYPE html>
<html>
<head>
<title>VRoutes | WebVR作成システム</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&family=Orbitron&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="main.css">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<div id="systemInfo">
<h1>
VRoutes
<button id="helpButton" class="ui-button">使い方</button>
</h1>
</div>
<div id="vrContainer">
<a-scene embedded>
<a-assets>
</a-assets>
<a-sky id="background"></a-sky>
<a-camera position="0 1.6 0">
<a-cursor geometry="primitive: ring; radiusInner: 0.05; radiusOuter: 0.07"
material="color: red"></a-cursor>
</a-camera>
</a-scene>
</div>
<div id="controlPanel">
<div class="file-input">
<label for="backgroundInput">背景画像を選択</label>
<input type="file" id="backgroundInput" accept="image/*">
</div>
<button id="addSphere" class="ui-button">球体を追加</button>
<button id="addCube" class="ui-button">立方体を追加</button>
<div class="file-input">
<label for="modelInput">3Dモデルを追加</label>
<input type="file" id="modelInput" accept=".glb">
</div>
<button id="removeAllModels" class="ui-button">3Dモデルを全て削除</button>
<input type="button" class="save-file" value="ダウンロード" onclick="downloadScene()">
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" id="closeHelpModal">×</span>
<h2> VRoutes 説明書</h2>
<p>本システムはWebVRの作成を簡略化するためシステムです。操作説明を以下に示します。</p>
<ul>
<li>「背景画像を選択」ボタンをクリックして背景画像をアップロードできます</li>
<li>「球体を追加」ボタンをクリックして球体をVRシーンに追加できます</li>
<li>「立方体を追加」ボタンをクリックして立方体をVRシーンに追加できます</li>
<li>「3Dモデルを追加」ボタンをクリックして3Dモデルをアップロードできます</li>
<li>各オブジェクトの調整には、対応するコントロールパネルを使用します</li>
<li>「ダウンロード」をクリックして作成したVRシーンをローカル環境に保存できます</li>
<li>「3Dモデルを全て削除」ボタンをクリックして、「3Dモデルを追加」で配置されたすべての3Dモデルを削除できます<br>
「球体を追加」「立方体を追加」で配置されたオブジェクトには影響ありません</li>
<li>現在のバージョンでは".glb"等の3DモデルをVRシーンに追加しても、エディタ画面では反映されますがダウンロードされたファイルには反映されません</li>
</ul>
</div>
</div>
<script src="main.js"></script>
<script src="downloadScene.js"></script>
</body>
</html>
