[#5] Adjust render resolution dynamically
All checks were successful
Publish Docker Image / Publish Docker Image (push) Successful in 5s
All checks were successful
Publish Docker Image / Publish Docker Image (push) Successful in 5s
This commit is contained in:
@@ -19,6 +19,7 @@
|
||||
"ajv": "^8.17.1",
|
||||
"ajv-formats": "^3.0.1",
|
||||
"awesome-ajv-errors": "^5.1.0",
|
||||
"lodash": "^4.17.21",
|
||||
"next": "15.3.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
@@ -28,6 +29,7 @@
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/lodash": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
Text,
|
||||
Html,
|
||||
type PerspectiveCameraProps,
|
||||
PerformanceMonitor,
|
||||
} from "@react-three/drei";
|
||||
import {
|
||||
animated as threeAnimated,
|
||||
@@ -25,11 +26,10 @@ import {
|
||||
Suspense,
|
||||
useCallback,
|
||||
type JSX,
|
||||
type Dispatch,
|
||||
type SetStateAction,
|
||||
} from "react";
|
||||
import round from "lodash/round";
|
||||
import Stack from "@/util/stack";
|
||||
import { Canvas, useFrame } from "@react-three/fiber";
|
||||
import { Canvas } from "@react-three/fiber";
|
||||
import { mdiArrowLeftBold } from "@mdi/js";
|
||||
import { Icon } from "@mdi/react";
|
||||
import { PDF } from "../util/PDF";
|
||||
@@ -51,28 +51,6 @@ const AnimatedButton = webAnimated.button as React.ComponentType<
|
||||
React.ButtonHTMLAttributes<HTMLButtonElement> & { children?: React.ReactNode }
|
||||
>;
|
||||
|
||||
function FpsUpdater({
|
||||
onUpdate,
|
||||
}: {
|
||||
onUpdate: Dispatch<SetStateAction<number>>;
|
||||
}) {
|
||||
const fpsRef = useRef([0]);
|
||||
useFrame((_, delta) => fpsRef.current.push(1 / delta));
|
||||
|
||||
useEffect(() => {
|
||||
const id = setInterval(() => {
|
||||
const avg =
|
||||
fpsRef.current.reduce((a, b) => a + b, 0) / fpsRef.current.length;
|
||||
fpsRef.current = [];
|
||||
onUpdate(avg);
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(id);
|
||||
}, [onUpdate]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function Scene(props: JSX.IntrinsicElements["group"]) {
|
||||
const { nodes, materials } = useGLTF("/scene.glb") as unknown as GLTFResult;
|
||||
const { width, height } = useWindowSize();
|
||||
@@ -80,6 +58,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
|
||||
|
||||
// States
|
||||
const [fps, setFps] = useState(0);
|
||||
const [dpr, setDpr] = useState(2);
|
||||
const [pendingView, setPendingView] = useState<View | null>(null);
|
||||
const [backHovered, setBackHovered] = useState(false);
|
||||
const [backClicked, setBackClicked] = useState(false);
|
||||
@@ -134,7 +113,6 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
|
||||
precision: 0.0001,
|
||||
friction: 80,
|
||||
mass: 10,
|
||||
clamp: true,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -147,10 +125,10 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
|
||||
// Scene
|
||||
return (
|
||||
<main className="h-screen w-screen overscroll-none touch-none bg-[#1b1b1b]">
|
||||
<Loader />
|
||||
{isWebGL2Available() ? (
|
||||
width >= 1.5 * height ? (
|
||||
<>
|
||||
<Loader />
|
||||
<div className="pointer-events-none fixed z-[999999999] size-full">
|
||||
<AnimatedButton
|
||||
style={{
|
||||
@@ -178,198 +156,210 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
|
||||
</AnimatedButton>
|
||||
<div className="min-w-12 text-white bottom-0 right-0 absolute m-3 p-1 text-xs text-right text-stroke-2 text-stroke-black paint-sfm">
|
||||
<Info />
|
||||
{fps > 0 && <>{fps.toFixed(0)} fps</>}
|
||||
{fps > 0 && (
|
||||
<>
|
||||
{fps.toFixed(0)} fps | {dpr}x
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Canvas
|
||||
shadows
|
||||
dpr={dpr}
|
||||
gl={{ localClippingEnabled: true, antialias: true, alpha: true }}
|
||||
>
|
||||
<Suspense fallback={null}>
|
||||
<group {...props} dispose={null}>
|
||||
<FpsUpdater onUpdate={setFps} />
|
||||
<Environment preset="apartment" />
|
||||
<AnimatedCam makeDefault {...cameraSpring} />
|
||||
<Buttons
|
||||
menuTraversal={menuTraversal}
|
||||
setMenuTraversal={setMenuTraversal}
|
||||
pendingView={pendingView}
|
||||
setPendingView={setPendingView}
|
||||
goPreviousView={goPreviousView}
|
||||
currentView={currentView}
|
||||
/>
|
||||
<group>
|
||||
<primitive
|
||||
object={spotlight}
|
||||
position={[-1.915, 20, 1.0925]}
|
||||
/>
|
||||
<primitive
|
||||
object={spotlight.target}
|
||||
position={[-1.915, 0, 1.0925]}
|
||||
/>
|
||||
</group>
|
||||
<group
|
||||
position={[2.50415, 0.12973, 3.47808]}
|
||||
rotation={[0, -Math.PI / 2, 0]}
|
||||
scale={0.01}
|
||||
<PerformanceMonitor
|
||||
ms={100}
|
||||
onChange={(api) => {
|
||||
setFps(api.fps);
|
||||
setDpr(round(1.5 * api.factor + 0.5, 1));
|
||||
}}
|
||||
>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.Monitor.geometry}
|
||||
material={materials.PlasticMaterial}
|
||||
position={[-175, 415.25, -160]}
|
||||
>
|
||||
<Html
|
||||
transform
|
||||
receiveShadow
|
||||
castShadow
|
||||
pointerEvents={
|
||||
currentView === View.PCView ? "auto" : "none"
|
||||
}
|
||||
occlude="blending"
|
||||
className="w-[1452px] h-[810px] bg-[#0e1838]"
|
||||
scale={10}
|
||||
position={[0, 170, 0.25]}
|
||||
raycast={
|
||||
currentView === View.DesktopView
|
||||
? () => null
|
||||
: undefined
|
||||
}
|
||||
distanceFactor={10}
|
||||
>
|
||||
<div className="size-full">
|
||||
<PCUI />
|
||||
</div>
|
||||
</Html>
|
||||
</mesh>
|
||||
</group>
|
||||
<group
|
||||
position={[4.105, 4.2825, -2.085]}
|
||||
rotation={[0, -Math.PI / 2, 0]}
|
||||
>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.SecondaryMonitorMesh.geometry}
|
||||
material={materials.SecondaryMonitorMaterial}
|
||||
<Environment preset="apartment" />
|
||||
<AnimatedCam makeDefault {...cameraSpring} />
|
||||
<Buttons
|
||||
menuTraversal={menuTraversal}
|
||||
setMenuTraversal={setMenuTraversal}
|
||||
pendingView={pendingView}
|
||||
setPendingView={setPendingView}
|
||||
goPreviousView={goPreviousView}
|
||||
currentView={currentView}
|
||||
/>
|
||||
<group>
|
||||
<primitive
|
||||
object={spotlight}
|
||||
position={[-1.915, 20, 1.0925]}
|
||||
/>
|
||||
<primitive
|
||||
object={spotlight.target}
|
||||
position={[-1.915, 0, 1.0925]}
|
||||
/>
|
||||
</group>
|
||||
<group
|
||||
position={[2.50415, 0.12973, 3.47808]}
|
||||
rotation={[0, -Math.PI / 2, 0]}
|
||||
scale={0.01}
|
||||
>
|
||||
<Credits currentView={currentView} />
|
||||
</mesh>
|
||||
</group>
|
||||
<group
|
||||
position={[3.81024, 3.85444, 6.13972]}
|
||||
rotation={[-Math.PI, -0.44331, -Math.PI]}
|
||||
scale={0.035}
|
||||
>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.Paper3.geometry}
|
||||
material={materials.PaperMaterial}
|
||||
>
|
||||
<Html
|
||||
transform
|
||||
receiveShadow
|
||||
<mesh
|
||||
castShadow
|
||||
pointerEvents={
|
||||
currentView === View.ResumeView ? "auto" : "none"
|
||||
}
|
||||
occlude="blending"
|
||||
className="w-[800px] h-[1074px] bg-white"
|
||||
scale={15}
|
||||
position={[28.7765, 12.431875, 3.725]}
|
||||
rotation={[-Math.PI / 2, 0, (1 * Math.PI) / 9]}
|
||||
raycast={
|
||||
currentView === View.ResumeView
|
||||
? () => null
|
||||
: undefined
|
||||
}
|
||||
distanceFactor={1}
|
||||
>
|
||||
<PDF url="/config/resume.pdf" />
|
||||
</Html>
|
||||
</mesh>
|
||||
</group>
|
||||
<group
|
||||
position={[2.58559, 4.69855, 3.29056]}
|
||||
rotation={[-Math.PI, -0.43633, -Math.PI]}
|
||||
scale={0.02}
|
||||
>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.CellphoneMesh.geometry}
|
||||
material={materials.CellphoneMaterial}
|
||||
position={[-102.64982, -21.45192, 247.01788]}
|
||||
>
|
||||
<Html
|
||||
transform
|
||||
receiveShadow
|
||||
castShadow
|
||||
pointerEvents={
|
||||
currentView === View.CellphoneView ? "auto" : "none"
|
||||
}
|
||||
occlude="blending"
|
||||
className="w-[1008px] h-[1614px] bg-blue-100"
|
||||
position={[0, 2.8, 0]}
|
||||
rotation={[-Math.PI / 2, 0, Math.PI / 2]}
|
||||
raycast={
|
||||
currentView === View.CellphoneView
|
||||
? () => null
|
||||
: undefined
|
||||
}
|
||||
style={{
|
||||
backgroundImage: "url('/assets/cellphone-bg.webp')",
|
||||
backgroundColor: "black",
|
||||
}}
|
||||
distanceFactor={10}
|
||||
geometry={nodes.Monitor.geometry}
|
||||
material={materials.PlasticMaterial}
|
||||
position={[-175, 415.25, -160]}
|
||||
>
|
||||
<CellphoneUI />
|
||||
</Html>
|
||||
</mesh>
|
||||
</group>
|
||||
<Text
|
||||
position={[-2.415, 12.5, -6]}
|
||||
font="/assets/inter-bold.ttf"
|
||||
color="black"
|
||||
fontSize={3}
|
||||
>
|
||||
{config.name[0]}
|
||||
</Text>
|
||||
<Text
|
||||
position={[5.185, 12.5, 1.592]}
|
||||
font="/assets/inter-bold.ttf"
|
||||
rotation={[0, -Math.PI / 2, 0]}
|
||||
color="black"
|
||||
fontSize={3}
|
||||
>
|
||||
{config.name[1]}
|
||||
</Text>
|
||||
{config.status && (
|
||||
<Html
|
||||
transform
|
||||
receiveShadow
|
||||
castShadow
|
||||
pointerEvents={
|
||||
currentView === View.PCView ? "auto" : "none"
|
||||
}
|
||||
occlude="blending"
|
||||
className="w-[1452px] h-[810px] bg-[#0e1838]"
|
||||
scale={10}
|
||||
position={[0, 170, 0.5]}
|
||||
raycast={
|
||||
currentView === View.DesktopView
|
||||
? () => null
|
||||
: undefined
|
||||
}
|
||||
distanceFactor={10}
|
||||
>
|
||||
<div className="size-full">
|
||||
<PCUI />
|
||||
</div>
|
||||
</Html>
|
||||
</mesh>
|
||||
</group>
|
||||
<group
|
||||
position={[4.105, 4.2825, -2.085]}
|
||||
rotation={[0, -Math.PI / 2, 0]}
|
||||
>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.SecondaryMonitorMesh.geometry}
|
||||
material={materials.SecondaryMonitorMaterial}
|
||||
scale={0.01}
|
||||
>
|
||||
<Credits currentView={currentView} />
|
||||
</mesh>
|
||||
</group>
|
||||
<group
|
||||
position={[3.81024, 3.85444, 6.13972]}
|
||||
rotation={[-Math.PI, -0.44331, -Math.PI]}
|
||||
scale={0.035}
|
||||
>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.Paper3.geometry}
|
||||
material={materials.PaperMaterial}
|
||||
>
|
||||
<Html
|
||||
transform
|
||||
receiveShadow
|
||||
castShadow
|
||||
pointerEvents={
|
||||
currentView === View.ResumeView ? "auto" : "none"
|
||||
}
|
||||
occlude="blending"
|
||||
className="w-[800px] h-[1074px] bg-white"
|
||||
scale={15}
|
||||
position={[28.7765, 12.431875, 3.725]}
|
||||
rotation={[-Math.PI / 2, 0, (1 * Math.PI) / 9]}
|
||||
raycast={
|
||||
currentView === View.ResumeView
|
||||
? () => null
|
||||
: undefined
|
||||
}
|
||||
distanceFactor={1}
|
||||
>
|
||||
<PDF url="/config/resume.pdf" />
|
||||
</Html>
|
||||
</mesh>
|
||||
</group>
|
||||
<group
|
||||
position={[2.58559, 4.69855, 3.29056]}
|
||||
rotation={[-Math.PI, -0.43633, -Math.PI]}
|
||||
scale={0.02}
|
||||
>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.CellphoneMesh.geometry}
|
||||
material={materials.CellphoneMaterial}
|
||||
position={[-102.64982, -21.45192, 247.01788]}
|
||||
>
|
||||
<Html
|
||||
transform
|
||||
receiveShadow
|
||||
castShadow
|
||||
pointerEvents={
|
||||
currentView === View.CellphoneView ? "auto" : "none"
|
||||
}
|
||||
occlude="blending"
|
||||
className="w-[1008px] h-[1614px] bg-blue-100"
|
||||
position={[0, 2.85, 0]}
|
||||
rotation={[-Math.PI / 2, 0, Math.PI / 2]}
|
||||
raycast={
|
||||
currentView === View.CellphoneView
|
||||
? () => null
|
||||
: undefined
|
||||
}
|
||||
style={{
|
||||
backgroundImage: "url('/assets/cellphone-bg.webp')",
|
||||
backgroundColor: "black",
|
||||
}}
|
||||
distanceFactor={10}
|
||||
>
|
||||
<CellphoneUI />
|
||||
</Html>
|
||||
</mesh>
|
||||
</group>
|
||||
<Text
|
||||
position={[5.185, 10, 1.592]}
|
||||
font="/assets/inter.ttf"
|
||||
position={[-2.415, 12.5, -6]}
|
||||
font="/assets/inter-bold.ttf"
|
||||
color="black"
|
||||
fontSize={3}
|
||||
>
|
||||
{config.name[0]}
|
||||
</Text>
|
||||
<Text
|
||||
position={[5.185, 12.5, 1.592]}
|
||||
font="/assets/inter-bold.ttf"
|
||||
rotation={[0, -Math.PI / 2, 0]}
|
||||
color="black"
|
||||
fontSize={0.75}
|
||||
fontSize={3}
|
||||
>
|
||||
{config.status}
|
||||
{config.name[1]}
|
||||
</Text>
|
||||
)}
|
||||
{config.location && (
|
||||
<Text
|
||||
position={[5.185, 8.5, 1.592]}
|
||||
font="/assets/inter.ttf"
|
||||
rotation={[0, -Math.PI / 2, 0]}
|
||||
color="black"
|
||||
fontSize={0.75}
|
||||
>
|
||||
📍 {config.location}
|
||||
</Text>
|
||||
)}
|
||||
<StaticMeshes nodes={nodes} materials={materials} />
|
||||
{config.status && (
|
||||
<Text
|
||||
position={[5.185, 10, 1.592]}
|
||||
font="/assets/inter.ttf"
|
||||
rotation={[0, -Math.PI / 2, 0]}
|
||||
color="black"
|
||||
fontSize={0.75}
|
||||
>
|
||||
{config.status}
|
||||
</Text>
|
||||
)}
|
||||
{config.location && (
|
||||
<Text
|
||||
position={[5.185, 8.5, 1.592]}
|
||||
font="/assets/inter.ttf"
|
||||
rotation={[0, -Math.PI / 2, 0]}
|
||||
color="black"
|
||||
fontSize={0.75}
|
||||
>
|
||||
📍 {config.location}
|
||||
</Text>
|
||||
)}
|
||||
<StaticMeshes nodes={nodes} materials={materials} />
|
||||
</PerformanceMonitor>
|
||||
</group>
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
@@ -380,9 +370,9 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
|
||||
config.fallbackUrl ? "pt-12" : ""
|
||||
} flex flex-col space-y-6 w-screen h-screen text-center justify-center items-center text-white text-4xl`}
|
||||
>
|
||||
<p>Screen too small, please rotate</p>
|
||||
<p className="mx-8">Screen too small, please rotate</p>
|
||||
{config.fallbackUrl && (
|
||||
<p className="text-base">
|
||||
<p className="text-base mx-8">
|
||||
or visit the{" "}
|
||||
<a
|
||||
href={config.fallbackUrl}
|
||||
|
||||
@@ -15,7 +15,7 @@ export const Credits = ({ currentView }: CreditsProps) => {
|
||||
occlude="blending"
|
||||
className="w-[1452px] h-[810px] bg-neutral-400"
|
||||
scale={10}
|
||||
position={[0, 170, 0.25]}
|
||||
position={[0, 170, 0.5]}
|
||||
raycast={currentView === View.CreditsView ? () => null : undefined}
|
||||
distanceFactor={10}
|
||||
>
|
||||
|
||||
16
yarn.lock
16
yarn.lock
@@ -1021,6 +1021,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/lodash@npm:^4":
|
||||
version: 4.17.16
|
||||
resolution: "@types/lodash@npm:4.17.16"
|
||||
checksum: 10c0/cf017901b8ab1d7aabc86d5189d9288f4f99f19a75caf020c0e2c77b8d4cead4db0d0b842d009b029339f92399f49f34377dd7c2721053388f251778b4c23534
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/node@npm:^20":
|
||||
version: 20.17.30
|
||||
resolution: "@types/node@npm:20.17.30"
|
||||
@@ -3868,6 +3875,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lodash@npm:^4.17.21":
|
||||
version: 4.17.21
|
||||
resolution: "lodash@npm:4.17.21"
|
||||
checksum: 10c0/d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"loose-envify@npm:^1.0.0, loose-envify@npm:^1.4.0":
|
||||
version: 1.4.0
|
||||
resolution: "loose-envify@npm:1.4.0"
|
||||
@@ -4535,6 +4549,7 @@ __metadata:
|
||||
"@react-three/drei": "npm:^10.0.7"
|
||||
"@react-three/fiber": "npm:^9.1.2"
|
||||
"@tailwindcss/postcss": "npm:^4"
|
||||
"@types/lodash": "npm:^4"
|
||||
"@types/node": "npm:^20"
|
||||
"@types/react": "npm:^19"
|
||||
"@types/react-dom": "npm:^19"
|
||||
@@ -4544,6 +4559,7 @@ __metadata:
|
||||
awesome-ajv-errors: "npm:^5.1.0"
|
||||
eslint: "npm:^9"
|
||||
eslint-config-next: "npm:15.3.0"
|
||||
lodash: "npm:^4.17.21"
|
||||
next: "npm:15.3.0"
|
||||
react: "npm:^19.1.0"
|
||||
react-dom: "npm:^19.1.0"
|
||||
|
||||
Reference in New Issue
Block a user