Show HN: 3D Framework for the Web. Built on Svelte and Three.js

• threlte

  26 2,142 9.9 Svelte

  3D framework for Svelte

  

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

• drei

  42 7,508 9.4 JavaScript

  🥉 useful helpers for react-three-fiber

  

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 to 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.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• A-Frame

  103 16,230 9.6 JavaScript

  :a: Web framework for building virtual reality experiences.

  

Cool project!

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

[1] https://aframe.io/

• threlter

  1 66 4.8 Svelte

  Race in your browser

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

• react-three-a11y

  7 517 5.0 TypeScript

  ♿️ Accessibility tools for React Three Fiber

  

Thanks! Threlte is "just" offering a declarative way to express Three.js. If you know how the `` 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

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project