IPK-65 Changed 3d technology completely

.gitignore

@@ -32,4 +32,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-bun.lockb
+/bun.lockb
+bun.lockb

package.json

@@ -9,11 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@react-three/drei": "^9.92.5",
+    "@react-three/drei": "^9.92.6",
+    "@react-three/fiber": "^8.15.12",
     "@reduxjs/toolkit": "^2.0.1",
     "@splinetool/r3f-spline": "^1.0.2",
     "@splinetool/react-spline": "^2.2.6",
-    "@splinetool/runtime": "^1.0.4",
+    "@splinetool/runtime": "^1.0.16",
+    "@tweenjs/tween.js": "^21.0.0",
     "framer-motion": "^10.16.16",
     "jsonwebtoken": "^9.0.2",
     "locomotive-scroll": "^5.0.0-beta.11",
@@ -34,12 +36,12 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.4.16",
-    "daisyui": "^4.4.22",
+    "daisyui": "^4.4.23",
     "eslint": "^8",
     "eslint-config-next": "14.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.0",
+    "eslint-plugin-prettier": "^5.1.1",
     "postcss": "^8",
     "prettier": "^3.1.1",
     "tailwindcss": "^3.4.0",

src/app/3dtest/page.tsx

@@ -0,0 +1,8 @@
+import Scene from "@/components/3d/Scene";
+import React from "react";
+
+function page() {
+  return <Scene />;
+}
+
+export default page;

src/assets/globals.scss

@@ -26,6 +26,10 @@ section {
   max-width: 100%;
 }
 
+canvas {
+  min-height: 100vh;
+}
+
 .landingGradient {
   width: 70vh;
   height: 70vh;

src/components/3d/Scene.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { Canvas } from "@react-three/fiber";
+import Sphere from "./Sphere";
+
+function Scene() {
+  return (
+    <Canvas>
+      <directionalLight color={0xffffff} intensity={2} position={[100, 100, 200]} />
+      <ambientLight color={0xffffff} intensity={1.2} />
+      <Sphere />
+    </Canvas>
+  );
+}
+
+export default Scene;

src/components/3d/Sphere.tsx

@@ -0,0 +1,90 @@
+import { shaderMaterial } from "@react-three/drei";
+import { extend, useFrame, useThree } from "@react-three/fiber";
+import React, { useEffect } from "react";
+import * as THREE from "three";
+import { fragmentShader } from "./fragmentShader";
+import { vertexShader } from "./vertexShader";
+import TWEEN from "@tweenjs/tween.js";
+
+function Sphere() {
+  const meshRef = React.useRef<THREE.Mesh>();
+  const start = React.useRef(Date.now());
+  const uniforms = React.useRef(
+    THREE.UniformsUtils.merge([THREE.UniformsLib["lights"], THREE.ShaderLib.phong.uniforms, { time: { value: 0 } }])
+  );
+  const { camera, size } = useThree();
+  camera.position.setZ(42);
+  camera.position.setX(40);
+  camera.position.setY(25);
+
+  useFrame(() => {
+    const elapsed = Date.now() - start.current;
+    uniforms.current.time.value = 0.00005 * elapsed;
+    meshRef.current.rotation.z += 0.001;
+    TWEEN.update();
+  });
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      const windowWidth = window.innerWidth;
+      camera.updateProjectionMatrix();
+
+      if (windowWidth <= 696) {
+        meshRef.current?.position.set(14, 10, 0);
+      } else if (windowWidth <= 1024) {
+        meshRef.current?.position.set(18, 14, 0);
+      } else {
+        meshRef.current?.position.set(22, 16, 0);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize();
+
+    return () => {
+      TWEEN.removeAll();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [camera, size]);
+
+  useEffect(() => {
+    const onCanvasMouseMove = (event: MouseEvent) => {
+      const position = {
+        x: event.clientX / size.width,
+        y: event.clientY / size.height
+      };
+
+      const targetRotation = {
+        x: position.y / 2,
+        y: position.x / 2
+      };
+
+      // Tween update for smooth transition
+      if (meshRef.current) {
+        TWEEN.removeAll();
+        new TWEEN.Tween(meshRef.current.rotation)
+          .to({ x: targetRotation.x, y: targetRotation.y }, 2000)
+          .easing(TWEEN.Easing.Quartic.Out)
+          .start();
+      }
+    };
+
+    window.addEventListener("mousemove", onCanvasMouseMove);
+
+    return () => {
+      window.removeEventListener("mousemove", onCanvasMouseMove);
+    };
+  }, [size]);
+
+  const CustomShaderMaterial = shaderMaterial(uniforms.current, vertexShader, fragmentShader);
+
+  extend({ CustomShaderMaterial });
+  return (
+    <mesh visible ref={meshRef} userData={{ test: "hello" }} position={[0, 0, 0]}>
+      <sphereGeometry args={[32, 128, 128]} />
+      <customShaderMaterial uniforms={uniforms.current} lights={true} />
+    </mesh>
+  );
+}
+
+export default Sphere;

src/components/3d/fragmentShader.js

@@ -0,0 +1,73 @@
+export const fragmentShader = `
+#define PHONG
+
+uniform vec3 diffuse;
+uniform vec3 emissive;
+uniform vec3 specular;
+uniform float shininess;
+uniform float opacity;
+uniform float time;
+varying vec2 vUv;
+varying vec3 newPosition;
+varying float noise;
+varying vec3 vNormal;
+
+#include <common>
+#include <packing>
+#include <color_pars_fragment>
+#include <uv_pars_fragment>
+#include <map_pars_fragment>
+#include <alphamap_pars_fragment>
+#include <aomap_pars_fragment>
+#include <lightmap_pars_fragment>
+#include <emissivemap_pars_fragment>
+#include <envmap_pars_fragment>
+#include <gradientmap_pars_fragment>
+#include <fog_pars_fragment>
+#include <bsdfs>
+#include <lights_pars_begin>
+#include <envmap_physical_pars_fragment>
+#include <lights_phong_pars_fragment>
+#include <shadowmap_pars_fragment>
+#include <bumpmap_pars_fragment>
+#include <normalmap_pars_fragment>
+#include <specularmap_pars_fragment>
+#include <logdepthbuf_pars_fragment>
+#include <clipping_planes_pars_fragment>
+
+void main() {
+  #include <clipping_planes_fragment>
+
+  vec3 color = vec3(vUv * (0.3 - 2.0 * noise), 1);
+  vec3 targetColor = vec3(69.0/255.0, 134.0/255.0, 230.0/255.0);
+  vec4 diffuseColor = vec4(targetColor, 1.0); // Use targetColor for the RGB components
+  vec3 finalColors = vec3(color.b * 2.0, color.r, color.r);
+  ReflectedLight reflectedLight = ReflectedLight(vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0));
+  vec3 totalEmissiveRadiance = emissive;
+
+  #include <logdepthbuf_fragment>
+  #include <map_fragment>
+  #include <color_fragment>
+  #include <alphamap_fragment>
+  #include <alphatest_fragment>
+  #include <specularmap_fragment>
+  #include <normal_fragment_begin>
+  #include <normal_fragment_maps>
+  #include <emissivemap_fragment>
+  #include <lights_phong_fragment>
+  #include <lights_fragment_begin>
+  #include <lights_fragment_maps>
+  #include <lights_fragment_end>
+  #include <aomap_fragment>
+
+  vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;
+
+  #include <envmap_fragment>
+  #include <premultiplied_alpha_fragment>
+  #include <tonemapping_fragment>
+  #include <encodings_fragment>
+  #include <fog_fragment>
+
+  gl_FragColor = vec4(outgoingLight, diffuseColor.a);
+}
+`;