Add animations for plant and description

Author: dukeofhazardz

package-lock.json

@@ -14,7 +14,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/three": "^0.139.0",
-    "@types/webgi": "https://storage.googleapis.com/dist.pixotronics.com/webgi/runtime/bundle-types-0.5.5.tgz",
+    "@types/webgi": "https://storage.googleapis.com/dist.pixotronics.com/webgi/runtime/bundle-types-0.9.0.tgz",
     "axios": "^1.7.2",
     "gsap": "^3.11.4",
     "postcss-flexbugs-fixes": "^5.0.2",
@@ -23,16 +23,16 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "web-vitals": "^2.1.4",
-    "webgi": "https://storage.googleapis.com/dist.pixotronics.com/webgi/runtime/bundle-0.5.8.tgz"
+    "webgi": "https://storage.googleapis.com/dist.pixotronics.com/webgi/runtime/bundle-0.9.0.tgz"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/three": "^0.139.0",
-    "@types/webgi": "https://storage.googleapis.com/dist.pixotronics.com/webgi/runtime/bundle-types-0.5.5.tgz",
+    "@types/webgi": "https://storage.googleapis.com/dist.pixotronics.com/webgi/runtime/bundle-types-0.9.0.tgz",
     "@vitejs/plugin-react": "^3.1.0",
     "cross-env": "^7.0.3",
     "vite": "^4.1.0",
-    "webgi": "https://storage.googleapis.com/dist.pixotronics.com/webgi/runtime/bundle-0.5.5.tgz"
+    "webgi": "https://storage.googleapis.com/dist.pixotronics.com/webgi/runtime/bundle-0.9.0.tgz"
   }
 }

package.json

@@ -7,6 +7,7 @@ import Footer from "./components/Footer";
 import FirstPlant from "./components/Plant";
 import SecondPlant from "./components/Plant2";
 import ThirdPlant from "./components/Plant3";
+import WebgiViewer from "./components/WebgiViewer";
 
 function App() {
 
@@ -21,6 +22,7 @@ function App() {
       <ThirdPlant />
       <About />
       <Footer />
+      <WebgiViewer />
     </div>
   );
 }

public/scene-black.glb

@@ -0,0 +1,100 @@
+import React, {
+  useRef,
+  useState,
+  useCallback,
+  forwardRef,
+  useImperativeHandle,
+  useEffect,
+} from "react";
+import {
+  ViewerApp,
+  AssetManagerPlugin,
+  GBufferPlugin,
+  ProgressivePlugin,
+  TonemapPlugin,
+  SSRPlugin,
+  SSAOPlugin,
+  GLTFAnimationPlugin,
+  BloomPlugin,
+  GammaCorrectionPlugin,
+  mobileAndTabletCheck,
+} from "webgi";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/src/ScrollTrigger";
+import { scrollAnimation } from "../lib/scroll-animation";
+
+gsap.registerPlugin(ScrollTrigger);
+
+const WebgiViewer = () => {
+  const canvasRef = useRef(null);
+
+  const memoizedScrollAnimation = useCallback(
+    (position, target, onUpdate) => {
+      if (position && target && onUpdate) {
+        scrollAnimation(position, target, onUpdate);
+      }
+    }, []
+  )
+
+  const setupViewer = useCallback(async () => {
+    const viewer = new ViewerApp({
+      canvas: canvasRef.current,
+    });
+
+    const assetManager = await viewer.addPlugin(AssetManagerPlugin);
+
+    const camera = viewer.scene.activeCamera;
+    const position = camera.position;
+    const target = camera.target;
+
+    await viewer.addPlugin(GBufferPlugin);
+    await viewer.addPlugin(new ProgressivePlugin(32));
+    await viewer.addPlugin(new TonemapPlugin(true));
+    await viewer.addPlugin(GammaCorrectionPlugin);
+    await viewer.addPlugin(SSRPlugin);
+    await viewer.addPlugin(SSAOPlugin);
+    await viewer.addPlugin(GLTFAnimationPlugin)
+    await viewer.addPlugin(BloomPlugin);
+
+    viewer.renderer.refreshPipeline();
+
+    await assetManager.addFromPath("scene.glb");
+
+    const gltfAnims = viewer.getPlugin(GLTFAnimationPlugin);
+
+    const resetOnEnd = true
+    await gltfAnims.playClip('Take 001', resetOnEnd)
+
+    viewer.getPlugin(TonemapPlugin).config.clipBackground = true;
+
+    viewer.scene.activeCamera.setCameraOptions({ controlsEnabled: false });
+
+    window.scrollTo(0, 0);
+
+    let needsUpdate = true;
+    const onUpdate = () => {
+      needsUpdate = true;
+      viewer.setDirty();
+    }
+
+    viewer.addEventListener("preFrame", () => {
+      if (needsUpdate) {
+        camera.positionTargetUpdated(true);
+        needsUpdate = false;
+      }
+    });
+    memoizedScrollAnimation(position, target, onUpdate)
+  }, []);
+
+  useEffect(() => {
+    setupViewer();
+  }, []);
+
+  return (
+    <div id="webgi-canvas-container">
+      <canvas id="webgi-canvas" ref={canvasRef} />
+    </div>
+  );
+};
+
+export default WebgiViewer;

public/scene-second.glb

@@ -259,7 +259,7 @@ nav .link-styled {
   display: flex;
   align-items: center;
   flex-direction: column;
-  z-index: 1;
+  z-index: 0;
   position: relative;
 }
 
@@ -570,7 +570,7 @@ nav .link-styled {
   background-color: #fbfbfd;
   height: auto;
   position: relative;
-  z-index: 1;
+  z-index: 0;
   margin-top: -70px;
   /*opacity: 0;*/
 }

public/scene.glb

@@ -0,0 +1,57 @@
+import gsap from "gsap";
+
+export const scrollAnimation = (position, target, onUpdate) => {
+    const tl = gsap.timeline();
+
+    tl.to(position, {
+        x: 8.2617479743,
+        y: 0.0262229300,
+        z: 4.8205182659,
+        scrollTrigger: {
+            trigger: '.first-plant',
+            start: 'top 75%',
+            end: 'top top',
+            scrub: 2,
+            immediateRender: false
+        },
+        onUpdate
+    })
+    .to(target, {
+        x: 3.50,
+        y: 0.00,
+        z: 0.00,
+        scrollTrigger: {
+            trigger: '.first-plant',
+            start: 'top 75%',
+            end: 'top top',
+            scrub: 2,
+            immediateRender: false
+        },
+    })
+    .to(position, {
+        x: -1.8849842312,
+        y: -8.957473565,
+        z: 0.4051478909,
+        scrollTrigger: {
+            trigger: '.description-section',
+            start: 'top 75%',
+            end: 'top top',
+            scrub: 2,
+            immediateRender: false
+        },
+        onUpdate
+    })
+    .to(target, {
+        x: -1.90,
+        y: 0.36,
+        z: 0.00,
+        scrollTrigger: {
+            trigger: '.description-section',
+            start: 'top 75%',
+            end: 'top top',
+            scrub: 2,
+            immediateRender: false
+        },
+    })
+    
+}