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

1. threlte

   1 29 2,857 9.9 Svelte

   3D framework for Svelte

   

   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

2. Civic Auth

   www.civic.com featured

   Auth in Less Than 5 Minutes. Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.

   

3. drei

   2 42 8,872 9.3 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.

4. A-Frame

   3 109 17,003 9.7 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/

5. threlter

   4 1 86 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

6. react-three-a11y

   5 7 578 5.9 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

7. CodeRabbit

   coderabbit.ai featured

   CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

   

Suggest a related project