Add exposure slider

docs/_next/static/3bSEIxPAc6nnszlSVOmrC/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/78e521c3-312593b4f3190cc4.js","static/chunks/95b64a6e-6f3d919198a9be32.js","static/chunks/31664189-f79df42a6a9e05f8.js","static/chunks/545f34e4-f96cf9e26b6b92a5.js","static/chunks/1bfc9850-6b316c8ef06e5170.js","static/chunks/d7eeaac4-06e64d251e2cbda7.js","static/chunks/f580fadb-a8e2c6896615a304.js","static/chunks/50-cece886aa17c1d5e.js","static/chunks/pages/index-a118c514250843b5.js"],"/_error":["static/chunks/pages/_error-479484f6c157e921.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
+self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/78e521c3-312593b4f3190cc4.js","static/chunks/95b64a6e-6f3d919198a9be32.js","static/chunks/31664189-7261674e93dbb0a6.js","static/chunks/545f34e4-f96cf9e26b6b92a5.js","static/chunks/1bfc9850-6b316c8ef06e5170.js","static/chunks/d7eeaac4-06e64d251e2cbda7.js","static/chunks/f580fadb-a8e2c6896615a304.js","static/chunks/50-cece886aa17c1d5e.js","static/chunks/pages/index-0828f257a09ea6ee.js"],"/_error":["static/chunks/pages/_error-479484f6c157e921.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

docs/_next/static/chunks/31664189-7261674e93dbb0a6.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[609],{3990:function(t,c,n){n.d(c,{J76:function(){return a},MXq:function(){return i},UIL:function(){return v},rks:function(){return s},yAv:function(){return e}});var r=n(8357);function v(t){return(0,r.w_)({tag:"svg",attr:{version:"1.1",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M11.904 16c1.777-3.219 2.076-8.13-4.904-7.966v3.966l-6-6 6-6v3.881c8.359-0.218 9.29 7.378 4.904 12.119z"}}]})(t)}function s(t){return(0,r.w_)({tag:"svg",attr:{version:"1.1",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M9 3.881v-3.881l6 6-6 6v-3.966c-6.98-0.164-6.681 4.747-4.904 7.966-4.386-4.741-3.455-12.337 4.904-12.119z"}}]})(t)}function a(t){return(0,r.w_)({tag:"svg",attr:{version:"1.1",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM2 8c0-3.314 2.686-6 6-6v12c-3.314 0-6-2.686-6-6z"}}]})(t)}function i(t){return(0,r.w_)({tag:"svg",attr:{version:"1.1",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M8 4c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4zM8 10.5v-5c1.379 0 2.5 1.122 2.5 2.5s-1.121 2.5-2.5 2.5zM8 13c0.552 0 1 0.448 1 1v1c0 0.552-0.448 1-1 1s-1-0.448-1-1v-1c0-0.552 0.448-1 1-1zM8 3c-0.552 0-1-0.448-1-1v-1c0-0.552 0.448-1 1-1s1 0.448 1 1v1c0 0.552-0.448 1-1 1zM15 7c0.552 0 1 0.448 1 1s-0.448 1-1 1h-1c-0.552 0-1-0.448-1-1s0.448-1 1-1h1zM3 8c0 0.552-0.448 1-1 1h-1c-0.552 0-1-0.448-1-1s0.448-1 1-1h1c0.552 0 1 0.448 1 1zM12.95 11.536l0.707 0.707c0.39 0.39 0.39 1.024 0 1.414s-1.024 0.39-1.414 0l-0.707-0.707c-0.39-0.39-0.39-1.024 0-1.414s1.024-0.39 1.414 0zM3.050 4.464l-0.707-0.707c-0.391-0.391-0.391-1.024 0-1.414s1.024-0.391 1.414 0l0.707 0.707c0.391 0.391 0.391 1.024 0 1.414s-1.024 0.391-1.414 0zM12.95 4.464c-0.39 0.391-1.024 0.391-1.414 0s-0.39-1.024 0-1.414l0.707-0.707c0.39-0.391 1.024-0.391 1.414 0s0.39 1.024 0 1.414l-0.707 0.707zM3.050 11.536c0.39-0.39 1.024-0.39 1.414 0s0.391 1.024 0 1.414l-0.707 0.707c-0.391 0.39-1.024 0.39-1.414 0s-0.391-1.024 0-1.414l0.707-0.707z"}}]})(t)}function e(t){return(0,r.w_)({tag:"svg",attr:{version:"1.1",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M15.5 6h-5.5v-5.5c0-0.276-0.224-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5v5.5h-5.5c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h5.5v5.5c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5v-5.5h5.5c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5z"}}]})(t)}}}]);
+//# sourceMappingURL=31664189-7261674e93dbb0a6.js.map

docs/_next/static/chunks/31664189-f79df42a6a9e05f8.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[609],{3990:function(t,n,r){r.d(n,{J76:function(){return i},UIL:function(){return v},rks:function(){return a},yAv:function(){return e}});var c=r(8357);function v(t){return(0,c.w_)({tag:"svg",attr:{version:"1.1",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M11.904 16c1.777-3.219 2.076-8.13-4.904-7.966v3.966l-6-6 6-6v3.881c8.359-0.218 9.29 7.378 4.904 12.119z"}}]})(t)}function a(t){return(0,c.w_)({tag:"svg",attr:{version:"1.1",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M9 3.881v-3.881l6 6-6 6v-3.966c-6.98-0.164-6.681 4.747-4.904 7.966-4.386-4.741-3.455-12.337 4.904-12.119z"}}]})(t)}function i(t){return(0,c.w_)({tag:"svg",attr:{version:"1.1",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM2 8c0-3.314 2.686-6 6-6v12c-3.314 0-6-2.686-6-6z"}}]})(t)}function e(t){return(0,c.w_)({tag:"svg",attr:{version:"1.1",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M15.5 6h-5.5v-5.5c0-0.276-0.224-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5v5.5h-5.5c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h5.5v5.5c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5v-5.5h5.5c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5z"}}]})(t)}}}]);
-//# sourceMappingURL=31664189-f79df42a6a9e05f8.js.map

docs/_next/static/chunks/990.4c85486f75efa465.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[990],{85:function(e,t,a){a.r(t),a.d(t,{default:function(){return o}});var r=a(5893),i=a(7294);a(258);var n=a(8496);function l(e){var t;let{modelUrl:a,environmentImageUrl:l,showEnvironment:o=!1,exposure:u=1,animationName:s,animationPaused:d=!1,cameraOrbit:f,cameraTarget:c,fieldOfView:m,children:v}=e,[h,g]=(0,i.useState)(null),[x,E]=(0,i.useState)(!1),b=(0,i.useMemo)(()=>h&&x&&h.model?{modelViewer:h,model:h.model,isLoaded:x}:null,[h,x]);return t=h,(0,i.useEffect)(()=>{t&&(t.timeScale=.5)},[t]),(0,i.useEffect)(()=>{if(!h)return;let e=!1,t=()=>{e||E(!0)};return h.addEventListener("load",t),()=>{e=!0,h.removeEventListener("load",t)}},[h,a]),(0,i.useEffect)(()=>{h&&h.loaded&&E(!0)},[h,a]),(0,i.useEffect)(()=>{h&&x&&(d?h.pause():h.play())},[h,x,d]),(0,i.useEffect)(()=>{h&&x&&m&&h.setAttribute("field-of-view",m)},[h,x,m]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("model-viewer",{ref:g,alt:"Tribes 2 Model",src:a,"camera-controls":!0,"camera-orbit":f,"max-camera-orbit":l&&o?"auto 90deg auto":void 0,"camera-target":c,"min-field-of-view":"10deg","max-field-of-view":"45deg","animation-name":null!=s?s:void 0,autoplay:s?"true":"false","touch-action":"pan-y",exposure:u,"environment-image":null!=l?l:void 0,"skybox-image":l&&o?l:void 0,"skybox-height":"1.5m","shadow-intensity":l&&o?1:0,style:{width:"100%",height:"100%"}}),x?(0,r.jsx)(n.K.Provider,{value:b,children:v}):null]})}function o(e){return(0,r.jsx)(l,{...e},e.modelUrl)}}}]);
+//# sourceMappingURL=990.4c85486f75efa465.js.map

docs/_next/static/chunks/990.c9b797c547fba15f.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[990],{85:function(e,t,a){a.r(t),a.d(t,{default:function(){return o}});var i=a(5893),n=a(7294);a(258);var r=a(8496);function l(e){var t;let{modelUrl:a,environmentImageUrl:l,showEnvironment:o=!1,animationName:u,animationPaused:s=!1,cameraOrbit:d,cameraTarget:f,fieldOfView:c,children:m}=e,[v,h]=(0,n.useState)(null),[g,E]=(0,n.useState)(!1),b=(0,n.useMemo)(()=>v&&g&&v.model?{modelViewer:v,model:v.model,isLoaded:g}:null,[v,g]);return t=v,(0,n.useEffect)(()=>{t&&(t.timeScale=.5)},[t]),(0,n.useEffect)(()=>{if(!v)return;let e=!1,t=()=>{e||E(!0)};return v.addEventListener("load",t),()=>{e=!0,v.removeEventListener("load",t)}},[v,a]),(0,n.useEffect)(()=>{v&&v.loaded&&E(!0)},[v,a]),(0,n.useEffect)(()=>{v&&g&&(s?v.pause():v.play())},[v,g,s]),(0,n.useEffect)(()=>{v&&g&&c&&v.setAttribute("field-of-view",c)},[v,g,c]),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("model-viewer",{ref:h,alt:"Tribes 2 Model",src:a,"camera-controls":!0,"camera-orbit":d,"max-camera-orbit":l&&o?"auto 90deg auto":void 0,"camera-target":f,"min-field-of-view":"10deg","max-field-of-view":"45deg","animation-name":null!=u?u:void 0,autoplay:u?"true":"false","touch-action":"pan-y","environment-image":null!=l?l:void 0,"skybox-image":l&&o?l:void 0,"skybox-height":"1.5m","shadow-intensity":l&&o?1:0,style:{width:"100%",height:"100%"}}),g?(0,i.jsx)(r.K.Provider,{value:b,children:m}):null]})}function o(e){return(0,i.jsx)(l,{...e},e.modelUrl)}}}]);
-//# sourceMappingURL=990.c9b797c547fba15f.js.map

docs/_next/static/chunks/webpack-777e35b1f29a758f.js

@@ -1,2 +1,2 @@
-!function(){"use strict";var e,t,n,r,o,u,i,c={},a={};function f(e){var t=a[e];if(void 0!==t)return t.exports;var n=a[e]={exports:{}},r=!0;try{c[e].call(n.exports,n,n.exports,f),r=!1}finally{r&&delete a[e]}return n.exports}f.m=c,e=[],f.O=function(t,n,r,o){if(n){o=o||0;for(var u=e.length;u>0&&e[u-1][2]>o;u--)e[u]=e[u-1];e[u]=[n,r,o];return}for(var i=1/0,u=0;u<e.length;u++){for(var n=e[u][0],r=e[u][1],o=e[u][2],c=!0,a=0;a<n.length;a++)i>=o&&Object.keys(f.O).every(function(e){return f.O[e](n[a])})?n.splice(a--,1):(c=!1,o<i&&(i=o));if(c){e.splice(u--,1);var l=r();void 0!==l&&(t=l)}}return t},f.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(t,{a:t}),t},f.d=function(e,t){for(var n in t)f.o(t,n)&&!f.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},f.f={},f.e=function(e){return Promise.all(Object.keys(f.f).reduce(function(t,n){return f.f[n](e,t),t},[]))},f.u=function(e){return"static/chunks/"+(737===e?"fb7d5399":e)+"."+({70:"0ba1ca12d54bca2d",258:"53d25aa602c4d686",354:"3289d8281650c8de",737:"ddae1e8fed13bcfe",990:"c9b797c547fba15f"})[e]+".js"},f.miniCssF=function(e){return"static/css/1c3a9dfba8410e18.css"},f.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),f.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t={},n="_N_E:",f.l=function(e,r,o,u){if(t[e]){t[e].push(r);return}if(void 0!==o)for(var i,c,a=document.getElementsByTagName("script"),l=0;l<a.length;l++){var s=a[l];if(s.getAttribute("src")==e||s.getAttribute("data-webpack")==n+o){i=s;break}}i||(c=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,f.nc&&i.setAttribute("nonce",f.nc),i.setAttribute("data-webpack",n+o),i.src=f.tu(e)),t[e]=[r];var d=function(n,r){i.onerror=i.onload=null,clearTimeout(p);var o=t[e];if(delete t[e],i.parentNode&&i.parentNode.removeChild(i),o&&o.forEach(function(e){return e(r)}),n)return n(r)},p=setTimeout(d.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=d.bind(null,i.onerror),i.onload=d.bind(null,i.onload),c&&document.head.appendChild(i)},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.tt=function(){return void 0===r&&(r={createScriptURL:function(e){return e}},"undefined"!=typeof trustedTypes&&trustedTypes.createPolicy&&(r=trustedTypes.createPolicy("nextjs#bundler",r))),r},f.tu=function(e){return f.tt().createScriptURL(e)},f.p="/t2-model-skinner/_next/",o={272:0},f.f.j=function(e,t){var n=f.o(o,e)?o[e]:void 0;if(0!==n){if(n)t.push(n[2]);else if(272!=e){var r=new Promise(function(t,r){n=o[e]=[t,r]});t.push(n[2]=r);var u=f.p+f.u(e),i=Error();f.l(u,function(t){if(f.o(o,e)&&(0!==(n=o[e])&&(o[e]=void 0),n)){var r=t&&("load"===t.type?"missing":t.type),u=t&&t.target&&t.target.src;i.message="Loading chunk "+e+" failed.\n("+r+": "+u+")",i.name="ChunkLoadError",i.type=r,i.request=u,n[1](i)}},"chunk-"+e,e)}else o[e]=0}},f.O.j=function(e){return 0===o[e]},u=function(e,t){var n,r,u=t[0],i=t[1],c=t[2],a=0;if(u.some(function(e){return 0!==o[e]})){for(n in i)f.o(i,n)&&(f.m[n]=i[n]);if(c)var l=c(f)}for(e&&e(t);a<u.length;a++)r=u[a],f.o(o,r)&&o[r]&&o[r][0](),o[r]=0;return f.O(l)},(i=self.webpackChunk_N_E=self.webpackChunk_N_E||[]).forEach(u.bind(null,0)),i.push=u.bind(null,i.push.bind(i))}();
-//# sourceMappingURL=webpack-f7f4d85739330c35.js.map
+!function(){"use strict";var e,t,n,r,o,u,i,c={},a={};function f(e){var t=a[e];if(void 0!==t)return t.exports;var n=a[e]={exports:{}},r=!0;try{c[e].call(n.exports,n,n.exports,f),r=!1}finally{r&&delete a[e]}return n.exports}f.m=c,e=[],f.O=function(t,n,r,o){if(n){o=o||0;for(var u=e.length;u>0&&e[u-1][2]>o;u--)e[u]=e[u-1];e[u]=[n,r,o];return}for(var i=1/0,u=0;u<e.length;u++){for(var n=e[u][0],r=e[u][1],o=e[u][2],c=!0,a=0;a<n.length;a++)i>=o&&Object.keys(f.O).every(function(e){return f.O[e](n[a])})?n.splice(a--,1):(c=!1,o<i&&(i=o));if(c){e.splice(u--,1);var l=r();void 0!==l&&(t=l)}}return t},f.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(t,{a:t}),t},f.d=function(e,t){for(var n in t)f.o(t,n)&&!f.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},f.f={},f.e=function(e){return Promise.all(Object.keys(f.f).reduce(function(t,n){return f.f[n](e,t),t},[]))},f.u=function(e){return"static/chunks/"+(737===e?"fb7d5399":e)+"."+({70:"0ba1ca12d54bca2d",258:"53d25aa602c4d686",354:"3289d8281650c8de",737:"ddae1e8fed13bcfe",990:"4c85486f75efa465"})[e]+".js"},f.miniCssF=function(e){return"static/css/1c3a9dfba8410e18.css"},f.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),f.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t={},n="_N_E:",f.l=function(e,r,o,u){if(t[e]){t[e].push(r);return}if(void 0!==o)for(var i,c,a=document.getElementsByTagName("script"),l=0;l<a.length;l++){var s=a[l];if(s.getAttribute("src")==e||s.getAttribute("data-webpack")==n+o){i=s;break}}i||(c=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,f.nc&&i.setAttribute("nonce",f.nc),i.setAttribute("data-webpack",n+o),i.src=f.tu(e)),t[e]=[r];var d=function(n,r){i.onerror=i.onload=null,clearTimeout(p);var o=t[e];if(delete t[e],i.parentNode&&i.parentNode.removeChild(i),o&&o.forEach(function(e){return e(r)}),n)return n(r)},p=setTimeout(d.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=d.bind(null,i.onerror),i.onload=d.bind(null,i.onload),c&&document.head.appendChild(i)},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.tt=function(){return void 0===r&&(r={createScriptURL:function(e){return e}},"undefined"!=typeof trustedTypes&&trustedTypes.createPolicy&&(r=trustedTypes.createPolicy("nextjs#bundler",r))),r},f.tu=function(e){return f.tt().createScriptURL(e)},f.p="/t2-model-skinner/_next/",o={272:0},f.f.j=function(e,t){var n=f.o(o,e)?o[e]:void 0;if(0!==n){if(n)t.push(n[2]);else if(272!=e){var r=new Promise(function(t,r){n=o[e]=[t,r]});t.push(n[2]=r);var u=f.p+f.u(e),i=Error();f.l(u,function(t){if(f.o(o,e)&&(0!==(n=o[e])&&(o[e]=void 0),n)){var r=t&&("load"===t.type?"missing":t.type),u=t&&t.target&&t.target.src;i.message="Loading chunk "+e+" failed.\n("+r+": "+u+")",i.name="ChunkLoadError",i.type=r,i.request=u,n[1](i)}},"chunk-"+e,e)}else o[e]=0}},f.O.j=function(e){return 0===o[e]},u=function(e,t){var n,r,u=t[0],i=t[1],c=t[2],a=0;if(u.some(function(e){return 0!==o[e]})){for(n in i)f.o(i,n)&&(f.m[n]=i[n]);if(c)var l=c(f)}for(e&&e(t);a<u.length;a++)r=u[a],f.o(o,r)&&o[r]&&o[r][0](),o[r]=0;return f.O(l)},(i=self.webpackChunk_N_E=self.webpackChunk_N_E||[]).forEach(u.bind(null,0)),i.push=u.bind(null,i.push.bind(i))}();
+//# sourceMappingURL=webpack-777e35b1f29a758f.js.map

src/EnvironmentProvider.tsx

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

src/EnvironmentSelector.tsx

@@ -1,7 +1,9 @@
+import { ImBrightnessContrast } from "react-icons/im";
 import useEnvironment from "./useEnvironment";
 
 export default function EnvironmentSelector() {
-  const { selectedEnvironment, setSelectedEnvironment } = useEnvironment();
+  const { selectedEnvironment, setSelectedEnvironment, exposure, setExposure } =
+    useEnvironment();
 
   return (
     <>
@@ -29,6 +31,23 @@ export default function EnvironmentSelector() {
         <option value="spruit_sunrise_1k_HDR.hdr">Spruit Sunrise</option>
         <option value="umhlanga_sunrise_1k.hdr">Umhlanga Sunrise</option>
       </select>
+      <div className="CheckboxField">
+        <label htmlFor="EnvExposure">
+          <ImBrightnessContrast size={16} />
+        </label>
+        <input
+          aria-label="Exposure"
+          id="EnvExposure"
+          type="range"
+          min={0.2}
+          max={2.2}
+          step={0.1}
+          value={exposure}
+          onChange={(event) => {
+            setExposure(parseFloat(event.target.value));
+          }}
+        />
+      </div>
     </>
   );
 }

src/ModelViewer.tsx

@@ -12,6 +12,7 @@ declare global {
       alt: string;
       src: string;
       ref: (modelViewer: ModelViewerElement | null) => void;
+      exposure: number;
       autoplay: "true" | "false";
       scale?: string;
       style: CSSProperties;
@@ -31,6 +32,7 @@ interface ModelViewerProps {
   modelUrl: string;
   environmentImageUrl: string | null;
   showEnvironment?: boolean;
+  exposure?: number;
   colorImageUrl?: string;
   metallicImageUrl?: string;
   animationName: string | null;
@@ -45,6 +47,7 @@ function ModelViewerKeyedByModel({
   modelUrl,
   environmentImageUrl,
   showEnvironment = false,
+  exposure = 1,
   animationName,
   animationPaused = false,
   cameraOrbit,
@@ -132,6 +135,7 @@ function ModelViewerKeyedByModel({
         animation-name={animationName ?? undefined}
         autoplay={animationName ? "true" : "false"}
         touch-action="pan-y"
+        exposure={exposure}
         environment-image={environmentImageUrl ?? undefined}
         skybox-image={
           environmentImageUrl && showEnvironment

src/WarriorViewer.tsx

@@ -18,7 +18,7 @@ export default function WarriorViewer() {
     selectedAnimation,
     animationPaused,
   } = useWarrior();
-  const { environmentImageUrl, showEnvironment } = useEnvironment();
+  const { environmentImageUrl, showEnvironment, exposure } = useEnvironment();
 
   return (
     <ModelViewer
@@ -32,6 +32,7 @@ export default function WarriorViewer() {
       }
       cameraTarget={cameraOverrides[selectedModel]?.target}
       fieldOfView={cameraOverrides[selectedModel]?.fov}
+      exposure={exposure}
     >
       <Materials />
     </ModelViewer>

src/useEnvironment.ts

@@ -5,6 +5,8 @@ interface EnvironmentContextValue {
   setSelectedEnvironment: (selectedEnvironment: string | null) => void;
   showEnvironment: boolean;
   setShowEnvironment: (showEnvironment: boolean) => void;
+  exposure: number;
+  setExposure: (exposure: number) => void;
   environmentImageUrl: string | null;
 }