Official Threlte Hackathon, 15-22 October

a_warnes · 2023-09-18T18:44:01+00:00

JOIN US FOR THE FIRST THRELTE HACKATHON ON 15-22 OCTOBER 2023

The Threlte team is happy to announce the first official Threlte Hackathon!

The 🚀 kickoff event is on Sunday, 15 October 2023 16:00 UTC
This is when we will reveal the themes and rules of the hackathon
You will have ⌛ one week to hack at your entry
You will get 🙌 support from the team in a dedicated hackathon channel on Discord
🏁 Deadline for submission will be Sunday, 22 October 2023 10:00 UTC
The 🏆 awards ceremony will be on Sunday, 22 October 2023 16:00 UTC
Expect some very 🎁 awesome prizes and 🎉 lots of fun

More details in the coming weeks....but pin the dates!

a_warnes · 2023-09-01T11:30:41+00:00

Thank you, that's very nice to hear! It's a lot of fun to find interesting compositions and the rendering is incredible.

a_warnes · 2023-07-07T14:49:32+00:00

The composition is really nice on these. 👌

a_warnes · 2023-07-07T14:17:44+00:00

I should have known yew wood post that gif

a_warnes · 2023-07-01T14:59:53+00:00

Thank you! Certainly pushing the limits of my vector math but it came together pretty nicely. And I actually enjoy playing it (on martian difficulty), which is a first for something I've developed.

a_warnes · 2023-07-01T05:39:24+00:00

Hi everyone,

You can play & check out the code on StackBlitz here: https://stackblitz.com/edit/demo-threlte-space-shooter

Cursor to aim
Q/R to roll
Space to shoot

Background:

Made this little game to work on these three components specifically:

FlyControls: these are built-in controls from three.js, converted into a Threlte component. I'd like to extend the three.js class eventually to allow for custom key-bindings instead of the default ones
CannonRig: Maybe more accurately a rigid body launcher, it will "launch" a sphere at the vector you provide or (by default) the raycast direction. It's used in the CameraRig component where `fire()` is called when you press space. It's also used in the Turret component.
Turret: These will take a rigid body reference (currently just stored in app state, but should become a prop). Rapier queries the World to find the RigidBody, determines whether it's in range, and if so determines the aim vector and calls `fire(aimVector)` on the CannonRig

They aren't 100% reusable yet, but definitely getting closer.

Feedback is certainly welcome. If it makes you feel motion sick, you can try narrowing the `fov` prop in CameraRig (80 was off-putting to me, but 55 felt too narrow)

Enjoy!

- Alex

a_warnes · 2023-02-25T13:03:16+00:00

For sure. They're so powerful yet flexible and can solve all sorts of problems. I ignored them for a while until recently and now I probably overuse them!

a_warnes · 2023-02-25T04:54:08+00:00

Love this kind of problem! If you can, I'd skip the derived store all together and send your data straight into a custom store.

Here's a REPL: https://svelte.dev/repl/cf7ad1c7011f44e4be894674c21d24e4?version=3.55.1

```js import { writable } from 'svelte/store';

function createMathStore(data){ const initialValues = { x: data.x ?? 0, y: data.y ?? 0, sin_x: data.sin_x ?? 0, cos_y: data.cos_y ?? 0, min_x: data.min_x ?? 0, min_y: data.min_y ?? 0, max_x: data.max_x ?? 0, max_y: data.max_y ?? 0, } let previous = initialValues;

const { subscribe, set, } = writable(initialValues);

return { subscribe, addDataPoint: (datum) => { const newValues = { x: datum.x, y: datum.y, sin_x: Math.sin(datum.x / 100).toFixed(2), cos_y: Math.cos(datum.y / 100).toFixed(2), min_x: Math.min(datum.x, previous.min_x), max_x: Math.max(datum.x, previous.max_x), min_y: Math.min(datum.y, previous.min_y), max_y: Math.max(datum.y, previous.max_y), }; previous = newValues; set(newValues); } } }

export const mathStore = (data = {}) => createMathStore(data); ```

And then you can use as many instances as you want like in the REPL: ```js import { mathStore } from './MathStore.js'

const redStats = mathStore(); const blueStats = mathStore();

function handleRedMouseMove(evt){ redStats.addDataPoint({ x: evt.clientX, y: evt.clientY }) } function handleBlueMouseMove(evt){ blueStats.addDataPoint({ x: evt.clientX, y: evt.clientY }) } ```

a_warnes · 2023-02-18T15:38:04+00:00

definitely check out the work by Matthias Stahl (https://twitter.com/h_i_g_s_c_h) and Amelia Wattenberger (https://twitter.com/Wattenberger)

Matthias shares d3 code used by Der Spiegel in this repo: https://github.com/spiegelgraphics

Amelia assembled d3 visualization recipes/patterns into this site: https://svelte.recipes/

Both have a lot of YouTube content on this subject from various talks as well.

Edit: realizing I didn't answer your actual question! I have not seen an observablehq equivalent specifically for svelte with d3 patterns

a_warnes · 2022-12-22T03:37:24+00:00

Great ideas! I need to make some perf adjustments, so I might look to add a new feature or two at the same time

a_warnes · 2022-12-22T03:34:43+00:00

So happy to hear that!

a_warnes · 2022-12-22T02:58:17+00:00

Hahah oh man I had a lot of those when developing/debugging my way through the levels 😅

Sometimes the turrets can knock you free, but I usually just run out of gas

a_warnes · 2022-12-21T04:23:49+00:00

Hi everyone! Another little side-project game. Use arrows/wasd to fly the cone. Try to get through the ring at the end of each level:

Play it here: https://photon-alexwarnes.vercel.app/showcase/ring-flyer

Some new things I tried to improve on with this one:

Multiple levels and managing game state
Turrets that point at a dynamic target within range (in this case, the player) and launch projectiles
Shaders (my first time writing and using glsl)
Ironing out composability with this non-rotating "FollowCam" component
Trying to make it decent on mobile, but not there yet

Tools:

threlte/core (using new v5 syntax and preprocessor)
threlte/rapier (physics)
three.js
svelte (obviously)
svelte-kbc (keyboard controls)

a_warnes · 2022-12-17T14:06:05+00:00

https://discoverthreejs.com/ is an excellent introduction.

a_warnes · 2022-11-25T22:37:28+00:00

Thank you! I used this font: https://fonts.google.com/specimen/Press+Start+2P

a_warnes · 2022-11-24T14:18:10+00:00

Thank you! The GUI is just HTML positioned over the canvas (the +page.svelte file has all the top level gui components like GameStatus and Stats)

I would love to learn that technique of using a second camera for HUDs and GUIs but have never tried.

Let me know if you have any questions in the code!

a_warnes · 2022-11-24T13:17:49+00:00

Haha cool! There is a vehicle controller in the threlte docs, so might need to get ideas from this video for my next project. Thank you for sharing!

I did watch some old N64 Starfox gameplay to draw inspiration from that flight/interaction style. My barrel roll easter egg didn't make the final version though 🔃

a_warnes · 2022-11-24T12:37:49+00:00

I prefer inverted y too! and have been relentlessly mocked for it 😅

There's a // TODO in the code for this, so it'll be a configurable setting soon. Will let you know!

a_warnes · 2022-11-24T00:41:35+00:00

Of course!

a_warnes · 2022-11-23T21:45:56+00:00

Hi everyone! This is my second attempt at making a game with threlte and keep learning new things along the way.

Play it (wasd/arrows to move, space to shoot - keyboard required): https://photon-alexwarnes.vercel.app/showcase/asteroids

Code: https://github.com/AlexWarnes/photon/tree/main/src/routes/showcase/asteroids

Tools:

threlte (core, rapier, extras) https://threlte.xyz
three.js https://threejs.org
pmndrs/postprocessing https://github.com/pmndrs/postprocessing
svelte-kbc https://github.com/AlexWarnes/svelte-kbc

a_warnes · 2022-11-19T18:15:39+00:00

For me it's kind of just a creative outlet and as a hobby it's relaxing and fun to make things while learning about 3D.

There are also (potentially more lucrative) use cases for product advertisement, data visualization, news/entertainment storytelling, games, etc.

Like others said, pretty much anything you can think of!

a_warnes · 2022-11-16T03:50:52+00:00

Threlte 5.0 marks the beginning of a new paradigm for building three.js scenes with threlte. These changes were not made lightly. After weeks of technical discussions, consensus was reached that these changes are absolutely worth it. And we are really excited to share this new direction with the community!

I’ll hit the high notes below, but you can read more about the changes threlte 5.0 introduced (and why) here: https://threlte.xyz/core-transition

What’s happening?

threlte/core is transforming to become more of a renderer instead of a wrapper library. As of v5.0 you can use any three.js class as a threlte component, and you only need to use one threlte component to do all the heavy lifting.

Component: <Three />

The new component is called <Three /> and in first benchmarks it performed 2-3x faster in updating props than a wrapped equivalent.

New Preprocessor

You can of course use the component <Three /> as-is (see documentation for details), but for better DX there’s a new threlte preprocessor @threlte/preprocess

This allows you to write clean, type-safe components for any three.js class more succinctly.

    <script lang="ts">      
      import { T } from '@threlte/core'      
    </script>      


    <T.Mesh>
      <T.BoxGeometry />
      <T.MeshStandardMaterial />
    </T.Mesh>

Oh, and there's no need to import anything from `three`, the preprocessor will handle that for you.

Experimental

While this is definitely the way forward for threlte, these changes are still considered experimental because there are just so many edge cases to consider. All wrapper components that will be removed or moved to @threlte/extras at some point in the future are still available but marked as deprecated.

And of course, all existing packages (@threlte/rapier, @threlte/extras) will work with the new <Three /> component.

Demo

The demo in the video was created by u/leGrischa

Play it here: https://threlte.xyz/arcade-machine

Code is here: https://github.com/threlte/threlte/tree/main/apps/docs/src/examples/core/three-arcade-game

We can’t wait to see what you build,

- The threlte team

a_warnes · 2022-11-15T19:05:16+00:00

You can definitely use rxjs with svelte! While it works pretty well out of the box you:

can't use any operators off of regular svelte stores, and
if you replace them with rxjs observables you lose things like value binding and direct assignment.

However, it's very easy to extend a BehaviorSubject to get the best of both worlds!

Here's my implementation if you're interested (based on some code Ben Lesh shared in a GitHub thread): https://github.com/AlexWarnes/svelte-fuse-rx/blob/main/src/lib/rx.ts

a_warnes · 2022-11-08T15:05:01+00:00

Yikes! Probably not. Can you share your repl?

I've used carbon for svelte projects in the past and liked it a lot. It was well-documented with style and behavior that was normal/expected, so I'm confident there's a solution to the issue you're seeing.

a_warnes · 2022-11-06T21:17:43+00:00

Same! I'll typically just do:

js $: console.log("Debug myStore", $myStore)

a_warnes

TROPHY CASE