legrisch's comments

Thanks, I didn't know it's already up. I guess the most interesting part and what sets Threlte apart is the Threlte Studio which I dive into at 37:00, here's the link: https://youtu.be/Fn0_8iZGkLk?t=2223

The migration guide is indeed pretty extensive. In the end we get feedback from users that the actual migration is not as awful as it seems to be. A lot changed under the hood but the main APIs stayed the same. The changes to `<Canvas>` for example are changes that you usually do once in the whole app. Other changes just cater to Svelte 5 having a different API.

I get your sentiment though. I'm always for as little dependencies as possible. If you rely on Three.js in the first place, you're going to need to update regularly anyway since pretty much every version is a major version. Thanks for your feedback!

Thanks for pointing that out. Unfortunately this post is out of my control, otherwise the title would have already been very different :)

Hey HN, thanks for posting. My name is Grischa, I'm the creator of Threlte. Here's a blog post of what's new in Threlte 8: https://threlte.xyz/blog/threlte-8

Threlte is a renderer and component library for using Three.js in a declarative and state-driven way in Svelte apps. It provides strictly typed components for deep reactivity and interactivity out-of-the-box.

It's suffice to say it was a whole lot of work and a great challenge to make use of Svelte 5. A lot of the important parts have been rewritten to make use of the new reactivity model, some APIs have been aligned with conventions introduced by Svelte 5 and type safety has been improved all over. Also this release includes the first alpha release of Threlte Studio which is what we call a spatial programming toolset.

If you're looking for an migration guide, it's here: https://threlte.xyz/docs/learn/advanced/migration-guides#thr...

"It is not accessible" is not a fair statement. Accessibility goes way beyond "it's not readable by a screen reader" – and even that is in my opinion rapidly changing with AI accessibility tools. See my other comment[0] that touches this topic briefly. Sure, we want and need to provide better solutions, but a lot of this is done by developers and there's little we can do about that.

[0] https://news.ycombinator.com/item?id=40212705

I can’t say anything specific, but it will be available only with Threlte 8 as it’s depending on Svelte 5. Threlte 8 is the focus of our development but we of course want to wait out the official release. Threlte 8 is already published as `@next` if you’re feeling adventurous and the Studio will follow that in some days :)

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

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

That is very kind, thanks so much :)

React-three-fiber was and still is a huge inspiration and I can’t thank Paul and the other contributors enough. Afaik they pioneered this relationship between a frontend framework and Three.js.

In essence, react-three-fiber and @threlte/core offer the same base functionality, which is to offer a declarative Three.js API for an established frontend framework. The technical approach however is fundamentally different: React itself provides an API (called a react renderer) to "transform" JSX into any tree-like data structure, whether it be a Three.js scene graph, a PDF or mails. Svelte (as of now) doesn't have that, so we had to get a bit creative and make heavy use of the Svelte Context API.

With Threlte 6 we introduced the Plugin API[0] which you may use to inject code into any component that instances an object. It's a very powerful feature that we use for many of the common abstractions in @threlte/extras such as interactivity[1] and which opens the door to more technically interesting and advanced use cases like the upcoming Threlte Studio[2].

On performance: react again works fundamentally different and therefore react-three-fiber is recommending to not use props for fast-changing object attributes[3]. Of course direct object manipulation is faster, as less computation is lost in "interpreting" a prop, but Svelte is generally faster in doing so, so we do not recommend against it – simple apps (which is the majority) totally work with fast-changing props. Starting with Threlte 8 which will support Svelte 5, prop updates happen granularly, so we don't have to apply all props whenever a single one changes. I do want to emphasize that for more demanding apps you would use a pattern that is independent of prop update costs and no significant overhead of react-three-fiber or Threlte would apply here.

In Threlte 7 we introduced a powerful DAG-based task scheduling system[4] that not only solved long-standing flexibility bottlenecks but also is the technical foundation of many interesting future features and use cases such as fixed physics updates (that are still correctly queueing with other tasks), easily scheduling tasks before or other tasks (e.g. running things after a frame has been rendered) or making complex orchestrations of updates across the entire app.

In terms of ecosystem react-three-fiber is of course much larger, that is just the nature of react vs. any other framework. We do however offer solutions for the most crucial things like physics, animation, layout and XR. Our ecosystem is centrally organized in a mono repository[5]. By that we can ensure that changes to @threlte/core properly cascade through all dependent packages. Organisationally speaking, I put effort in making sure that Threlte is run and owned by a team right from the beginning to make sure it's long-lasting and doesn't suffer from a single sight on things.

[0] https://threlte.xyz/docs/learn/advanced/plugins

[1] https://threlte.xyz/docs/reference/extras/interactivity

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

[3] https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls

[4] https://threlte.xyz/docs/learn/basics/scheduling-tasks

[5] https://github.com/threlte/threlte

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.

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

In one of my latest web assignments I needed to implement 3d and wrote some svelte components to drive the three.js CSS3DRenderer. It worked great, but as soon as images were introduced, performance was really an issue. I then looked into Svelte + three.js libraries like svelte-cubed and svelthree and while they work great, I felt that there's room to improve and build upon.

The last week I was busy with developing threlte, a new component library for svelte + three.js. It's based on my previous experience working with react-three-fiber and the short yet very enlightening time working with Svelte, SvelteKit and Svelte Cubed. It's not finished (it never is, right?) but it already is quite useable and even features some things I was missing with the other ones.

- Reactivity as we know it from Svelte

- Interactivity (pointer events much regular DOM elements)

- Color management

- Useful Defaults

- Access to just about everything

- Extendability and clear conventions

- TypeScript everywhere

- Hooks

- Post Processing

- Extensive Documentation

- … and it's pretty easy too.

I hope you like the new kid on the block! I'd love it if you give it a try and provide some feedback Thanks!

Please feel free to reach out to me: email now in profile.

Please feel free to reach out to me: email now in profile.

Please feel free to reach out to me: email now in profile.