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
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]
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.
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.
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
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.
Cool project!
For those who prefer a more vanilla approach, A-frame [1] is nice.
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.
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.
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.
I love Threlte! My company uses it and it is remarkably clean & clear. Fantastic OSS project
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.
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-...
Oh neat, kind of like a modern VRML.
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?
Black screen on Firefox
(Chrome/Windows) All I saw was a black screen the second time I loaded the website. It loaded properly when I refreshed.
Very nice, I think I'll find use for it.
This reminds me of VRML.
Super cool!
Accessibility??
cool
I get the appeal of this stuff from an aesthetic perspective, but it's woeful from an accessibility standpoint and it makes your website completely unusable on older computers and not-that-old mobile devices.
Cool, but use with caution. The usual warning for graphics-heavy web stuff.
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