3D framework for the web, built on Svelte and Three.js

[legrisch]

Hi, I'm the author of Threlte, thanks for posting it! If you want to see what we're currently up to, here's the talk I just presented at the Svelte Summit Spring[0].

In essence, we're busy with two things:

Making Threlte Svelte 5 ready. It's a bit more work for us than for most Svelte libraries/frameworks out there since we poked into the component internals a lot, for example to make event handling more effective or run Svelte transitions on components rather than DOM elements. A lot of these things are now built into Svelte 5 and others (like transitions) we have to set aside for the moment.

The other thing we're working on is the Threlte Studio. I'm not sure how to best describe it yet, but you could say it's an editor that let's you visually modify your code. It's extendable, so you can adapt it to your workflow. We're really curious how far we can go with this, so to stay tuned, feel free to join our discord[1] or follow us on x[2].

[0] https://www.youtube.com/live/gkJ09joGBZ4?si=KX9ZwfWTixj6r55Y...

[1] http://chat.threlte.xyz

[2] https://twitter.com/threlte

[chompychop]

Thanks for your work! :)

Could you tell us how Threlte compares with React-Three-Fiber in terms of feature parity and performance?

[spxneo]

No problem! I just happened to finish the Svelte tutorial yesterday and I was curious if Three.js could be brought to Svelte.

Svelte was so intuitive and I naturally thought 3D environments could be efficiently managed was when I googled "Svelte + three.js"

Coming from PlayCanvas, Babylon.js I'm super excited to see the development of Threlte Studio. What I like about DREI is that it lays out everything like a directory but I was reaching for the familiar "studio tool"

what is the ETA for Threlte Studio?

[mrdoob2]

Loving the editor!

[talkingtab]

I have been using react-three-fiber and react-three-drei - the react version of this project. The examples are over whelming and wonderful

https://docs.pmnd.rs/react-three-fiber/getting-started/examp...

One of my favorites is the image gallery. I modified this so that clicking on an image take you into another room (gallery).

https://github.com/pmndrs/drei is a collection of examples and helpers.

Most impressive to me is the one using a GLTF model, video textures on text, reflections and more. A standalone version is

https://bfplr.csb.app/

But even more impressive is the sandbox showing the not-very-many-lines-of-code at

https://codesandbox.io/p/sandbox/ground-reflections-and-vide...

A lot goes into putting a layer on top of threejs and I have run a fair number of head scratchers. But still the potential is huge. Using threejs has completely changed the way I look at website development. So if you are a svelte person I would definitely look into this. [edit for grammar]

[jonahx]

> Using threejs has completely changed the way I look at website development.

I'm curious to hear about the changes.

[lastdong]

This is amazing! definitely giving me Yugop vibes. I totally see these tools shaping a whole new style of online media. It certainly has the potential.

[cnotv]

These are great links

[prophesi]

Wow, I was poking around and found this demo app[0][1] showcasing Threlte v6. The Technical Outline, particularly the explanation of the simplified car physics, is enlightening. It's essentially a Trackmania clone complete with a track editor, using Svelte/Threlte's advantages to its fullest.

[0] https://github.com/grischaerbe/threlter

[1] https://threltemania.xyz/

[swyx]

> using Svelte/Threlte's advantages to its fullest.

what are they, in your words?

[perilunar]

This looks interesting.

If you want to do declarative 3D and components without Svelte and React though there's always A-Frame or X3D.

I wonder if anyone really wants declarative 3D though. X3D/VRML has been around for 25+ years, and A-Frame for 8 years, and neither have become very popular (and several other formats came and went). Meanwhile three.js and imperative/procedural 3D generally is doing really well. I'm curious as to why that is.

[legrisch]

Declarative 3D in the form of a framework integration for Three.js is extremely popular and I would argue/assume it's currently the most used professional setup for a Three.js site with the most popular one being react-three-fiber. The declarative nature of these frameworks allows for things to be easily reused which forms the basis of an ecosystem.

[dorkwood]

Frameworks like react-three-fibre are popular because beginners can assemble existing components without knowing much JavaScript at all. It's common to see influencers in the space say things like "build this configurator with only 6 lines of code!" This speed and purported ease of use is what makes these tools so popular, not the declarative nature of the code.

[goldielox]

Threlte/Sveltekit/Tauri is a cool combo. Recently I tried out Threlte and this is what I've come up with, it's not the best optimised and all models are free on sketchfab, helps having a modern pc for my 3d game environment

https://crusaders-ashy.vercel.app/

[andoando]

Ooh love both Svelte and Threlte. I made a 3D chess board set in a park environment integrated with lichess and everything was remarkably easy.

I think a lot of UI could benefit from use of 3D.

[LanternLight83]

I for one would love to see what that looks like, even just an example use of these libs c:

[claytongulick]

Cool project!

For those who prefer a more vanilla approach, A-frame [1] is nice.

[1] https://aframe.io/

[_akhe]

Syntax is really nice, I'm just as impressed as the first time I saw Three.js as JSX (via react-three-fiber). It's nice to know I have this option if I ever use Svelte + Three.

[smj-edison]

Dang, I appreciate how smooth the scrolling is! I feel like so often when a webpage has scroll-based animations they stutter and lag. I didn't realize how nice the effect could be when it actually ran at my monitor refresh rate.

[Sateeshm]

Been using it for about a couple of years now. Everytime I look at the docs, there is a new extra. And legrisch is wonderful. Discord is quite active. Amazing toolkit and can't wait to see where it goes.

[legrisch]

That is very kind, thanks so much :)

[LatticeAnimal]

I love Threlte! My company uses it and it is remarkably clean & clear. Fantastic OSS project

[legrisch]

Threlte loves you too <3

If you want, feel free to contact me on Discord[1] to provide feedback on how you use Threlte in your company, I would greatly appreciate it.

[1] http://chat.threlte.xyz

[xyst]

Reminds me of the flash website days but much more smooth in terms of animations and (hopefully) more secure!

I am tempted to re-write personal site using this.

[v1sea]

Looks promising. It would be nice if the XR components exposed more configuration options. For example I don't see a way to use the transient pointer of the apple headset nor the depth buffer of the Quest 3.

[0] https://webkit.org/blog/15162/introducing-natural-input-for-...

[1] https://www.w3.org/TR/webxr-depth-sensing-1/

[michealparks]

Hi! @threlte/XR maintainer here. Both of those features should be pretty easy to use with Threlte since the package exposes the underlying WebXR APIs. Here's a repl example with both transient pointers and depth sensing:

https://svelte.dev/repl/add20a88524c4f83aaeecbd7d873e731?ver...

There's likely an opportunity to do some abstraction here since it's a little clunky, but I've been holding off for the moment since these features are pretty new. We could potentially update the docs to make it clearer that this kind of configuring is possible. If you have any suggestions for either abstractions that we could add or more clear docs then don't hesitate, I'm all ears!

[CountHackulus]

Oh neat, kind of like a modern VRML.

[keyle]

Nice, the documentation seems a bit lightweight at first glance. It would be good if it went to show how the home page animation was created and how interactivity could make this framework useful.

Also, how accessible is this content from the perspective of a screen reader?

[legrisch]

Thanks! Threlte is "just" offering a declarative way to express Three.js. If you know how the `<T>` component and its props and event handlers work, you can use the Three.js documentation for everything else.

Apart from that with Threlte I personally practice documentation-driven-development, so ecosystem packages are exhaustively documented. If you're missing something, let us know via an issue[1] or on Discord[2].

Accessibility is a topic we didn't care enough yet to be perfectly honest. Accessibility doesn't stop at screen readers though, it's about contrast, size, colors, motion, reachability, and so much more that we cannot provide and are a consumer topic. Naturally WebGL apps suffer from being practically invisible to screenreaders. There are workarounds[3] but essentially this has to be solved by consumers of Threlte (devs) and hopefully by browser vendors at some point in the future.

[1] https://github.com/threlte/threlte/issues

[2] http://chat.threlte.xyz

[3] https://github.com/pmndrs/react-three-a11y

[PedroBatista]

Black screen on Firefox

[all2]

Also Firefox (v124.0.2), no black screen.

[SeanAnderson]

(Chrome/Windows) All I saw was a black screen the second time I loaded the website. It loaded properly when I refreshed.

[Cloudef]

Very nice, I think I'll find use for it.

[thelastparadise]

This reminds me of VRML.