Skip to content

Commit 5af212e

Browse files
kfarrkfarr
committed
additional + styled ar controls
1 parent c093208 commit 5af212e

File tree

3 files changed

+225
-32
lines changed

3 files changed

+225
-32
lines changed

‎src/editor/components/viewport/ARControls/ARControls.component.jsx‎

Lines changed: 97 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,126 @@ import { useState } from 'react';
22
import styles from './ARControls.module.scss';
33

44
const ARControls = () => {
5+
const [isExpanded, setIsExpanded] = useState(false);
56
const [rotationValue, setRotationValue] = useState(0);
7+
const [positionX, setPositionX] = useState(0);
8+
const [positionZ, setPositionZ] = useState(0);
9+
const [height, setHeight] = useState(0);
610

7-
const handleRotationChange = (event) => {
8-
const newRotation = parseFloat(event.target.value);
9-
setRotationValue(newRotation);
10-
11-
// Update the street-container rotation in real-time
11+
const updateStreetContainer = (rotation, x, z, y) => {
1212
const streetContainer = document.getElementById('street-container');
1313
if (streetContainer) {
14-
streetContainer.setAttribute('rotation', `0 ${newRotation} 0`);
14+
streetContainer.setAttribute('rotation', `0 ${rotation} 0`);
15+
streetContainer.setAttribute('position', `${x} ${y} ${z}`);
1516
} else {
1617
console.log('street-container element not found');
1718
}
1819
};
1920

21+
const handleRotationChange = (event) => {
22+
const newRotation = parseFloat(event.target.value);
23+
setRotationValue(newRotation);
24+
updateStreetContainer(newRotation, positionX, positionZ, height);
25+
};
26+
27+
const handlePositionXChange = (event) => {
28+
const newX = parseFloat(event.target.value);
29+
setPositionX(newX);
30+
updateStreetContainer(rotationValue, newX, positionZ, height);
31+
};
32+
33+
const handlePositionZChange = (event) => {
34+
const newZ = parseFloat(event.target.value);
35+
setPositionZ(newZ);
36+
updateStreetContainer(rotationValue, positionX, newZ, height);
37+
};
38+
39+
const handleHeightChange = (event) => {
40+
const newHeight = parseFloat(event.target.value);
41+
setHeight(newHeight);
42+
updateStreetContainer(rotationValue, positionX, positionZ, newHeight);
43+
};
44+
45+
const toggleExpanded = () => {
46+
setIsExpanded(!isExpanded);
47+
};
48+
49+
if (!isExpanded) {
50+
return (
51+
<button
52+
className={styles.toggleButton}
53+
onClick={toggleExpanded}
54+
title="AR Scene Adjustments"
55+
>
56+
🎯
57+
</button>
58+
);
59+
}
60+
2061
return (
2162
<div className={styles.arControls}>
22-
{/* <div className={styles.title}>AR Controls</div> */}
63+
<div className={styles.header}>
64+
<span className={styles.title}>AR Scene Adjustments</span>
65+
<button
66+
className={styles.closeButton}
67+
onClick={toggleExpanded}
68+
title="Collapse"
69+
>
70+
✕
71+
</button>
72+
</div>
2373

2474
<div className={styles.controlGroup}>
2575
<label className={styles.label}>Rotation: {rotationValue}°</label>
2676
<input
2777
type="range"
2878
min="-180"
2979
max="180"
80+
step="5"
3081
value={rotationValue}
3182
onInput={handleRotationChange}
3283
className={styles.slider}
3384
/>
3485
</div>
86+
87+
<div className={styles.controlGroup}>
88+
<label className={styles.label}>Position X: {positionX}m</label>
89+
<input
90+
type="range"
91+
min="-50"
92+
max="50"
93+
step="1"
94+
value={positionX}
95+
onInput={handlePositionXChange}
96+
className={styles.slider}
97+
/>
98+
</div>
99+
100+
<div className={styles.controlGroup}>
101+
<label className={styles.label}>Position Z: {positionZ}m</label>
102+
<input
103+
type="range"
104+
min="-50"
105+
max="50"
106+
step="1"
107+
value={positionZ}
108+
onInput={handlePositionZChange}
109+
className={styles.slider}
110+
/>
111+
</div>
112+
113+
<div className={styles.controlGroup}>
114+
<label className={styles.label}>Height: {height}m</label>
115+
<input
116+
type="range"
117+
min="-5"
118+
max="5"
119+
step="0.1"
120+
value={height}
121+
onInput={handleHeightChange}
122+
className={styles.slider}
123+
/>
124+
</div>
35125
</div>
36126
);
37127
};

‎src/editor/components/viewport/ARControls/ARControls.module.scss‎

Lines changed: 94 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,137 @@
11
.arControls {
2-
background: rgba(0, 0, 0, 0.8);
3-
border-radius: 8px;
2+
background: rgba(0, 0, 0, 0.9);
3+
border-radius: 12px;
44
padding: 16px;
55
margin: 8px;
66
color: white;
77
font-family:
88
system-ui,
99
-apple-system,
1010
sans-serif;
11-
min-width: 200px;
11+
min-width: 280px;
12+
max-width: 320px;
13+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
14+
backdrop-filter: blur(10px);
15+
}
16+
17+
.toggleButton {
18+
position: fixed;
19+
top: 20px;
20+
right: 20px;
21+
width: 48px;
22+
height: 48px;
23+
border-radius: 24px;
24+
background: rgba(0, 0, 0, 0.8);
25+
border: 2px solid rgba(255, 255, 255, 0.2);
26+
color: white;
27+
font-size: 24px;
28+
cursor: pointer;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
backdrop-filter: blur(10px);
33+
transition: all 0.2s ease;
34+
z-index: 1000;
35+
36+
&:hover {
37+
background: rgba(0, 0, 0, 0.9);
38+
border-color: rgba(255, 255, 255, 0.4);
39+
transform: scale(1.05);
40+
}
41+
42+
&:active {
43+
transform: scale(0.95);
44+
}
45+
}
46+
47+
.header {
48+
display: flex;
49+
justify-content: space-between;
50+
align-items: center;
51+
margin-bottom: 16px;
52+
padding-bottom: 8px;
53+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
1254
}
1355

1456
.title {
1557
font-size: 16px;
16-
font-weight: bold;
17-
margin-bottom: 12px;
18-
text-align: center;
58+
font-weight: 600;
59+
margin: 0;
60+
}
61+
62+
.closeButton {
63+
background: none;
64+
border: none;
65+
color: rgba(255, 255, 255, 0.7);
66+
font-size: 18px;
67+
cursor: pointer;
68+
padding: 4px;
69+
border-radius: 4px;
70+
transition: all 0.2s ease;
71+
72+
&:hover {
73+
color: white;
74+
background: rgba(255, 255, 255, 0.1);
75+
}
1976
}
2077

2178
.controlGroup {
22-
margin-bottom: 16px;
79+
margin-bottom: 20px;
80+
81+
&:last-child {
82+
margin-bottom: 0;
83+
}
2384
}
2485

2586
.label {
2687
display: block;
27-
font-size: 14px;
28-
margin-bottom: 8px;
88+
font-size: 13px;
89+
font-weight: 500;
90+
margin-bottom: 10px;
91+
color: rgba(255, 255, 255, 0.9);
2992
}
3093

3194
.slider {
3295
width: 100%;
33-
height: 6px;
34-
border-radius: 3px;
35-
background: #333;
96+
height: 8px;
97+
border-radius: 4px;
98+
background: rgba(255, 255, 255, 0.2);
3699
outline: none;
37100
-webkit-appearance: none;
38101
appearance: none;
39102
cursor: pointer;
103+
transition: background-color 0.2s ease;
104+
105+
&:hover {
106+
background: rgba(255, 255, 255, 0.3);
107+
}
40108

41109
&::-webkit-slider-thumb {
42110
-webkit-appearance: none;
43111
appearance: none;
44-
width: 18px;
45-
height: 18px;
112+
width: 20px;
113+
height: 20px;
46114
border-radius: 50%;
47115
background: #fff;
48116
cursor: pointer;
49-
border: 2px solid #007bff;
117+
border: 3px solid #007bff;
118+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
119+
transition: all 0.2s ease;
120+
}
121+
122+
&::-webkit-slider-thumb:hover {
123+
transform: scale(1.1);
124+
border-color: #0056b3;
50125
}
51126

52127
&::-moz-range-thumb {
53-
width: 18px;
54-
height: 18px;
128+
width: 20px;
129+
height: 20px;
55130
border-radius: 50%;
56131
background: #fff;
57132
cursor: pointer;
58-
border: 2px solid #007bff;
133+
border: 3px solid #007bff;
134+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
59135
}
60136
}
61137

‎src/viewer-styles.css‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,40 @@ body {
2121
/* viewer mode AR overlay */
2222
#viewer-mode-ar-overlay {
2323
display: none;
24-
position: absolute;
25-
top: 5;
26-
left: 5;
27-
font-size: 12px;
28-
background-color: rgba(0, 0, 0, 0.3);
29-
color: #bebebe;
30-
z-index: 1;
24+
position: fixed;
25+
top: 0;
26+
left: 0;
27+
width: 100vw;
28+
height: 100vh;
29+
pointer-events: none;
30+
z-index: 1000;
31+
}
32+
33+
#viewer-mode-ar-overlay-exit-button {
34+
position: fixed;
35+
bottom: 20px;
36+
left: 20px;
37+
padding: 12px 20px;
38+
background: rgba(255, 0, 0, 0.8);
39+
color: white;
40+
border: none;
41+
border-radius: 8px;
42+
font-size: 16px;
43+
font-weight: 500;
44+
cursor: pointer;
45+
backdrop-filter: blur(10px);
46+
transition: all 0.2s ease;
47+
pointer-events: auto;
48+
z-index: 1001;
49+
}
50+
51+
#viewer-mode-ar-overlay-exit-button:hover {
52+
background: rgba(255, 0, 0, 0.9);
53+
transform: scale(1.05);
54+
}
55+
56+
#react-ar-controls {
57+
pointer-events: auto;
3158
}
3259

3360
/* maps copyright notice */

0 commit comments

Comments
 (0)