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%
</head>
<body>
<div>%svelte.body%</div>
<div id="svelte">%svelte.body%</div>
</body>
</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]}
/>
{/each}
<SC.PerspectiveCamera position={[15, 15, 15]} />
<SC.PerspectiveCamera position={[20, 20, 50]} />
<SC.OrbitControls />
<SC.AmbientLight intensity={0.5} />
<SC.DirectionalLight intensity={1} position={[3, 5, -4]} />
@ -45,6 +45,16 @@
<style>
.controls {
position: absolute;
bottom: 0;
margin: 1rem;
z-index: 10;
}
button {
border-radius: 10px;
background: aqua;
border: none;
padding: 1rem;
text-transform: uppercase;
}
</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 }} />
<div class="controls">
<label>Width:
<input type="range" min={0.1} max={3} step={0.1} bind:value={width} />
<h1>Modify Cube Size:</h1>
<label for="width">Width:
<input id="width" name="width" type="range" min={0.1} max={3} step={0.1} bind:value={width} />
</label>
<label>Height:
<input type="range" min={0.1} max={3} step={0.1} bind:value={height} />
<label for="height">Height:
<input id="height" name="height" type="range" min={0.1} max={3} step={0.1} bind:value={height} />
</label>
<label>Depth:
<input type="range" min={0.1} max={3} step={0.1} bind:value={depth} />
<label for="depth">Depth:
<input id="depth" name="depth" type="range" min={0.1} max={3} step={0.1} bind:value={depth} />
</label>
</div>
@ -44,10 +45,17 @@
<style>
.controls {
display: grid;
gap: 2rem;
bottom: 0;
margin: 2rem;
position: absolute;
z-index: 10;
}
label {
display: block;
font-size: var(--bodyTextSize);
display: flex;
place-content: center;
place-items: center;
}
</style>

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

19
src/routes/star.svelte
View file

@ -12,21 +12,30 @@
}
</script>
<header>
<h1>Star World</h1>
</header>
<div class="star-container">
<div class="star-world">
<h2>Star World</h2>
</div>
<div style:position="relative">
<div style:position="relative">
{#if isStar}
<div class="star" out:fly={{ opacity: 0, y: -100, duration: 3000 }}>
<Star />
</div>
{/if}
<button on:click={hitButton}>Level Up</button>
</div>
</div>
<style>
header {
.star-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%);
}
.star-world {
display: flex;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 60px;

7
src/routes/svg3D.svelte
View file

@ -27,6 +27,7 @@ x<script>
</SC.Canvas>
<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="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>
@ -34,9 +35,11 @@ x<script>
<style>
.controls {
display: grid;
gap: 1rem;
position: absolute;
top: 0;
left: 0;
bottom: 0%;
margin: 1rem;
z-index: 10;
}
</style>

15
src/routes/text3D.svelte
View file

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