Prepare for showEnvironment option

src/EnvironmentProvider.tsx

@@ -10,6 +10,7 @@ export default function EnvironmentProvider({
   const [selectedEnvironment, setSelectedEnvironment] = useState<string | null>(
     null
   );
+  const [showEnvironment, setShowEnvironment] = useState(false);
   const { basePath } = useSettings();
 
   const context = useMemo(() => {
@@ -19,9 +20,11 @@ export default function EnvironmentProvider({
     return {
       selectedEnvironment,
       setSelectedEnvironment,
+      showEnvironment,
+      setShowEnvironment,
       environmentImageUrl,
     };
-  }, [basePath, selectedEnvironment, setSelectedEnvironment]);
+  }, [basePath, selectedEnvironment, showEnvironment]);
 
   return (
     <EnvironmentContext.Provider value={context}>

src/EnvironmentSelector.tsx

@@ -1,7 +1,12 @@
 import useEnvironment from "./useEnvironment";
 
 export default function EnvironmentSelector() {
-  const { selectedEnvironment, setSelectedEnvironment } = useEnvironment();
+  const {
+    selectedEnvironment,
+    setSelectedEnvironment,
+    showEnvironment,
+    setShowEnvironment,
+  } = useEnvironment();
 
   return (
     <>

src/ModelViewer.tsx

@@ -30,6 +30,7 @@ function useTimeScale(modelViewer: ModelViewerElement | null) {
 interface ModelViewerProps {
   modelUrl: string;
   environmentImageUrl: string | null;
+  showEnvironment?: boolean;
   colorImageUrl?: string;
   metallicImageUrl?: string;
   animationName: string | null;
@@ -43,6 +44,7 @@ interface ModelViewerProps {
 function ModelViewerKeyedByModel({
   modelUrl,
   environmentImageUrl,
+  showEnvironment = false,
   animationName,
   animationPaused = false,
   cameraOrbit,
@@ -119,15 +121,25 @@ function ModelViewerKeyedByModel({
         ref={setModelViewer}
         alt="Tribes 2 Model"
         src={modelUrl}
-        shadow-intensity={0}
         camera-controls
         camera-orbit={cameraOrbit}
+        max-camera-orbit={
+          environmentImageUrl && showEnvironment ? "auto 90deg auto" : undefined
+        }
         camera-target={cameraTarget}
         min-field-of-view="10deg"
+        max-field-of-view="45deg"
         animation-name={animationName ?? undefined}
         autoplay={animationName ? "true" : "false"}
         touch-action="pan-y"
         environment-image={environmentImageUrl ?? undefined}
+        skybox-image={
+          environmentImageUrl && showEnvironment
+            ? environmentImageUrl
+            : undefined
+        }
+        skybox-height="1.5m"
+        shadow-intensity={environmentImageUrl && showEnvironment ? 1 : 0}
         style={{ width: "100%", height: "100%" }}
       />
       {isLoaded ? (

src/WarriorViewer.tsx

@@ -18,12 +18,13 @@ export default function WarriorViewer() {
     selectedAnimation,
     animationPaused,
   } = useWarrior();
-  const { environmentImageUrl } = useEnvironment();
+  const { environmentImageUrl, showEnvironment } = useEnvironment();
 
   return (
     <ModelViewer
       modelUrl={selectedModelUrl}
       environmentImageUrl={environmentImageUrl}
+      showEnvironment={showEnvironment}
       animationName={selectedAnimation}
       animationPaused={animationPaused}
       cameraOrbit={

src/styles/global.css

@@ -271,13 +271,18 @@ select {
   top: 0;
   left: 0;
   right: 0;
-  margin: 10px 0 0 10px;
+  padding: 10px 0 10px 10px;
   z-index: 2;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 10px;
 }
 
+.ModelTools:has(input[type="checkbox"]:checked) {
+  background-color: #01292e;
+  background-image: linear-gradient(to bottom, #124044 0%, #001720 100vh);
+}
+
 .Field {
   display: flex;
   flex-direction: column;
@@ -423,3 +428,10 @@ h6 {
   margin: 0;
   padding: 0;
 }
+
+.CheckboxField {
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}

src/useEnvironment.ts

@@ -3,6 +3,8 @@ import React, { useContext } from "react";
 interface EnvironmentContextValue {
   selectedEnvironment: string | null;
   setSelectedEnvironment: (selectedEnvironment: string | null) => void;
+  showEnvironment: boolean;
+  setShowEnvironment: (showEnvironment: boolean) => void;
   environmentImageUrl: string | null;
 }