3d shit

package.json

@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "@types/node": "^20.14.10",
-    "solid-js": "^1.8.17"
+    "@types/three": "^0.176.0",
+    "solid-js": "^1.8.17",
+    "three": "^0.176.0"
   },
   "devDependencies": {
     "typescript": "^5.2.2",

pnpm-lock.yaml

@@ -11,9 +11,15 @@ importers:
       '@types/node':
         specifier: ^20.14.10
         version: 20.14.10
+      '@types/three':
+        specifier: ^0.176.0
+        version: 0.176.0
       solid-js:
         specifier: ^1.8.17
         version: 1.8.17
+      three:
+        specifier: ^0.176.0
+        version: 0.176.0
     devDependencies:
       typescript:
         specifier: ^5.2.2
@@ -132,6 +138,9 @@ packages:
     resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==}
     engines: {node: '>=6.9.0'}
 
+  '@dimforge/rapier3d-compat@0.12.0':
+    resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==}
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -368,6 +377,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@tweenjs/tween.js@23.1.3':
+    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -386,6 +398,18 @@ packages:
   '@types/node@20.14.10':
     resolution: {integrity: sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==}
 
+  '@types/stats.js@0.17.4':
+    resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==}
+
+  '@types/three@0.176.0':
+    resolution: {integrity: sha512-FwfPXxCqOtP7EdYMagCFePNKoG1AGBDUEVKtluv2BTVRpSt7b+X27xNsirPCTCqY1pGYsPUzaM3jgWP7dXSxlw==}
+
+  '@types/webxr@0.5.22':
+    resolution: {integrity: sha512-Vr6Stjv5jPRqH690f5I5GLjVk8GSsoQSYJ2FVd/3jJF7KaqfwPi3ehfBS96mlQ2kPCwZaX6U0rG2+NGHBKkA/A==}
+
+  '@webgpu/types@0.1.60':
+    resolution: {integrity: sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==}
+
   ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
@@ -449,6 +473,9 @@ packages:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -493,6 +520,9 @@ packages:
     resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
     engines: {node: '>=12.13'}
 
+  meshoptimizer@0.18.1:
+    resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
+
   ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
@@ -546,6 +576,9 @@ packages:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
 
+  three@0.176.0:
+    resolution: {integrity: sha512-PWRKYWQo23ojf9oZSlRGH8K09q7nRSWx6LY/HF/UUrMdYgN9i1e2OwJYHoQjwc6HF/4lvvYLC5YC1X8UJL2ZpA==}
+
   to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -767,6 +800,8 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
+  '@dimforge/rapier3d-compat@0.12.0': {}
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -901,6 +936,8 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.18.0':
     optional: true
 
+  '@tweenjs/tween.js@23.1.3': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.24.7
@@ -928,6 +965,22 @@ snapshots:
     dependencies:
       undici-types: 5.26.5
 
+  '@types/stats.js@0.17.4': {}
+
+  '@types/three@0.176.0':
+    dependencies:
+      '@dimforge/rapier3d-compat': 0.12.0
+      '@tweenjs/tween.js': 23.1.3
+      '@types/stats.js': 0.17.4
+      '@types/webxr': 0.5.22
+      '@webgpu/types': 0.1.60
+      fflate: 0.8.2
+      meshoptimizer: 0.18.1
+
+  '@types/webxr@0.5.22': {}
+
+  '@webgpu/types@0.1.60': {}
+
   ansi-styles@3.2.1:
     dependencies:
       color-convert: 1.9.3
@@ -1007,6 +1060,8 @@ snapshots:
 
   escape-string-regexp@1.0.5: {}
 
+  fflate@0.8.2: {}
+
   fsevents@2.3.3:
     optional: true
 
@@ -1034,6 +1089,8 @@ snapshots:
     dependencies:
       is-what: 4.1.16
 
+  meshoptimizer@0.18.1: {}
+
   ms@2.1.2: {}
 
   nanoid@3.3.7: {}
@@ -1099,6 +1156,8 @@ snapshots:
     dependencies:
       has-flag: 3.0.0
 
+  three@0.176.0: {}
+
   to-fast-properties@2.0.0: {}
 
   typescript@5.5.2: {}

src/App.tsx

@@ -1,3 +1,4 @@
+// src/App.tsx
 import "./App.css";
 import {AdvancedBr, Singular88, SingularOomfie} from "./components/comps.tsx";
 import {createSignal, onMount} from "solid-js";

src/components/pfp.tsx

@@ -1,5 +1,7 @@
 import HoverComponent from "./name";
 import "./pfp.css";
+import {RotatingCubeButton} from "./rotatingCubeButton.tsx";
+import {createSignal} from "solid-js";
 
 export function Bdpfp({
   setpopupEasterEgg,
@@ -29,41 +31,38 @@ export function Bdpfp({
 
 export function Normalpfp({
                               setpopupEasterEgg,
-}: {
+                          }: {
     setpopupEasterEgg: (value: boolean) => void;
 }) {
+    // State to control whether the cube or the image is displayed
+    const [showCube, setShowCube] = createSignal(false);
+
     return (
         <div
             onContextMenu={(e) => {
                 e.preventDefault();
                 setpopupEasterEgg(true);
             }}
+            // On click, toggle the showCube state
+            onClick={() => setShowCube(true)}
             class="birthdayparent header normal"
+            style={{ cursor: 'pointer', display: 'flex', "justify-content": 'center', "align-items": 'center' }} // Added styles for centering content
         >
+            {showCube() ? (
+                // If showCube is true, render the RotatingCubeButton
+                // The onClick for the cube itself can be an empty function or trigger something else
+                <RotatingCubeButton onClick={() => console.log("Cube pfp clicked!")} />
+            ) : (
+                // Otherwise, render the original image and HoverComponent
+                <>
                     <img
                         class="initialanim"
                         src="https://dp.nea.moe/avatar/603229858612510720.png"
                         alt="amy's current discord pfp"
-        onMouseEnter={(e) => {
-          (e.target as HTMLImageElement).animate(
-            [{ transform: "rotateZ(0deg)" }, { transform: "rotateZ(360deg)" }],
-            {
-              duration: 400,
-              iterations: 1,
-            },
-          );
-        }}
-        onClick={(e) => {
-          (e.target as HTMLImageElement).animate(
-            [{ transform: "rotateY(0deg)" }, { transform: "rotateY(360deg)" }],
-            {
-              duration: 150,
-              iterations: 1,
-            },
-          );
-        }}
                     />
                     <HoverComponent />
+                </>
+            )}
         </div>
     );
 }

src/components/rotatingCubeButton.tsx

@@ -0,0 +1,90 @@
+// src/components/RotatingCubeButton.tsx
+import { onCleanup, onMount } from 'solid-js';
+import * as THREE from 'three';
+
+interface RotatingCubeButtonProps {
+    onClick: () => void;
+}
+
+export const RotatingCubeButton = (props: RotatingCubeButtonProps) => {
+    let mountRef: HTMLDivElement | undefined;
+    let renderer: THREE.WebGLRenderer;
+    let scene: THREE.Scene;
+    let camera: THREE.PerspectiveCamera;
+    let cube: THREE.Mesh;
+    let animationFrameId: number;
+
+
+    onMount(() => {
+        if (mountRef) {
+
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
+            camera.position.z = 2;
+
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            renderer.setSize(mountRef.clientWidth, mountRef.clientHeight);
+            mountRef.appendChild(renderer.domElement);
+
+            const textureLoader = new THREE.TextureLoader();
+            const texture = textureLoader.load(
+                'https://dp.nea.moe/avatar/603229858612510720.png',
+                undefined,
+                () => {
+                    cube.material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+                }
+            );
+
+            const geometry = new THREE.BoxGeometry(1, 1, 1);
+            const material = new THREE.MeshBasicMaterial({ map: texture });
+
+            cube = new THREE.Mesh(geometry, material);
+            scene.add(cube);
+
+            const animate = () => {
+                animationFrameId = requestAnimationFrame(animate);
+                cube.rotation.x += 0.01;
+                cube.rotation.y += 0.01;
+                renderer.render(scene, camera);
+            };
+            animate();
+            const handleResize = () => {
+                if (mountRef) {
+                    camera.aspect = mountRef.clientWidth / mountRef.clientHeight;
+                    camera.updateProjectionMatrix();
+                    renderer.setSize(mountRef.clientWidth, mountRef.clientHeight);
+                }
+            };
+            window.addEventListener('resize', handleResize);
+
+            onCleanup(() => {
+                window.removeEventListener('resize', handleResize);
+                cancelAnimationFrame(animationFrameId);
+                if (mountRef && renderer.domElement) {
+                    mountRef.removeChild(renderer.domElement);
+                }
+                geometry.dispose();
+                material.dispose();
+                texture.dispose();
+                renderer.dispose();
+            });
+        }
+    });
+
+    return (
+        <div
+            ref={mountRef}
+            onClick={props.onClick}
+            style={{
+                width: '20em',
+                height: '20em',
+                display: 'flex',
+                "justify-content": 'center',
+                "align-items": 'center',
+                overflow: 'hidden',
+            }}
+        >
+
+        </div>
+    );
+};