Initial commit

2026-01-06 16:52:48 +00:00 · 2024-03-02 14:30:36 +01:00
commit c42656f243
16 changed files with 274 additions and 0 deletions
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/src/app.html
+++ b/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/src/lib/components/App.svelte
+++ b/src/lib/components/App.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Canvas } from '@threlte/core'
+  import Scene from './Scene.svelte'
+</script>
+
+<Canvas>
+  <Scene />
+</Canvas>
--- a/src/lib/components/Scene.svelte
+++ b/src/lib/components/Scene.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { T } from '@threlte/core'
+  import { ContactShadows, Float, Grid, OrbitControls } from '@threlte/extras'
+</script>
+
+<T.PerspectiveCamera
+  makeDefault
+  position={[-10, 10, 10]}
+  fov={15}
+>
+  <OrbitControls
+    autoRotate
+    enableZoom={false}
+    enableDamping
+    autoRotateSpeed={0.5}
+    target.y={1.5}
+  />
+</T.PerspectiveCamera>
+
+<T.DirectionalLight
+  intensity={0.8}
+  position.x={5}
+  position.y={10}
+/>
+<T.AmbientLight intensity={0.2} />
+
+<Grid
+  position.y={-0.001}
+  cellColor="#ffffff"
+  sectionColor="#ffffff"
+  sectionThickness={0}
+  fadeDistance={25}
+  cellSize={2}
+/>
+
+<ContactShadows
+  scale={10}
+  blur={2}
+  far={2.5}
+  opacity={0.5}
+/>
+
+<Float
+  floatIntensity={1}
+  floatingRange={[0, 1]}
+>
+  <T.Mesh
+    position.y={1.2}
+    position.z={-0.75}
+  >
+    <T.BoxGeometry />
+    <T.MeshStandardMaterial color="#0059BA" />
+  </T.Mesh>
+</Float>
+
+<Float
+  floatIntensity={1}
+  floatingRange={[0, 1]}
+>
+  <T.Mesh
+    position={[1.2, 1.5, 0.75]}
+    rotation.x={5}
+    rotation.y={71}
+  >
+    <T.TorusKnotGeometry args={[0.5, 0.15, 100, 12, 2, 3]} />
+    <T.MeshStandardMaterial color="#F85122" />
+  </T.Mesh>
+</Float>
+
+<Float
+  floatIntensity={1}
+  floatingRange={[0, 1]}
+>
+  <T.Mesh
+    position={[-1.4, 1.5, 0.75]}
+    rotation={[-5, 128, 10]}
+  >
+    <T.IcosahedronGeometry />
+    <T.MeshStandardMaterial color="#F8EBCE" />
+  </T.Mesh>
+</Float>
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import App from '$lib/components/App.svelte'
+</script>
+
+<div>
+  <App />
+</div>
+
+<style>
+  :global(body) {
+    margin: 0;
+  }
+
+  div {
+    width: 100vw;
+    height: 100vh;
+    background: rgb(13, 19, 32);
+    background: linear-gradient(180deg, rgba(13, 19, 32, 1) 0%, rgba(8, 12, 21, 1) 100%);
+  }
+</style>
				`@@ -0,0 +1 @@`
				// place files you want to import through the `$lib` alias in this folder.