fix: cameras side by side, panels next to them, zoom out 3D view

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-03-07 11:15:24 +07:00
parent 8dd1573d0e
commit dc79763dab

View File

@@ -285,13 +285,13 @@
<div class="viewport-3d" id="court-3d"></div> <div class="viewport-3d" id="court-3d"></div>
<div class="bottom-bar"> <div class="bottom-bar">
<div class="cam-thumb"><img id="court-cam1" alt="Camera 1"></div> <div class="cam-thumb"><img id="court-cam1" alt="Camera 1"></div>
<div class="cam-thumb"><img id="court-cam0" alt="Camera 0"></div>
<div class="sidebar-panel"> <div class="sidebar-panel">
<button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button> <button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
<div class="calibrate-status" id="calStatus"> <div class="calibrate-status" id="calStatus">
<span id="calStatusText">Not calibrated</span> <span id="calStatusText">Not calibrated</span>
</div> </div>
</div> </div>
<div class="cam-thumb"><img id="court-cam0" alt="Camera 0"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -302,6 +302,7 @@
<div class="viewport-3d" id="trajectory-3d"></div> <div class="viewport-3d" id="trajectory-3d"></div>
<div class="bottom-bar"> <div class="bottom-bar">
<div class="cam-thumb"><img id="traj-cam1" alt="Camera 1"></div> <div class="cam-thumb"><img id="traj-cam1" alt="Camera 1"></div>
<div class="cam-thumb"><img id="traj-cam0" alt="Camera 0"></div>
<div class="var-panel-bottom"> <div class="var-panel-bottom">
<div class="var-indicator"> <div class="var-indicator">
<div class="var-dot" id="varDot"></div> <div class="var-dot" id="varDot"></div>
@@ -315,7 +316,6 @@
<img class="var-snapshot" id="varSnapshot" style="display:none"> <img class="var-snapshot" id="varSnapshot" style="display:none">
<div class="var-snapshot empty" id="varSnapshotEmpty">No snapshot</div> <div class="var-snapshot empty" id="varSnapshotEmpty">No snapshot</div>
</div> </div>
<div class="cam-thumb"><img id="traj-cam0" alt="Camera 0"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -469,7 +469,7 @@ function initCourtScene() {
courtScene.background = new THREE.Color(0x0a0a1a); courtScene.background = new THREE.Color(0x0a0a1a);
courtCamera = new THREE.PerspectiveCamera(50, w / h, 0.1, 100); courtCamera = new THREE.PerspectiveCamera(50, w / h, 0.1, 100);
courtCamera.position.set(7.7, 3.05, 1); courtCamera.position.set(6.7, -6, 10);
courtCamera.lookAt(6.7, 3.05, 0); courtCamera.lookAt(6.7, 3.05, 0);
courtRenderer = new THREE.WebGLRenderer({ antialias: true }); courtRenderer = new THREE.WebGLRenderer({ antialias: true });
@@ -542,7 +542,7 @@ function initTrajectoryScene() {
trajScene.background = new THREE.Color(0x0a0a1a); trajScene.background = new THREE.Color(0x0a0a1a);
trajCamera = new THREE.PerspectiveCamera(50, w / h, 0.1, 100); trajCamera = new THREE.PerspectiveCamera(50, w / h, 0.1, 100);
trajCamera.position.set(7.7, 3.05, 1); trajCamera.position.set(6.7, -6, 10);
trajCamera.lookAt(6.7, 3.05, 0); trajCamera.lookAt(6.7, 3.05, 0);
trajRenderer = new THREE.WebGLRenderer({ antialias: true }); trajRenderer = new THREE.WebGLRenderer({ antialias: true });