BradNut/svelte-3d
1
0
Fork 0
mirror of https://github.com/BradNut/svelte-3d synced 2025-09-08 17:40:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Home imports from cubes and adding instructions to cubes page.

Browse source
This commit is contained in:
Bradley Shellnut 2022-05-05 20:26:31 -07:00
parent 470732fb49
commit c65bd035e0
2 changed files with 18 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/routes/cubes.svelte
View file

@ -9,6 +9,10 @@
<svelte:window on:click={() => count += 1} />
<div class="instructions">
<h2>Click around to add cubes</h2>
</div>
<PE.World gravity={[0, -9.8 ,0]}>
<SC.Canvas antialias shadows>
<PE.Body mass={0} rotation={[-Math.PI / 2, 0, 0]}>
@ -29,3 +33,14 @@
<SC.OrbitControls />
</SC.Canvas>
</PE.World>
<style>
.instructions {
position: absolute;
top: 5%;
left: 40%;
z-index: 10;
color: white;
font-size: 2rem;
}
</style>

30
src/routes/index.svelte
View file

@ -1,31 +1,5 @@
<script>
import * as SC from 'svelte-cubed';
import * as THREE from 'three';
import * as PE from 'svelte-cannon';
import Box from '$lib/Box.svelte';
let count = 1;
import Cubes from './cubes.svelte';
</script>
<svelte:window on:click={() => count += 1} />
<PE.World gravity={[0, -9.8 ,0]}>
<SC.Canvas antialias shadows>
<PE.Body mass={0} rotation={[-Math.PI / 2, 0, 0]}>
<PE.Plane />
</PE.Body>
<SC.Mesh
receiveShadow
geometry={new THREE.PlaneGeometry(50, 50)}
rotation={[-Math.PI / 2, 0, 0]}
material={new THREE.MeshStandardMaterial({ color: "grey"})}
/>
{#each {length: count } as _}
<Box />
{/each}
<SC.DirectionalLight intensity={1} position={[15,15,15]} shadow={{ mapSize: [2048, 2048]}} />
<SC.AmbientLight intensity={1} />
<SC.PerspectiveCamera position={[ 2, 2, 15 ]} target={[0,0,0]} />
<SC.OrbitControls />
</SC.Canvas>
</PE.World>
<Cubes />