silentsilas/playground
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Silas
2024-04-30 21:18:11 -04:00
parent ef36a8ffa7
commit 47d13e7d6e
14 changed files with 4225 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/App.svelte
View File

@@ -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>

64
src/lib/components/Scene.svelte
View File

@@ -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}
/>

6
src/lib/components/RandomMeshes.svelte → src/lib/components/home/OrbitingSpheres.svelte
View File

@@ -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

0
src/lib/components/home/SpaceSkysphere.svelte Normal file
View File

56
src/lib/components/scenes/Home.svelte Normal file
View File

@@ -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}
/>