Home Explore Help
Register Sign In
zhangyupeng
/
getty-show
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix: save

gemercheung 1 year ago
parent
858aa4016b
commit
e674d33fc6
10 changed files with 222 additions and 11 deletions
Split View Show Diff Stats
  1. 56 2
      index.html
  2. 1 0
      package.json
  3. 7 0
      pnpm-lock.yaml
  4. 33 3
      src/App.jsx
  5. 1 0
      src/assets/infinite-spinner.svg
  6. 54 0
      src/components/Loading.jsx
  7. 19 4
      src/components/Opening.jsx
  8. 14 0
      src/loading.css
  9. 1 0
      src/main.jsx
  10. 36 2
      src/view/Section4.jsx

+ 56 - 2
index.html
View File 

@@ -5,11 +5,65 @@
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <script src="https://4dkk.4dage.com/v4-test/www/viewer/static/lib/vconsole.js"></script>
 
-    <link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css" />
 
     <title>Getty Show</title>
 
+    <style>
 
+      body {
 
+        background-color: #000;
 
+        overflow: hidden;
 
+      }
 
+      .load-wrap {
 
+        display: flex;
 
+        flex-direction: column;
 
+        height: 100vh;
 
+        justify-content: center;
 
+        align-items: center;
 
+      }
 
+      .load-wrap img {
 
+        width: 80px;
 
+        height: auto;
 
+      }
 
+      .load-wrap div:nth-child(3) {
 
+        align-items: flex-start;
 
+      }
 
+      .page-loader {
 
+        margin-top: 20px;
 
+        color: #fff;
 
+        line-height: 1.4;
 
+        font-size: 1rem;
 
+        font-weight: 600;
 
+        font-family: sans-serif;
 
+      }
 
+    </style>
 
   </head>
 
   <body>
 
-    <div id="root"></div>
 
+    <div id="root">
 
+      <div class="load-wrap">
 
+        <div>
 
+          <img src="/src/assets/infinite-spinner.svg" />
 
+        </div>
 
+        <div>
 
+          <div id="page-process" class="page-process">0%</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
     <script type="module" src="/src/main.jsx"></script>
 
+    <script>
 
+      let loadProgress = 0;
 
+      const pageLoader = document.querySelector("#page-process"),
 
+        loadAnimation = setInterval(() => {
 
+          if (
 
+            (loadProgress++,
 
+            (pageLoader.innerText = loadProgress + "%"),
 
+            72 === loadProgress)
 
+          ) {
 
+            clearInterval(loadAnimation);
 
+            const e = setInterval(() => {
 
+              loadProgress++,
 
+                (pageLoader.innerText = loadProgress + "%"),
 
+                83 === loadProgress && clearInterval(e);
 
+            }, 86);
 
+          }
 
+        }, 32);
 
+    </script>
 
   </body>
 
 </html>

+ 1 - 0
package.json
View File 

@@ -29,6 +29,7 @@
 
     "eslint-plugin-react": "^7.34.0",
 
     "eslint-plugin-react-hooks": "^4.6.0",
 
     "eslint-plugin-react-refresh": "^0.4.5",
 
+    "stats.js": "^0.17.0",
 
     "vite": "^5.1.6",
 
     "vite-plugin-javascript-obfuscator": "^3.1.0"
 
   },

+ 7 - 0
pnpm-lock.yaml
View File 

@@ -58,6 +58,9 @@ devDependencies:
 
   eslint-plugin-react-refresh:
 
     specifier: ^0.4.5
 
     version: 0.4.6(eslint@8.57.0)
 
+  stats.js:
 
+    specifier: ^0.17.0
 
+    version: 0.17.0
 
   vite:
 
     specifier: ^5.1.6
 
     version: 5.1.6
 
@@ -3333,6 +3336,10 @@ packages:
 
       extend-shallow: 3.0.2
 
     dev: false
 
 
+  /stats.js@0.17.0:
 
+    resolution: {integrity: sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==}
 
+    dev: true
 
+
 
   /string-template@1.0.0:
 
     resolution: {integrity: sha512-SLqR3GBUXuoPP5MmYtD7ompvXiG87QjT6lzOszyXjTM86Uu7At7vNnt2xgyTLq5o9T4IxTYFyGxcULqpsmsfdg==}
 
     dev: true

+ 33 - 3
src/App.jsx
View File 

@@ -27,6 +27,7 @@ import Trans from "./view/Trans";
 
 import Closing from "./view/Closing";
 
 
 import { useControls } from "leva";
 
+import Stats from "stats.js";
 
 
 gsap.registerPlugin(ScrollTrigger);
 
 
@@ -40,8 +41,9 @@ let resizeTimer = null;
 
 const defaultDebug = localStorage.getItem("debug") === "true" ? true : false;
 
 function App() {
 
   const container = useRef();
 
-  const { debug } = useControls({
 
+  const { debug, stats } = useControls({
 
     debug: defaultDebug,
 
+    stats: false,
 
   });
 
   const handlerResize = () => {
 
     clearTimeout(resizeTimer);
 
@@ -71,12 +73,37 @@ function App() {
 
       ScrollTrigger.getAll().forEach((ST) => ST.refresh(true));
 
     }, 100);
 
   };
 
+  if (document.querySelector("#page-process")) {
 
+    document.querySelector("#page-process").innerHTML = "100%";
 
+  }
 
+  document.body.style.overflow = "auto";
 
+  let timer = null;
 
+  function showStats() {
 
+    const statsInstance = new Stats();
 
+    statsInstance.dom.className = "stats";
 
+
 
+    function animate() {
 
+      statsInstance.begin();
 
+      // monitored code goes here
 
+      statsInstance.end();
 
+      requestAnimationFrame(animate);
 
+    }
 
+    statsInstance.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
 
+    document.body.appendChild(statsInstance.dom);
 
+    animate();
 
+  }
 
+
 
+  function hideStats() {
 
+    const eles = document.querySelector(".stats");
 
+    eles && document.body.removeChild(eles);
 
+  }
 
   useEffect(() => {
 
     window.addEventListener("resize", handlerResize, false);
 
     handlerResize();
 
     document.documentElement.style.overflow = "auto";
 
     var vConsole = new window.VConsole();
 
     localStorage.setItem("debug", debug);
 
+    localStorage.setItem("stats", stats);
 
     if (debug) {
 
       vConsole.showSwitch();
 
       if (!defaultDebug) {
 
@@ -88,16 +115,19 @@ function App() {
 
       }
 
       vConsole.hideSwitch();
 
     }
 
+    if (stats) {
 
+      showStats();
 
+    } else {
 
+      hideStats();
 
+    }
 
   });
 
   const props = {
 
-    // scrollSpeed: scrollSpeed,
 
     debug: debug,
 
   };
 
 
   return (
 
     <div ref={container}>
 
       <Opening></Opening>
 
-
 
       <Section1 {...props} />
 
       <Section2 {...props} />
 
       <Section3 {...props} />

+ 1 - 0
src/assets/infinite-spinner.svg
View File 

@@ -0,0 +1 @@
 
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 150'><path fill='none' stroke='#FFFFFF' stroke-width='15' stroke-linecap='round' stroke-dasharray='300 385' stroke-dashoffset='0' d='M275 75c0 31-27 50-50 50-58 0-92-100-150-100-28 0-50 22-50 50s23 50 50 50c58 0 92-100 150-100 24 0 50 19 50 50Z'><animate attributeName='stroke-dashoffset' calcMode='spline' dur='2' values='685;-685' keySplines='0 0 1 1' repeatCount='indefinite'></animate></path></svg>

+ 54 - 0
src/components/Loading.jsx
View File 

@@ -0,0 +1,54 @@
 
+import { useEffect } from "react";

+import spinner from "../assets/infinite-spinner.svg";

+import { css } from "@emotion/react";

+export default function Loading() {

+  useEffect(() => {

+    let loadProgress = 0;

+    const pageLoader = document.querySelector("#page-process"),

+      loadAnimation = setInterval(() => {

+        if (

+          (loadProgress++,

+          (pageLoader.innerText = loadProgress + "%"),

+          72 === loadProgress)

+        ) {

+          clearInterval(loadAnimation);

+          const e = setInterval(() => {

+            loadProgress++,

+              (pageLoader.innerText = loadProgress + "%"),

+              83 === loadProgress && clearInterval(e);

+          }, 86);

+        }

+      }, 32);

+  });

+  return (

+    <div

+      className="page-loader"

+      css={css`

+        position: fixed;

+        z-index: 1000;

+        width: 100%;

+        height: 100%;

+        top: 0;

+        left: 0;

+        display: flex;

+        flex-direction: column;

+        background: #000;

+        overflow: hidden;

+        justify-content: center;

+        align-items: center;

+      `}

+    >

+      <div>

+        <img

+          css={css`

+            width: 80px;

+          `}

+          src={spinner}

+        />

+      </div>

+      <div id="page-process" className="page-process">

+        1%

+      </div>

+    </div>

+  );

+}

+ 19 - 4
src/components/Opening.jsx
View File 

@@ -89,6 +89,9 @@ export default function Opening() {
 
           font-size: 10vw;

           line-height: 1.75;

           font-weight: 300;

+          @media (max-device-width: 416px), only screen and (max-width: 767px) {

+            font-size: 9vw;

+          }

         `}

       >

         <span>美索不达米亚</span>

@@ -97,10 +100,13 @@ export default function Opening() {
 
       <div

         ref={DescRef}

         css={css`

-          font-size: 1.75vw

+          font-size: 1.75vw;

           font-weight: 300;

           text-transform: uppercase;

-      `}

+          @media (max-device-width: 416px), only screen and (max-width: 767px) {

+            font-size: 2.5vw;

+          }

+        `}

       >

         <span>近距离观看盖蒂别墅博物馆展览</span>

         <br />

@@ -109,15 +115,24 @@ export default function Opening() {
 
       <div

         ref={ScrollRef}

         css={css`

-          font-size: 2.5vw;

+          font-size: 16px;

           flex-shrink: 0;

           margin-top: auto;

           margin-bottom: 20px;

+          @media (max-device-width: 416px), only screen and (max-width: 767px) {

+            font-size: 2.5vw;

+          }

         `}

       >

         <span>请滚动</span>

         <br />

-        <img ref={ImageRef} src={scrollArrow} />

+        <img

+          css={css`

+            filter: drop-shadow(0 0 4px rgb(255, 255, 255));

+          `}

+          ref={ImageRef}

+          src={scrollArrow}

+        />

       </div>

     </div>

   );

+ 14 - 0
src/loading.css
View File 

@@ -0,0 +1,14 @@
 
+.loader {

+  position: fixed;

+  z-index: 1000;

+  width: 100%;

+  height: 100%;

+  top: 0;

+  left: 0;

+  display: flex;

+  flex-direction: column;

+  background: #000;

+  overflow: hidden;

+  justify-content: center;

+  align-items: center;

+}

+ 1 - 0
src/main.jsx
View File 

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 
 import App from "./App.jsx";
 
 import "./index.css";
 
 import "./heti.css";
 
+
 
 ReactDOM.createRoot(document.getElementById("root")).render(
 
   // <React.StrictMode>
 
     <App />

+ 36 - 2
src/view/Section4.jsx
View File 

@@ -19,12 +19,46 @@ export default function Section4(props) {
 
     >

       <TimeLineLabelText

         fade={0.01}

-        verticalOffset={"83vh"}

+        verticalOffset={"13vh"}

         duration={0.3}

         progressPosition={0.05}

       >

         <div>

-          测试文案： 四维时代致力于人工智能三维数字化技术的.

+          测试文案：Section4-1 四维时代致力于人工智能三维数字化技术的.

+          研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

+        </div>

+      </TimeLineLabelText>

+      <TimeLineLabelText

+        fade={0.01}

+        verticalOffset={"33vh"}

+        duration={0.3}

+        progressPosition={0.35}

+      >

+        <div>

+          测试文案：Section4-2 四维时代致力于人工智能三维数字化技术的.

+          研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

+        </div>

+      </TimeLineLabelText>

+

+      <TimeLineLabelText

+        fade={0.01}

+        verticalOffset={"53vh"}

+        duration={0.3}

+        progressPosition={0.55}

+      >

+        <div>

+          测试文案：Section4-3 四维时代致力于人工智能三维数字化技术的.

+          研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

+        </div>

+      </TimeLineLabelText>

+      <TimeLineLabelText

+        fade={0.01}

+        verticalOffset={"73vh"}

+        duration={0.3}

+        progressPosition={0.85}

+      >

+        <div>

+          测试文案：Section4-4 四维时代致力于人工智能三维数字化技术的.

           研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

         </div>

       </TimeLineLabelText>