From 61dcbc31a045d029575d3fbffa235da4a68df4c7 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Wed, 4 May 2022 12:46:41 -0700
Subject: [PATCH] Move star full canvas to different file and start adding star
 in regular HTML.

---
 src/routes/index.svelte | 61 ++++++++++++++++++++---------------------
 src/routes/star.svelte  | 53 +++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 32 deletions(-)
 create mode 100644 src/routes/star.svelte

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 9290ea9..7170284 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -15,39 +15,36 @@
   })
 </script>
 
-<SC.Canvas antialias alpha shadows>
-  <SC.Mesh
-    geometry={star}
-    rotation={[-90, 0, rotation]}
-    material={new THREE.MeshStandardMaterial({
-      color: 0xffff00,
-      roughness: 0,
-      metalness: 0.7,
-    })}
-    castShadow
-  />
-  <SC.Group position={[ 0, -2, 0 ]}>
-    <SC.Mesh
-      receiveShadow
-      geometry={new THREE.PlaneGeometry(100,100)}
-      material={new THREE.MeshStandardMaterial({ color: 'grey' })}
-      rotation={[-Math.PI / 2, 0, 0]}
-    />
-    <SC.Primitive
-      position={[ 0, 0.001, 0]}
-      object={new THREE.GridHelper(100, 100, 0x444444, 0x555555)}
-    />
-  </SC.Group>
-  <SC.PerspectiveCamera position={[3, 1, 3]} />
-  <SC.OrbitControls />
-  <SC.AmbientLight intensity={1} />
-  <SC.DirectionalLight shadow={{ mapSize: [ 2048, 2048 ] }} intensity={0.7} />
-  <SC.PointLight intensity={1} position={[2, 5, 2]} />
-</SC.Canvas>
+<header>
+  <div class="star-container">
+    <SC.Canvas antialias alpha>
+      <SC.Mesh
+        geometry={star}
+        rotation={[-90, 0, rotation]}
+        material={new THREE.MeshStandardMaterial({
+          color: 0xffff00,
+          roughness: 0,
+          metalness: 0.7,
+        })}
+      />
+      <SC.PerspectiveCamera position={[3, 1, 3]} />
+      <SC.AmbientLight intensity={1} />
+      <SC.DirectionalLight intensity={0.7} />
+      <SC.PointLight intensity={1} position={[2, 5, 2]} />
+    </SC.Canvas>
+  </div>
+  <h1>Star World</h1>
+</header>
 
 <style>
-  .controls {
-    position: absolute;
-    z-index: 10;
+  header {
+    display: flex;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+
+  .star-container {
+    position: relative;
+    width: 100px;
+    height: 100px;
   }
 </style>
diff --git a/src/routes/star.svelte b/src/routes/star.svelte
new file mode 100644
index 0000000..9290ea9
--- /dev/null
+++ b/src/routes/star.svelte
@@ -0,0 +1,53 @@
+<script>
+  import * as THREE from 'three';
+  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+  import * as SC from 'svelte-cubed';
+  let star;
+  let rotation = 0;
+
+  let loader = new GLTFLoader();
+  loader.load('star.gltf', (gltf) => {
+    star = gltf.scene.children[0].geometry;
+  });
+
+  SC.onFrame(() => {
+    rotation += 0.01
+  })
+</script>
+
+<SC.Canvas antialias alpha shadows>
+  <SC.Mesh
+    geometry={star}
+    rotation={[-90, 0, rotation]}
+    material={new THREE.MeshStandardMaterial({
+      color: 0xffff00,
+      roughness: 0,
+      metalness: 0.7,
+    })}
+    castShadow
+  />
+  <SC.Group position={[ 0, -2, 0 ]}>
+    <SC.Mesh
+      receiveShadow
+      geometry={new THREE.PlaneGeometry(100,100)}
+      material={new THREE.MeshStandardMaterial({ color: 'grey' })}
+      rotation={[-Math.PI / 2, 0, 0]}
+    />
+    <SC.Primitive
+      position={[ 0, 0.001, 0]}
+      object={new THREE.GridHelper(100, 100, 0x444444, 0x555555)}
+    />
+  </SC.Group>
+  <SC.PerspectiveCamera position={[3, 1, 3]} />
+  <SC.OrbitControls />
+  <SC.AmbientLight intensity={1} />
+  <SC.DirectionalLight shadow={{ mapSize: [ 2048, 2048 ] }} intensity={0.7} />
+  <SC.PointLight intensity={1} position={[2, 5, 2]} />
+</SC.Canvas>
+
+<style>
+  .controls {
+    position: absolute;
+    z-index: 10;
+  }
+</style>