Skip to content

3D modelling with Threlte #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
frederickobrien wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

3D modelling with Threlte #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9817199
Install Threlte
frederickobrien May 21, 2024
cfe4e07
My First Scene
frederickobrien Jul 18, 2024
c662a6f
Display 3D models
frederickobrien Jul 19, 2024
12164cc
Switch to Svelte 5-compatible next versions of Threlte dependencies
frederickobrien Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,913 changes: 2,680 additions & 1,233 deletions site/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 8 additions & 2 deletions site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
"@sveltejs/adapter-netlify": "^4.3.6",
"@sveltejs/kit": "^2.8.2",
"@sveltejs/vite-plugin-svelte": "^4.0.1",
"@threlte/core": "^8.0.0-next.31",
"@threlte/extras": "^9.0.0-next.42",
"@threlte/gltf": "^3.0.0-next.10",
"@types/eslint": "^8.56.12",
"@typescript-eslint/eslint-plugin": "^7.18.0",
"@typescript-eslint/parser": "^7.18.0",
Expand All @@ -32,5 +35,8 @@
"vite": "^5.4.11",
"vitest": "^2.1.5"
},
"type": "module"
}
"type": "module",
"dependencies": {
"three": "^0.171.0"
}
}
2 changes: 1 addition & 1 deletion site/src/data/bylines.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1250,4 +1250,4 @@
"contentType": "feature",
"soleAuthor": true
}
]
]
2 changes: 1 addition & 1 deletion site/src/data/taglines.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@
"The last straw",
"Cold, distant, otherwise perfect",
"As seen near TV"
]
]
42 changes: 42 additions & 0 deletions site/src/lib/components/Scene.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<script>
import { Canvas, useTask } from '@threlte/core';
import { T } from '@threlte/core';
import { interactivity } from '@threlte/extras';
import { spring } from 'svelte/motion';

interactivity();
const scale = spring(1);

let rotation = 0;
useTask((delta) => {
rotation += delta;
});
</script>

<T.PerspectiveCamera
makeDefault
position={[10, 10, 10]}
on:create={({ ref }) => {
ref.lookAt(0, 1, 0);
}}
/>
<T.DirectionalLight position={[0, 10, 10]} castShadow />

<T.Mesh
rotation.y={rotation}
scale={$scale}
on:pointerenter={() => scale.set(1.5)}
on:pointerleave={() => scale.set(1)}
castShadow
>
<T.BoxGeometry args={[2, 2, 1]} />
<T.MeshStandardMaterial color="turquoise" />
</T.Mesh>

<T.Mesh rotation.x={-Math.PI / 2} receiveShadow>
<T.CircleGeometry args={[4, 40]} />
<T.MeshStandardMaterial color="lightgray" />
</T.Mesh>

<style>
</style>
17 changes: 17 additions & 0 deletions site/src/lib/components/models/Model.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<script lang="ts">
import { T } from '@threlte/core';
import { GLTF, OrbitControls } from '@threlte/extras';

export let url: string;
</script>

<T.PerspectiveCamera makeDefault position={[30, 3, 5]} fov={7}>
<OrbitControls autoRotate enableDamping />
</T.PerspectiveCamera>
<T.AmbientLight />
<!-- <GLTF {url} /> -->

<T.Mesh>
<T.SphereGeometry args={[1, 16, 16]} />
<T.MeshBasicMaterial wireframe />
</T.Mesh>
16 changes: 15 additions & 1 deletion site/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<script lang="ts">
import BylineCard from '$lib/components/BylineCard.svelte';
import Model from '$lib/components/models/Model.svelte';
import ProjectCard from '$lib/components/ProjectCard.svelte';
import type { BylineDetails } from '$lib/types/types.js';
import { Canvas } from '@threlte/core';

let { data } = $props();
const recentWritings: BylineDetails[] = data.writings.slice(0, 15);
Expand All @@ -12,6 +14,12 @@
<meta name="description" content="Home page" />
</svelte:head>

<div class="scene-container">
<Canvas>
<Model url="/models/typewriter/scene.gltf" />
</Canvas>
</div>

<div class="homepage-container">
<div>
<h2>Work</h2>
Expand All @@ -38,7 +46,6 @@
</div>
<div>
<h2>Writings</h2>

{#each recentWritings as byline}
<BylineCard
title={byline.title}
Expand Down Expand Up @@ -74,6 +81,13 @@
display: grid;
gap: 2rem;
}
.scene-container {
width: 100%;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 768px) {
.homepage-container {
display: grid;
Expand Down
2 changes: 1 addition & 1 deletion site/src/routes/projects-and-experiences/gonzo-engineering.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ All code is publically available on [GitHub](https://github.com/gonzo-engineerin

[teeline.online](https://teeline.online) is an online resource for studying Teeline shorthand. Features include searchable dictionary of hundreds of animated outlines, a 'revise' page where people can sear outlines into their brains, a basic syllabus outlining how Teeline works, and a generator that takes a stab at converting passages of text into Teeline.

The project was partially inspired by my old revision cards from when I was studying for my NCTJ diploma. Free online resources for learning Teeline seemed few and far between so once I'd cut my teeth as a software engineer I decided to try making one myself. Tinkering with it on and off over the years has seen it grow into a pretty popular resource, with thousands of visitors a month and [coverage by the likes of journalism.co.uk](https://www.journalism.co.uk/news/tool-for-journalists-teeline-online-for-learning-and-practicing-shorthand/s2/a970926/).
The project was partially inspired by my old revision cards from when I was studying for my NCTJ diploma. Free online resources for learning Teeline seemed few and far between so once I'd cut my teeth as a software engineer I decided to try making one myself. Tinkering with it on and off over the years has seen it grow into a pretty popular resource, with thousands of visitors a month and [coverage by the likes of journalism.co.uk](https://www.journalism.co.uk/news/tool-for-journalists-teeline-online-for-learning-and-practicing-shorthand/s2/a970926/).

The project is built using [Svelte](https://svelte.dev/). The outlines around which the site revolves are stored as a series of SVG path coordinates, allowing for snazzy features like animation and reusability.

Expand Down
11 changes: 11 additions & 0 deletions site/static/models/computer/license.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
Model Information:
* title: Retro computer
* source: https://sketchfab.com/3d-models/retro-computer-f844c0357d284fd8baa1435e9ff31bb2
* author: Urpo (https://sketchfab.com/Urpo)

Model License:
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
* requirements: Author must be credited. Commercial use is allowed.

If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
This work is based on "Retro computer" (https://sketchfab.com/3d-models/retro-computer-f844c0357d284fd8baa1435e9ff31bb2) by Urpo (https://sketchfab.com/Urpo) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
Binary file added site/static/models/computer/scene.bin
View file
Open in desktop
Binary file not shown.
Loading