add the potato

package-lock.json

@@ -7,6 +7,9 @@
 		"": {
 			"name": "alex-website",
 			"version": "0.0.1",
+			"dependencies": {
+				"three": "^0.142.0"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "next",
 				"@sveltejs/kit": "next",
@@ -22,6 +25,7 @@
 				"svelte": "^3.44.0",
 				"svelte-check": "^2.7.1",
 				"svelte-preprocess": "^4.10.7",
+				"svelthree": "^0.119.0-5",
 				"tailwindcss": "^3.1.4",
 				"tslib": "^2.3.1",
 				"typescript": "^4.7.2"
@@ -3235,6 +3239,21 @@
 				"sourcemap-codec": "^1.4.8"
 			}
 		},
+		"node_modules/svelthree": {
+			"version": "0.119.0-5",
+			"resolved": "https://registry.npmjs.org/svelthree/-/svelthree-0.119.0-5.tgz",
+			"integrity": "sha512-5niteQrl5l7evhSSkfcf/I8FSccZD39kLnEZBKmnSJYwUon87fDnO8+maOzxcFBaWEOM1RdRcGy9J0LdXbLfrQ==",
+			"dev": true,
+			"dependencies": {
+				"svelthree-three": "git+https://github.com/vatro/svelthree-three.git#119"
+			}
+		},
+		"node_modules/svelthree-three": {
+			"version": "0.119.1",
+			"resolved": "git+ssh://git@github.com/vatro/svelthree-three.git#3a0c78631b9382179828c1ace0edb83df541a6a1",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/tailwindcss": {
 			"version": "3.1.4",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
@@ -3322,6 +3341,11 @@
 			"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
 			"dev": true
 		},
+		"node_modules/three": {
+			"version": "0.142.0",
+			"resolved": "https://registry.npmjs.org/three/-/three-0.142.0.tgz",
+			"integrity": "sha512-ESjPO+3geFr+ZUfVMpMnF/eVU2uJPOh0e2ZpMFqjNca1wApS9lJb7E4MjwGIczgt9iuKd8PEm6Pfgp2bJ92Xtg=="
+		},
 		"node_modules/tiny-glob": {
 			"version": "0.2.9",
 			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -5758,6 +5782,20 @@
 				}
 			}
 		},
+		"svelthree": {
+			"version": "0.119.0-5",
+			"resolved": "https://registry.npmjs.org/svelthree/-/svelthree-0.119.0-5.tgz",
+			"integrity": "sha512-5niteQrl5l7evhSSkfcf/I8FSccZD39kLnEZBKmnSJYwUon87fDnO8+maOzxcFBaWEOM1RdRcGy9J0LdXbLfrQ==",
+			"dev": true,
+			"requires": {
+				"svelthree-three": "git+https://github.com/vatro/svelthree-three.git#119"
+			}
+		},
+		"svelthree-three": {
+			"version": "git+ssh://git@github.com/vatro/svelthree-three.git#3a0c78631b9382179828c1ace0edb83df541a6a1",
+			"dev": true,
+			"from": "svelthree-three@git+https://github.com/vatro/svelthree-three.git#119"
+		},
 		"tailwindcss": {
 			"version": "3.1.4",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
@@ -5827,6 +5865,11 @@
 			"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
 			"dev": true
 		},
+		"three": {
+			"version": "0.142.0",
+			"resolved": "https://registry.npmjs.org/three/-/three-0.142.0.tgz",
+			"integrity": "sha512-ESjPO+3geFr+ZUfVMpMnF/eVU2uJPOh0e2ZpMFqjNca1wApS9lJb7E4MjwGIczgt9iuKd8PEm6Pfgp2bJ92Xtg=="
+		},
 		"tiny-glob": {
 			"version": "0.2.9",
 			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",

package.json

@@ -27,9 +27,13 @@
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
 		"svelte-preprocess": "^4.10.7",
+		"svelthree": "^0.119.0-5",
 		"tailwindcss": "^3.1.4",
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.2"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"three": "^0.142.0"
+	}
 }

src/lib/footer/Footer.svelte

@@ -1,4 +1,4 @@
-<main class="px-3 lg:px-0 py-10">
+<main class="px-3 lg:px-0 py-10 text-center">
     <div class="container mx-auto">
         Made by <a class="hover:underline" href="https://bartindustries.com/" target="_blank">Midblep</a>.
     </div>

src/lib/model/Model.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    import { browser } from "$app/env";
+    import { onMount } from "svelte";
+    import * as THREE from 'three';
+    import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
+    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+    let canvas: HTMLElement|null = null;
+    let scene: THREE.Scene|null = null;
+    let camera: THREE.PerspectiveCamera|null = null;
+    let renderer: THREE.WebGLRenderer|null = null;
+    let kitty: any = null;
+    let controls: OrbitControls|null = null;
+
+    const geometry = new THREE.BoxGeometry( 1, 1, 1 );
+    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+    const cube = new THREE.Mesh( geometry, material );
+    const texture = "/models/PotatoCat.dae";
+
+    function animate() {
+        requestAnimationFrame( animate );
+        // controls.update();
+        renderer.render( scene, camera );
+        // kitty.scale.x += 0.01;
+        // kitty.scale.y += 0.01;
+        // kitty.scale.z += 0.01;
+    }
+
+    onMount(() => {
+        if(browser && canvas) {
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+            renderer = new THREE.WebGLRenderer();
+            // controls = new OrbitControls( camera, renderer.domElement );
+            const loader: FBXLoader = new FBXLoader();
+
+            renderer.setSize( window.innerWidth, window.innerHeight );
+            canvas.appendChild( renderer.domElement );
+
+            // const light = new THREE.AmbientLight( 0xff0000 ); // soft white light
+            // light.position.y = 100;
+            // light.position.x = 100;
+            // scene.add( light );
+
+            scene.background = new THREE.Color(0x18181b);
+
+            const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+            scene.add( directionalLight );
+
+            loader.load('/models/potatgato.fbx', function ( object: any ) {
+                kitty = object;
+
+                // object.traverse( function ( child: any ) {
+
+                //     if ( child.isMesh ) {
+
+                //         console.log( child.geometry.attributes.uv );
+                //         child.material.map = texture; // assign your diffuse texture here
+
+                //     }
+
+                // } );
+
+                scene.add( object );
+            }, undefined, function ( error: any ) {
+                console.error( error );
+            });
+
+            camera.position.z = 100;
+            camera.position.y = 50;
+            camera.position.x = 0;
+            // controls.update();
+            animate();
+        }
+    });
+</script>
+
+<main bind:this={canvas} class="-mt-40">
+
+</main>

src/routes/index.svelte

@@ -1,4 +1,5 @@
 <script>
+    import Model from "$lib/model/Model.svelte";
     import Social from "../lib/socials/Social.svelte";
 </script>
 
@@ -60,6 +61,10 @@
         </div>
     </section>
 
+    <section>
+        <Model/>
+    </section>
+
 </main>
 
 <style>