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

Updating to have a header and fixing controls.

Browse source
This commit is contained in:
Bradley Shellnut 2022-05-05 16:51:30 -07:00
parent 9ff85d07e8
commit 74a618d4a5
10 changed files with 199 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/app.css Normal file
View file

@ -0,0 +1,22 @@
:root {
--dark: #000000;
--headingFont: Arial, Helvetica, sans-serif;
--bodyFont: Arial, Helvetica, sans-serif;
--baseFontSize: 100%;
--h1: 3.052rem;
--h2: 2.441rem;
--h3: 1.953rem;
--h4: 1.563rem;
--h5: 1.25rem;
--h6: 1.8rem;
--bodyTextSize: 1.8rem;
--smallText: 1.44rem;
--lineHeight: 1.75;
}
#svelte {
min-height: 100vh;
display: flex;
flex-direction: column;
}

2
src/app.html
View file

@ -7,6 +7,6 @@
%svelte.head% %svelte.head%
</head> </head>
<body> <body>
<div>%svelte.body%</div> <div id="svelte">%svelte.body%</div>
</body> </body>
</html> </html>

84
src/routes/__layout.svelte Normal file
View file

@ -0,0 +1,84 @@
<script>
import '../app.css';
</script>
<header>
<h1>Svelte 3D</h1>
<nav>
<a href="/cubes">Cubes</a>
<a href="/star-canvas">Rotating Star</a>
<a href="/playcube">Cube</a>
<a href="/contributions">Contributions</a>
<a href="/svg3D">SVG Example</a>
<a href="/text3D">Text Example</a>
<a href="/star">Star</a>
</nav>
</header>
<main>
<slot />
</main>
<style>
:global(*, *::before, *::after) {
margin: 0;
box-sizing: inherit;
}
:global(html) {
font-size: 62.5%;
box-sizing: border-box;
}
:global(p) {
word-wrap: normal;
font-size: var(--bodyTextSize);
color: var(--lightShade);
}
:global(li) {
word-wrap: normal;
font-size: var(--bodyTextSize);
color: var(--lightShade);
}
header {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
width: 100vw;
position: absolute;
background: rgb(141, 153, 158);
padding: 0.5rem;
z-index: 10;
}
@media (max-width: 650px) {
header {
align-content: center;
display: grid;
justify-items: center;
grid-template-columns: 1fr;
}
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
gap: 0.6rem;
}
nav a {
position: relative;
font-size: var(--bodyTextSize);
text-decoration: underline;
color: var(--dark);
}
nav a:hover::after {
transform: scale(1);
}
</style>

12
src/routes/contributions.svelte
View file

@ -36,7 +36,7 @@
position={[Math.floor(index / rows), contribution / 2, index % rows]} position={[Math.floor(index / rows), contribution / 2, index % rows]}
/> />
{/each} {/each}
<SC.PerspectiveCamera position={[15, 15, 15]} /> <SC.PerspectiveCamera position={[20, 20, 50]} />
<SC.OrbitControls /> <SC.OrbitControls />
<SC.AmbientLight intensity={0.5} /> <SC.AmbientLight intensity={0.5} />
<SC.DirectionalLight intensity={1} position={[3, 5, -4]} /> <SC.DirectionalLight intensity={1} position={[3, 5, -4]} />
@ -45,6 +45,16 @@
<style> <style>
.controls { .controls {
position: absolute; position: absolute;
bottom: 0;
margin: 1rem;
z-index: 10; z-index: 10;
} }
button {
border-radius: 10px;
background: aqua;
border: none;
padding: 1rem;
text-transform: uppercase;
}
</style> </style>

31
src/routes/cubes.svelte Normal file
View file

@ -0,0 +1,31 @@
<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;
</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>

22
src/routes/playcube.svelte
View file

@ -17,14 +17,15 @@
<svelte:window on:click={() => { isActive = !isActive }} /> <svelte:window on:click={() => { isActive = !isActive }} />
<div class="controls"> <div class="controls">
<label>Width: <h1>Modify Cube Size:</h1>
<input type="range" min={0.1} max={3} step={0.1} bind:value={width} /> <label for="width">Width:
<input id="width" name="width" type="range" min={0.1} max={3} step={0.1} bind:value={width} />
</label> </label>
<label>Height: <label for="height">Height:
<input type="range" min={0.1} max={3} step={0.1} bind:value={height} /> <input id="height" name="height" type="range" min={0.1} max={3} step={0.1} bind:value={height} />
</label> </label>
<label>Depth: <label for="depth">Depth:
<input type="range" min={0.1} max={3} step={0.1} bind:value={depth} /> <input id="depth" name="depth" type="range" min={0.1} max={3} step={0.1} bind:value={depth} />
</label> </label>
</div> </div>
@ -44,10 +45,17 @@
<style> <style>
.controls { .controls {
display: grid;
gap: 2rem;
bottom: 0;
margin: 2rem;
position: absolute; position: absolute;
z-index: 10; z-index: 10;
} }
label { label {
display: block; font-size: var(--bodyTextSize);
display: flex;
place-content: center;
place-items: center;
} }
</style> </style>

0
src/routes/star_canvas.svelte → src/routes/star-canvas.svelte
View file

17
src/routes/star.svelte
View file

@ -12,9 +12,10 @@
} }
</script> </script>
<header> <div class="star-container">
<h1>Star World</h1> <div class="star-world">
</header> <h2>Star World</h2>
</div>
<div style:position="relative"> <div style:position="relative">
{#if isStar} {#if isStar}
@ -24,9 +25,17 @@
{/if} {/if}
<button on:click={hitButton}>Level Up</button> <button on:click={hitButton}>Level Up</button>
</div> </div>
</div>
<style> <style>
header { .star-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%);
}
.star-world {
display: flex; display: flex;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
margin-bottom: 60px; margin-bottom: 60px;

7
src/routes/svg3D.svelte
View file

@ -27,6 +27,7 @@ x<script>
</SC.Canvas> </SC.Canvas>
<div class="controls"> <div class="controls">
<h1>Rotation Controls:</h1>
<label for="x">X: <input id="x" name="x" type="range" bind:value={x} min={0} max={5} step={0.01} /></label> <label for="x">X: <input id="x" name="x" type="range" bind:value={x} min={0} max={5} step={0.01} /></label>
<label for="y">Y: <input id="y" name="y" type="range" bind:value={y} min={0} max={5} step={0.01} /></label> <label for="y">Y: <input id="y" name="y" type="range" bind:value={y} min={0} max={5} step={0.01} /></label>
<label for="z">Z: <input id="z" name="z" type="range" bind:value={z} min={0} max={5} step={0.01} /></label> <label for="z">Z: <input id="z" name="z" type="range" bind:value={z} min={0} max={5} step={0.01} /></label>
@ -34,9 +35,11 @@ x<script>
<style> <style>
.controls { .controls {
display: grid;
gap: 1rem;
position: absolute; position: absolute;
top: 0; bottom: 0%;
left: 0; margin: 1rem;
z-index: 10; z-index: 10;
} }
</style> </style>

15
src/routes/text3D.svelte
View file

@ -6,7 +6,7 @@
import typeface from '@compai/font-mako/data/typefaces/mako-normal-400.json'; import typeface from '@compai/font-mako/data/typefaces/mako-normal-400.json';
let font; let font;
let text = "Level Up"; let text = "Test me out!!";
let loader = new FontLoader(); let loader = new FontLoader();
onMount(() => { onMount(() => {
@ -22,17 +22,20 @@
height: 10 height: 10
}) } }) }
/> />
<SC.PerspectiveCamera position={[ 10, 0, 100 ]} /> <SC.PerspectiveCamera position={[ 50, 50, 150 ]} />
<SC.OrbitControls /> <SC.OrbitControls />
</SC.Canvas> </SC.Canvas>
<input type="text" bind:value={text} /> <label for="3DText">
Enter text:
<input id="3DText" name="3DText" type="text" bind:value={text} />
</label>
<style> <style>
input { label {
position: absolute; position: absolute;
top: 0; top: 20%;
left: 0; right: 50%;
z-index: 10; z-index: 10;
} }
</style> </style>