mirror of
https://github.com/exogen/t2-mapper.git
synced 2026-01-19 20:25:01 +00:00
Add fog toggle
This commit is contained in:
Brian Beck
parent
ceb8e0a689
commit
cc672fcc56
82
app/page.tsx
82
app/page.tsx
|
|
@ -14,9 +14,18 @@ import { getTerrainFile, iterObjects, parseMissionScript } from "@/src/mission";
|
|||
const BASE_URL = "/t2-mapper";
|
||||
const RESOURCE_ROOT_URL = `${BASE_URL}/base/`;
|
||||
|
||||
function getUrlForPath(resourcePath: string) {
|
||||
function getUrlForPath(resourcePath: string, fallbackUrl?: string) {
|
||||
resourcePath = getActualResourcePath(resourcePath);
|
||||
const sourcePath = getSource(resourcePath);
|
||||
let sourcePath: string;
|
||||
try {
|
||||
sourcePath = getSource(resourcePath);
|
||||
} catch (err) {
|
||||
if (fallbackUrl) {
|
||||
return fallbackUrl;
|
||||
} else {
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
if (!sourcePath) {
|
||||
return `${RESOURCE_ROOT_URL}${resourcePath}`;
|
||||
} else {
|
||||
|
|
@ -31,11 +40,7 @@ function interiorToUrl(name: string) {
|
|||
|
||||
function terrainTextureToUrl(name: string) {
|
||||
name = name.replace(/^terrain\./, "");
|
||||
try {
|
||||
return getUrlForPath(`textures/terrain/${name}.png`);
|
||||
} catch (err) {
|
||||
return `${BASE_URL}/black.png`;
|
||||
}
|
||||
return getUrlForPath(`textures/terrain/${name}.png`, `${BASE_URL}/black.png`);
|
||||
}
|
||||
|
||||
function interiorTextureToUrl(name: string) {
|
||||
|
|
@ -106,6 +111,7 @@ const missions = getResourceList()
|
|||
export default function HomePage() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [missionName, setMissionName] = useState("TWL2_WoodyMyrk");
|
||||
const [fogEnabled, setFogEnabled] = useState(true);
|
||||
const threeContext = useRef<Record<string, any>>({});
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -467,13 +473,14 @@ uniform float tiling5;
|
|||
if (materialList) {
|
||||
const detailMapList = await loadDetailMapList(materialList);
|
||||
const skyLoader = new THREE.CubeTextureLoader();
|
||||
const fallbackUrl = `${BASE_URL}/black.png`;
|
||||
const texture = skyLoader.load([
|
||||
getUrlForPath(detailMapList[1]), // +x
|
||||
getUrlForPath(detailMapList[3]), // -x
|
||||
getUrlForPath(detailMapList[4]), // +y
|
||||
getUrlForPath(detailMapList[5]), // -y
|
||||
getUrlForPath(detailMapList[0]), // +z
|
||||
getUrlForPath(detailMapList[2]), // -z
|
||||
getUrlForPath(detailMapList[1], fallbackUrl), // +x
|
||||
getUrlForPath(detailMapList[3], fallbackUrl), // -x
|
||||
getUrlForPath(detailMapList[4], fallbackUrl), // +y
|
||||
getUrlForPath(detailMapList[5], fallbackUrl), // -y
|
||||
getUrlForPath(detailMapList[0], fallbackUrl), // +z
|
||||
getUrlForPath(detailMapList[2], fallbackUrl), // -z
|
||||
]);
|
||||
scene.background = texture;
|
||||
}
|
||||
|
|
@ -483,7 +490,12 @@ uniform float tiling5;
|
|||
const distance = parseFloat(fogDistance);
|
||||
const [r, g, b] = fogColor.split(" ").map((s) => parseFloat(s));
|
||||
const color = new THREE.Color().setRGB(r, g, b);
|
||||
scene.fog = new THREE.Fog(color, 0, distance * 2);
|
||||
const fog = new THREE.Fog(color, 0, distance * 2);
|
||||
if (fogEnabled) {
|
||||
scene.fog = fog;
|
||||
} else {
|
||||
scene._fog = fog;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
|
@ -552,18 +564,42 @@ uniform float tiling5;
|
|||
};
|
||||
}, [missionName]);
|
||||
|
||||
useEffect(() => {
|
||||
const { scene } = threeContext.current;
|
||||
if (fogEnabled) {
|
||||
scene.fog = scene._fog ?? null;
|
||||
scene._fog = null;
|
||||
} else {
|
||||
scene._fog = scene.fog;
|
||||
scene.fog = null;
|
||||
}
|
||||
}, [fogEnabled]);
|
||||
|
||||
return (
|
||||
<main>
|
||||
<canvas ref={canvasRef} id="canvas" />
|
||||
<select
|
||||
id="missionList"
|
||||
value={missionName}
|
||||
onChange={(e) => setMissionName(e.target.value)}
|
||||
>
|
||||
{missions.map((missionName) => (
|
||||
<option key={missionName}>{missionName}</option>
|
||||
))}
|
||||
</select>
|
||||
<div id="controls">
|
||||
<select
|
||||
id="missionList"
|
||||
value={missionName}
|
||||
onChange={(e) => setMissionName(e.target.value)}
|
||||
>
|
||||
{missions.map((missionName) => (
|
||||
<option key={missionName}>{missionName}</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="CheckboxField">
|
||||
<input
|
||||
id="fogInput"
|
||||
type="checkbox"
|
||||
checked={fogEnabled}
|
||||
onChange={(event) => {
|
||||
setFogEnabled(event.target.checked);
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="fogInput">Fog?</label>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,21 @@ body {
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
#missionList {
|
||||
#controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
padding: 4px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.CheckboxField {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
docs/_next/static/css/757f9ce9d6e38534.css
Normal file
1
docs/_next/static/css/757f9ce9d6e38534.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
body,html{margin:0;padding:0}#canvas{display:block;width:100vw;height:100vh}#controls{gap:10px;position:fixed;top:20px;left:20px;background:rgba(0,0,0,.5);color:#fff;padding:4px 6px;border-radius:3px}#controls,.CheckboxField{display:flex;align-items:center}.CheckboxField{gap:6px}
|
||||
|
|
@ -1 +0,0 @@
|
|||
body,html{margin:0;padding:0}#canvas{display:block;width:100vw;height:100vh}#missionList{position:fixed;top:20px;left:20px}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -2,15 +2,15 @@
|
|||
2:I[9766,[],""]
|
||||
3:I[8924,[],""]
|
||||
4:I[1959,[],"ClientPageRoot"]
|
||||
5:I[9547,["367","static/chunks/b536a0f1-1b5759e0c5317a23.js","831","static/chunks/bd904a5c-1f18d680c676f920.js","443","static/chunks/443-a374e0236a0806b0.js","974","static/chunks/app/page-edc3dbeb1f039af5.js"],"default"]
|
||||
5:I[9547,["367","static/chunks/b536a0f1-1b5759e0c5317a23.js","831","static/chunks/bd904a5c-1f18d680c676f920.js","443","static/chunks/443-a374e0236a0806b0.js","974","static/chunks/app/page-efca826de6cacfcd.js"],"default"]
|
||||
8:I[4431,[],"OutletBoundary"]
|
||||
a:I[5278,[],"AsyncMetadataOutlet"]
|
||||
c:I[4431,[],"ViewportBoundary"]
|
||||
e:I[4431,[],"MetadataBoundary"]
|
||||
f:"$Sreact.suspense"
|
||||
11:I[7150,[],""]
|
||||
:HL["/t2-mapper/_next/static/css/d3642657febdad3f.css","style"]
|
||||
0:{"P":null,"b":"-TQV_goXjnQgaXnbp9gZP","p":"/t2-mapper","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/t2-mapper/_next/static/css/d3642657febdad3f.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"children":["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","$L4",null,{"Component":"$5","searchParams":{},"params":{},"promises":["$@6","$@7"]}],null,["$","$L8",null,{"children":["$L9",["$","$La",null,{"promise":"$@b"}]]}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,[["$","$Lc",null,{"children":"$Ld"}],null],["$","$Le",null,{"children":["$","div",null,{"hidden":true,"children":["$","$f",null,{"fallback":null,"children":"$L10"}]}]}]]}],false]],"m":"$undefined","G":["$11",[]],"s":false,"S":true}
|
||||
:HL["/t2-mapper/_next/static/css/757f9ce9d6e38534.css","style"]
|
||||
0:{"P":null,"b":"EfkwRqWpNznnbfDYI13oB","p":"/t2-mapper","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/t2-mapper/_next/static/css/757f9ce9d6e38534.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"children":["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","$L4",null,{"Component":"$5","searchParams":{},"params":{},"promises":["$@6","$@7"]}],null,["$","$L8",null,{"children":["$L9",["$","$La",null,{"promise":"$@b"}]]}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,[["$","$Lc",null,{"children":"$Ld"}],null],["$","$Le",null,{"children":["$","div",null,{"hidden":true,"children":["$","$f",null,{"fallback":null,"children":"$L10"}]}]}]]}],false]],"m":"$undefined","G":["$11",[]],"s":false,"S":true}
|
||||
6:{}
|
||||
7:"$0:f:0:1:2:children:1:props:children:0:props:params"
|
||||
d:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
|
||||
|
|
|
|||
Loading…
Reference in a new issue