fuhtho/3d-viewer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dark mode, range slider, reset view

Browse source
This commit is contained in:
Fuhrmann 2025-03-18 12:17:16 +01:00
parent 7d197d73ef
commit 2388ce2883
6 changed files with 181 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

67
app/components/RangeSlider.tsx Normal file
View file

@ -0,0 +1,67 @@
import { ChangeEvent, useContext, useState } from "react";
import {
SceneViewContext,
SceneViewContextType,
} from "../providers/scene-view-provider";
export function RangeSlider() {
const { sceneView } = useContext(SceneViewContext) as SceneViewContextType;
const [scale, setScale] = useState<number>(1);
const handleChange = (e: ChangeEvent) => {
if (!sceneView) return;
const t = e.target as HTMLInputElement;
const z = parseFloat(t.value);
if (!isNaN(z)) {
setScale(z);
sceneView.scene.scale.set(1, 1, z);
}
};
return (
<div className="relative mb-8">
<label
htmlFor="steps-range"
className="block mb-2 text-sm font-medium text-gray-500 dark:text-gray-400"
>
Z-Scaling
</label>
<input
id="steps-range"
type="range"
min="1"
max="5"
value={scale}
step="0.5"
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-400"
onChange={handleChange}
></input>
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6">
1
</span>
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-1/8 -translate-x-1/8 -bottom-6">
1.5
</span>
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-2/8 -translate-x-2/8 -bottom-6">
2
</span>
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-3/8 -translate-x-3/8 -bottom-6">
2.5
</span>
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-4/8 -translate-x-4/8 -bottom-6">
3
</span>
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-5/8 -translate-x-5/8 -bottom-6">
3.5
</span>
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-6/8 -translate-x-6/8 -bottom-6">
4
</span>
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-7/8 -translate-x-7/8 -bottom-6">
4.5
</span>
<span className="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6">
5
</span>
</div>
);
}