add dependencies, add and setup tailwind, cleanup dir structure, test out loading data for a page

package.json

@@ -17,31 +17,35 @@
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@theatre/studio": "^0.7.1",
     "@types/eslint": "^8.56.0",
+    "@types/three": "^0.159.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.35.1",
+    "postcss": "^8.4.38",
     "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.1.2",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
+    "tailwindcss": "^3.4.3",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^5.0.3",
-    "vitest": "^1.2.0",
+    "vitest": "^1.2.0"
-    "@types/three": "^0.159.0",
-    "@theatre/studio": "^0.7.1"
   },
   "type": "module",
   "dependencies": {
-    "three": "^0.159.0",
+    "@dimforge/rapier3d-compat": "^0.11.2",
+    "@theatre/core": "^0.7.1",
     "@threlte/core": "^7.3.0",
     "@threlte/extras": "^8.11.2",
     "@threlte/rapier": "^2.0.0",
-    "@dimforge/rapier3d-compat": "^0.11.2",
     "@threlte/theatre": "^2.1.7",
-    "@theatre/core": "^0.7.1"
+    "three": "^0.159.0",
+    "three-inspect": "^0.4.5"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/lib/components/App.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
   import { Canvas } from '@threlte/core'
-  import Scene from './Scene.svelte'
+  import Home from '$lib/components/scenes/Home.svelte'
 	import { World } from '@threlte/rapier';
+	import { Inspector } from 'three-inspect';
+	import { dev } from '$app/environment';
+
 </script>
 
 <Canvas>
   <World gravity={[0, 0, 0]}>
-    <Scene />
+    <Home />
   </World>
+	{#if dev}
+		<Inspector />
+	{/if}
 </Canvas>

src/lib/components/Scene.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import { T } from '@threlte/core'
-  import { ContactShadows, Float, Grid, OrbitControls } from '@threlte/extras'
-	import { Attractor, RigidBody } from '@threlte/rapier';
-	import RandomMeshes from './RandomMeshes.svelte';
-
-	const size = 100
-  const count = 500
-
-	const positions = new Float32Array(count * 3)
-
-	// randomly distribute points in a cube
-	for (let i = 0; i < count; i++) {
-		positions[i * 3 + 0] = (Math.random() - 0.5) * size
-		positions[i * 3 + 1] = (Math.random() - 0.5) * size
-		positions[i * 3 + 2] = (Math.random() - 0.5) * size
-	}
-</script>
-
-<T.PerspectiveCamera
-	position.y={15}
-  position.z={25}
-	makeDefault
-  fov={70}
-  far={10000}
->
-  <OrbitControls
-    enableZoom={false}
-    enablePan={false}
-    enableRotate={false}
-    enableDamping
-    target.y={0}
-		autoRotate
-  />
-</T.PerspectiveCamera>
-
-<T.DirectionalLight
-  intensity={0.8}
-  position.x={5}
-  position.y={10}
-/>
-
-
-<T.Points>
-  <T.BufferGeometry>
-    <T.BufferAttribute
-      args={[positions, 3]}
-      attach={(parent, self) => {
-        parent.setAttribute('position', self)
-        return () => {
-          // cleanup function called when ref changes or the component unmounts
-          // https://threlte.xyz/docs/reference/core/t#attach
-        }
-      }}
-    />
-  </T.BufferGeometry>
-  <T.PointsMaterial size={0.1} />
-</T.Points>
-
-<RandomMeshes
-	position={[0, 0, 0]}
-  range={10}
-/>
-

src/lib/components/home/OrbitingSpheres.svelte

@@ -2,7 +2,7 @@
   lang="ts"
   context="module"
 >
-  const geometry = new SphereGeometry(1)
+  const geometry = new SphereGeometry(1, 8, 4)
   const material = new MeshBasicMaterial({ color: '#339933' })
 </script>
 
@@ -10,7 +10,7 @@
   import { T } from '@threlte/core'
 	import { HTML } from '@threlte/extras'
   import { Attractor, Collider, RigidBody } from '@threlte/rapier'
-  import { BoxGeometry, MeshBasicMaterial, MeshStandardMaterial, SphereGeometry, Vector3 } from 'three'
+  import { MeshBasicMaterial, SphereGeometry, Vector3 } from 'three'
 
 	export let range: number = 10
 	export let position: [number, number, number] = [0, 0, 0]
@@ -48,7 +48,7 @@
 
 	}
 
-  $: bodies = generateBodies(3)
+  $: bodies = generateBodies(2)
 </script>
 
 <HTML

src/lib/components/scenes/Home.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { T } from '@threlte/core'
+  import { OrbitControls } from '@threlte/extras'
+	import OrbitingSpheres from '$lib/components/home/OrbitingSpheres.svelte';
+
+	const size = 100
+  const count = 500
+
+	const positions = new Float32Array(count * 3)
+
+	// randomly distribute points in a cube
+	for (let i = 0; i < count; i++) {
+		positions[i * 3 + 0] = (Math.random() - 0.5) * size
+		positions[i * 3 + 1] = (Math.random() - 0.5) * size
+		positions[i * 3 + 2] = (Math.random() - 0.5) * size
+	}
+</script>
+
+
+			<T.PerspectiveCamera
+				position.y={15}
+				position.z={25}
+				makeDefault
+				fov={70}
+				far={10000}
+			>
+				<OrbitControls
+					enableZoom={false}
+					enablePan={false}
+					enableRotate={false}
+					enableDamping
+					target.y={0}
+					autoRotate
+				/>
+			</T.PerspectiveCamera>
+
+			<T.Points>
+				<T.BufferGeometry>
+					<T.BufferAttribute
+						args={[positions, 3]}
+						attach={(parent, self) => {
+							parent.setAttribute('position', self)
+							return () => {
+								// cleanup function called when ref changes or the component unmounts
+								// https://threlte.xyz/docs/reference/core/t#attach
+							}
+						}}
+					/>
+				</T.BufferGeometry>
+				<T.PointsMaterial size={0.1} />
+			</T.Points>
+
+			<OrbitingSpheres
+				position={[0, 0, 0]}
+				range={10}
+			/>

src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+  import "../app.css";
+</script>
+
+<slot />

src/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const prerender = true
+export const ssr = false

src/routes/+page.svelte

@@ -9,6 +9,9 @@
 		<span>{model.title}</span>
 	{/each}
   <App />
+	<canvas>
+
+	</canvas>
 </div>
 
 <style>

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

vite.config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from 'vitest/config'
 export default defineConfig({
   plugins: [sveltekit()],
   ssr: {
-    noExternal: ['three']
+    noExternal: ['three', 'three-inspect']
   },
   test: {
     include: ['src/**/*.{test,spec}.{js,ts}']