From 3dbb35264ecc837fd554d89fa5e795c1506014db Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Tue, 3 May 2022 19:04:11 -0700
Subject: [PATCH] feat: :fire: Adding 3D star GLTF file and messing with
 lighting and color

---
 src/routes/contributions.svelte |  50 +++++++++++++
 src/routes/index.svelte         |  52 +++++---------
 static/star.gltf                | 123 ++++++++++++++++++++++++++++++++
 3 files changed, 191 insertions(+), 34 deletions(-)
 create mode 100644 src/routes/contributions.svelte
 create mode 100644 static/star.gltf

diff --git a/src/routes/contributions.svelte b/src/routes/contributions.svelte
new file mode 100644
index 0000000..225625f
--- /dev/null
+++ b/src/routes/contributions.svelte
@@ -0,0 +1,50 @@
+<script>
+  import * as THREE from 'three';
+  import * as SC from 'svelte-cubed';
+  import { spring } from 'svelte/motion';
+
+  let rows = 5;
+  let depth = 10;
+  let hue = Math.round(Math.random() * 360);
+
+  let contributions = spring(getContributions());
+
+  function refresh() {
+    $contributions = getContributions();
+    hue = Math.round(Math.random() * 360);
+  }
+
+  function getContributions() {
+    return new Array(rows * depth).fill(0).map((value) => {
+      return Math.round(Math.random() * 10);
+    });
+  }
+</script>
+
+<div class="controls">
+  <button on:click={refresh}>Refresh</button>
+</div>
+
+<SC.Canvas antialias alpha>
+  {#each $contributions as contribution, index}
+    <SC.Mesh
+      scale={[1, contribution, 1]}
+      geometry={new THREE.BoxGeometry()}
+      material={new THREE.MeshStandardMaterial({
+        color: `hsl(${hue}, 50%, ${contribution * 10}%)`,
+      })}
+      position={[Math.floor(index / rows), contribution / 2, index % rows]}
+    />
+  {/each}
+  <SC.PerspectiveCamera position={[15, 15, 15]} />
+  <SC.OrbitControls />
+  <SC.AmbientLight intensity={0.5} />
+  <SC.DirectionalLight intensity={1} position={[3, 5, -4]} />
+</SC.Canvas>
+
+<style>
+  .controls {
+    position: absolute;
+    z-index: 10;
+  }
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 225625f..6f681d9 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,45 +1,29 @@
 <script>
   import * as THREE from 'three';
+  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
   import * as SC from 'svelte-cubed';
-  import { spring } from 'svelte/motion';
+  let star;
+  let loader = new GLTFLoader();
 
-  let rows = 5;
-  let depth = 10;
-  let hue = Math.round(Math.random() * 360);
-
-  let contributions = spring(getContributions());
-
-  function refresh() {
-    $contributions = getContributions();
-    hue = Math.round(Math.random() * 360);
-  }
-
-  function getContributions() {
-    return new Array(rows * depth).fill(0).map((value) => {
-      return Math.round(Math.random() * 10);
-    });
-  }
+  loader.load('star.gltf', (gltf) => {
+    star = gltf.scene.children[0].geometry;
+  });
 </script>
 
-<div class="controls">
-  <button on:click={refresh}>Refresh</button>
-</div>
-
 <SC.Canvas antialias alpha>
-  {#each $contributions as contribution, index}
-    <SC.Mesh
-      scale={[1, contribution, 1]}
-      geometry={new THREE.BoxGeometry()}
-      material={new THREE.MeshStandardMaterial({
-        color: `hsl(${hue}, 50%, ${contribution * 10}%)`,
-      })}
-      position={[Math.floor(index / rows), contribution / 2, index % rows]}
-    />
-  {/each}
-  <SC.PerspectiveCamera position={[15, 15, 15]} />
+  <SC.Mesh
+    geometry={star}
+    rotation={[-90, 0, 0]}
+    material={new THREE.MeshStandardMaterial({
+      color: 0xffff00,
+      roughness: 0,
+      metalness: 0.7,
+    })}
+  />
+  <SC.PerspectiveCamera position={[3, 3, 3]} />
   <SC.OrbitControls />
-  <SC.AmbientLight intensity={0.5} />
-  <SC.DirectionalLight intensity={1} position={[3, 5, -4]} />
+  <SC.AmbientLight intensity={1} />
+  <SC.DirectionalLight intensity={0.5} position={[-3, 5, 7]} />
 </SC.Canvas>
 
 <style>
diff --git a/static/star.gltf b/static/star.gltf
new file mode 100644
index 0000000..118f1da
--- /dev/null
+++ b/static/star.gltf
@@ -0,0 +1,123 @@
+{
+    "asset" : {
+        "generator" : "Khronos glTF Blender I/O v1.7.33",
+        "version" : "2.0"
+    },
+    "scene" : 0,
+    "scenes" : [
+        {
+            "name" : "Scene",
+            "nodes" : [
+                0
+            ]
+        }
+    ],
+    "nodes" : [
+        {
+            "mesh" : 0,
+            "name" : "star",
+            "rotation" : [
+                0.1077992394566536,
+                0.1077992394566536,
+                -0.6988414525985718,
+                0.698841392993927
+            ]
+        }
+    ],
+    "materials" : [
+        {
+            "doubleSided" : true,
+            "name" : "Material.001",
+            "pbrMetallicRoughness" : {
+                "baseColorFactor" : [
+                    0.800000011920929,
+                    0.800000011920929,
+                    0.800000011920929,
+                    1
+                ],
+                "metallicFactor" : 0,
+                "roughnessFactor" : 0.5
+            }
+        }
+    ],
+    "meshes" : [
+        {
+            "name" : "Circle.003",
+            "primitives" : [
+                {
+                    "attributes" : {
+                        "POSITION" : 0,
+                        "NORMAL" : 1,
+                        "TEXCOORD_0" : 2
+                    },
+                    "indices" : 3,
+                    "material" : 0
+                }
+            ]
+        }
+    ],
+    "accessors" : [
+        {
+            "bufferView" : 0,
+            "componentType" : 5126,
+            "count" : 22,
+            "max" : [
+                0.9510564804077148,
+                0.3028928339481354,
+                0.8090170621871948
+            ],
+            "min" : [
+                -0.9510565400123596,
+                -0.17501738667488098,
+                -1
+            ],
+            "type" : "VEC3"
+        },
+        {
+            "bufferView" : 1,
+            "componentType" : 5126,
+            "count" : 22,
+            "type" : "VEC3"
+        },
+        {
+            "bufferView" : 2,
+            "componentType" : 5126,
+            "count" : 22,
+            "type" : "VEC2"
+        },
+        {
+            "bufferView" : 3,
+            "componentType" : 5123,
+            "count" : 120,
+            "type" : "SCALAR"
+        }
+    ],
+    "bufferViews" : [
+        {
+            "buffer" : 0,
+            "byteLength" : 264,
+            "byteOffset" : 0
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 264,
+            "byteOffset" : 264
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 176,
+            "byteOffset" : 528
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 240,
+            "byteOffset" : 704
+        }
+    ],
+    "buffers" : [
+        {
+            "byteLength" : 944,
+            "uri" : "data:application/octet-stream;base64,AAAAAMI3M74AAACAAAAAAAAAAAAAAIC/upqivgAAAABFzt++cXhzvwAAAAB5N56+uowDvwAAAADx+Co+F3kWvwAAAAC+G08/1b2IMwAAAADPUQo/GnkWPwAAAAC8G08/u4wDPwAAAADz+Co+cHhzPwAAAAB+N56+u5qiPgAAAABEzt++AAAAAMUUmz4AAACAAAAAAMnxAj4AAIC/upqivsnxAj5Fzt++cXhzv8nxAj55N56+uowDv8nxAj7x+Co+F3kWv8nxAj6+G08/1b2IM8nxAj7PUQo/GnkWP8nxAj68G08/u4wDP8nxAj7z+Co+cHhzP8nxAj5+N56+u5qiPsnxAj5Ezt++AAAAAAAAgL8AAACAAAAAAAQrAr+5bVy/vNXdvlr9LL8xqRi/o6NRvwQrAr8QOYi+Z3czv1r9LL/SOWk+A5EBvwQrAr9lVTI/AAAAAFr9LL95szw/A5EBPwQrAr9lVTI/Z3czP1r9LL/SOWk+o6NRPwQrAr8QOYi+vNXdPlr9LL8xqRi/AAAAAAAAgD8AAACAAAAAAAQrAj+5bVy/vNXdvlr9LD8xqRi/o6NRvwQrAj8QOYi+Z3czv1r9LD/SOWk+A5EBvwQrAj9lVTI/AAAAAFr9LD95szw/A5EBPwQrAj9lVTI/Z3czP1r9LD/SOWk+o6NRPwQrAj8QOYi+vNXdPlr9LD8xqRi/AAAAPwAAAD8AAAA/AAAAANANUz4QkcM98HjIPETksD4Aecg8340nP9INUz7fjWc/AQAAPwAAgD+NPEs/3o1nPzi8eT/fjSc/OLx5P0DksD6MPEs/EJHDPQAAAD8AAAA/AAAAPwAAAADQDVM+EJHDPfB4yDxE5LA+AHnIPN+NJz/SDVM+341nPwEAAD8AAIA/jTxLP96NZz84vHk/340nPzi8eT9A5LA+jDxLPxCRwz0AAAIAAQAAAAMAAgAAAAQAAwAAAAUABAAAAAYABQAAAAcABgAAAAgABwAAAAkACAAAAAoACQAAAAEACgALAAwADQALAA0ADgALAA4ADwALAA8AEAALABAAEQALABEAEgALABIAEwALABMAFAALABQAFQALABUADAAKAAEADAAKAAwAFQAFAAYAEQAFABEAEAAHAAgAEwAHABMAEgACAAMADgACAA4ADQABAAIADQABAA0ADAAJAAoAFQAJABUAFAAEAAUAEAAEABAADwAGAAcAEgAGABIAEQAIAAkAFAAIABQAEwADAAQADwADAA8ADgA="
+        }
+    ]
+}