diff --git a/src/articles/ArticlesList.tsx b/src/articles/ArticlesList.tsx index d4a1136..8010d84 100644 --- a/src/articles/ArticlesList.tsx +++ b/src/articles/ArticlesList.tsx @@ -4,9 +4,9 @@ import {Article, ARTICLES} from "./articles"; import {motion} from "motion/react"; import {AnimateFade} from "../animations"; import {Canvas} from "@react-three/fiber"; -import {Environment, Html, OrbitControls} from "@react-three/drei"; -import MilkyWay from "../img/2k_stars_milky_way.jpg"; +import {Html, OrbitControls} from "@react-three/drei"; import {Sun} from "../index/Canvas"; +import {Skybox} from "../index/Skybox"; import {Bloom, EffectComposer, Vignette} from "@react-three/postprocessing"; import {useEffect, useState} from "react"; import {Reader} from "./Reader"; @@ -43,7 +43,7 @@ export default function ArticlesList() { return - + diff --git a/src/articles/list.sass b/src/articles/list.sass index a4efbc8..b487cf2 100644 --- a/src/articles/list.sass +++ b/src/articles/list.sass @@ -55,7 +55,7 @@ canvas .art-ctr display: flex flex-direction: row - min-height: 100vh + flex-grow: 1 ul display: flex @@ -74,4 +74,4 @@ canvas &>div background: #282c34 color: white - padding: 0 \ No newline at end of file + padding: 0 diff --git a/src/index/Canvas.tsx b/src/index/Canvas.tsx index c0439a3..52ff5b7 100644 --- a/src/index/Canvas.tsx +++ b/src/index/Canvas.tsx @@ -2,18 +2,18 @@ import "./canvas.sass"; import {motion} from "framer-motion"; import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber"; import {Moon} from "./Moon"; -import {Environment, Html, OrbitControls, Preload, useTexture} from "@react-three/drei"; +import {Html, OrbitControls, Preload, useTexture} from "@react-three/drei"; import Jupiter from "../img/2k_jupiter.webp"; import Makemake from "../img/2k_makemake_fictional.webp"; import Ceres from "../img/2k_ceres_fictional.webp"; import Haumea from "../img/2k_haumea_fictional.webp"; -import MilkyWay from "../img/2k_stars_milky_way.jpg"; import SaturnRings from "../img/12k_jupiter_rings.webp"; import {useRef} from "react"; import type {Mesh} from "three"; import {Bloom, EffectComposer, Vignette} from "@react-three/postprocessing"; +import {Skybox} from "./Skybox"; -useTexture.preload([Jupiter, Makemake, Ceres, Haumea, MilkyWay, SaturnRings]); +useTexture.preload([Jupiter, Makemake, Ceres, Haumea, SaturnRings]); export default function Canvas() { // fade animation sync with loading @@ -26,7 +26,7 @@ export default function Canvas() { - + @@ -83,4 +83,4 @@ function Planet() { -} \ No newline at end of file +} diff --git a/src/index/Skybox.tsx b/src/index/Skybox.tsx new file mode 100644 index 0000000..c965101 --- /dev/null +++ b/src/index/Skybox.tsx @@ -0,0 +1,18 @@ +import {useEnvironment, Environment, useTexture} from "@react-three/drei"; +import {useEffect} from "react"; +import MilkyWay from "../img/2k_stars_milky_way.jpg"; + +useTexture.preload(MilkyWay); + +// fixes skybox missing during page redirects by clearing cache +export function Skybox() { + const envTexture = useEnvironment({ files: MilkyWay }); + + // 2. Force the GPU to re-upload the cached Javascript object + useEffect(() => { + return () => useEnvironment.clear({files: MilkyWay}); + }, [envTexture]); + + return +} +