return to table of content

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

talkingtab
10 replies
17h35m

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
7 replies
17h24m

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

I'm curious to hear about the changes.

talkingtab
6 replies
14h52m

I am not sure this works - it is an exploration of a concept, not a conclusion.

A web app has two parts - navigation and tasks. What if I make it NAV forward? With google maps (or world) you get a picture of the whole world and you can easily navigate anywhere. Zoom in to 1512 Shattuck Ave, Berkeley, CA. Now zoom way out and go to New York City.

Why not build a tree map of the all tasks and places in you app that duplicates that map experience. When someone arrives at the website they see a tree map of the whole site. They can find a location: post in the group or add to the calendar or ... And perhaps after first visit you add a new place in the tree map for recent places or favorites.

When you find the place, there is a very limited, task specific overlay. Record your post then drag it onto the map? Write an email then drag it.

Question: does {grid, flexbox, floats, bootstrap, tailwind, material ui, etc} - present a better user experience than threejs?

Question: are there some places in a website (like navigation) that would be more effective with threejs?

And remember the big reason we don't use threejs. SEO [edit typos, clarity]

andoando
2 replies
14h20m

I dunno about full 3D, but I can see a lot of use cases for using perspective in 2D for enabling 3D navigation/viewing of objects.

I was working on a proof of concept log viewer for example. Say each session has 10 logs, and esch of them is success, failure or netural. Instead of having something like

Session 1 - log one, log 2, log 3... Session 2 - log one, log 2, log 3...

I rendered all the logs in a session as being "behind" eachother, with a slight x,y offset and gave them colors, which you could then scroll through in the "z" axis. It's pretty nifty way of conveying more information in the same amount of space.

talkingtab
1 replies
5h12m

I agree this is an important issue/question.

MY prototype tree map nav element is 2D - a plane. You can scroll around and zoom in. It seems good to me. On the other hand, there is a level of complexity that I still do not really understand. What about a cube with a different tree map (or other?) on each face. A rotatable cube does not break the paradigm. (Or a dodecahedron for that matter.)

Another thing I am thinking about is how will the user transition "into" a place? For example, a user finds email on the tremap and now wants to send one. What is the transition to writing an email? The kind of transition is the part I am curious about.

I personally find the concept of going "into" a place most appealing. It makes intuitive sense to me. I zoom into a building in NYC and click on it and I am now "in the place". But the tech part of me says "oh just do an overlay, make the canvas div hidden and put up a little text entry form". Does it matter?

I suspect but do not know that keeping the paradigm => going into a place on the map => would be more engaging, comprehensible, user friendly than suddenly breaking the illusion. But I am just guessing.

[ And did you look at the image gallery example?

https://lx2h8.csb.app/

clicking on a panel takes you up close. It is pretty easy to add a feature so that when up close another click goes "into the panel". To a room of other panels or objects. ]

andoando
0 replies
1h33m

I was trying to find that gallary one earlier but couldn't find it. Looks neat!

What I am thinking of its more of a mix of a traditional website with some 3D elements.

Every navigation doesnt have to be 3D. For my example, I just put keyboard events for scrolling through the different axis but the information for each logs below the scroller still shows it a regular table format once selected

meindnoch
0 replies
4h50m

Yes. Websites should be like 3D games. And then when you first visit a website, you could exclaim: "It's a Unix system! I know this!"

k1zmt
0 replies
14h37m

I think you are comparing apples to oranges.

99% of websites don’t need threejs. But there’s a segment where it is a very useful tool.

For example any serious shop that provides appliances and furniture customization.

The same goes to car manufacturers. Even premium brands fail to deliver a nice immersive customization experience. And this is despite having all models with excellent quality due to the manufacturing and design.

The story is old as the world: always use the right tools for the job. Sometimes it is old school HTML, sometimes it’s ThreeJS and web assembly.

lastdong
0 replies
12h25m

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
0 replies
38m

These are great links

andoando
7 replies
18h4m

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
6 replies
17h56m

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

phero_cnstrcts
3 replies
17h33m

My portfolio site was made with it https://perprogramming.com/

There isn’t much content though.

owlninja
1 replies
15h55m

I think this is awesome! A very cool corner of the internet that is different and all yours.

phero_cnstrcts
0 replies
11h34m

Thank you :)

agileAlligator
0 replies
4h24m

That's way cool man. I love the aesthetic.

andoando
1 replies
17h49m

https://www.reddit.com/r/sveltejs/comments/11y8flg/i_made_a_...

https://github.com/ando818/chess2

Codes probably bit messy but you can see the rendering of the board and pieces here. https://github.com/ando818/chess2/blob/main/src/routes/Board...

I found some 3D model files that came with the board and pieces in one gltf file, which threlte makes easy to extract out the nodes. Svelte reactivity also makes it super easy to move/position/scale/animate things, its just plain JS!

I was going to make a "Chess lounge" in the next iteration where you could walk around and watch other people playing in a cafe, but my interests moved on.

langcss
0 replies
15h57m

The flat white (?) looks great. Looks exactly how I make it, and I even have a cup like that.

legrisch
4 replies
12h15m

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
2 replies
10h6m

Thanks for your work! :)

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

legrisch
0 replies
2h39m

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

Sateeshm
0 replies
6h8m

I've used Threlte in many projects. It doesn't have everything rtf has, especially the drei stuff, but it's getting there slowly.

mrdoob2
0 replies
2h24m

Loving the editor!

ryukoposting
3 replies
15h48m

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.

bhaney
2 replies
15h43m

makes your website completely unusable on older computers

I agree with the sentiment and generally advocate for lighter and simpler webpages, but the 3D animations on this particular landing page were perfectly smooth on my 12 year old macbook. I was impressed, since these kinds of heavy animations usually run like crap for me.

jasiek-net
0 replies
11h56m

Same on my old iPhone - I was impressed how smooth this landing page works!

jasiek-net
0 replies
11h56m

Same in my old iPhone - I was impressed how smooth this landing page works!

perilunar
2 replies
14h12m

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
0 replies
12h5m

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
0 replies
8h55m

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.

th0ma5
1 replies
11h42m

Accessibility??

janosdebugs
0 replies
11h31m

Could you please elaborate on your comment? Do you mean you tested this tool and it's not accessible, do you mean you are concerned about the tool not being accessible, or is there a problem with the website linked? The reason I'm asking is because it is possible to make a 3D website accessible and I'm curious if you have any more info on this particular tool.

prophesi
1 replies
17h2m

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
0 replies
12h22m

using Svelte/Threlte's advantages to its fullest.

what are they, in your words?

keyle
1 replies
18h26m

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
0 replies
2h12m

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

Sateeshm
1 replies
6h10m

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
0 replies
2h25m

That is very kind, thanks so much :)

PedroBatista
1 replies
18h21m

Black screen on Firefox

all2
0 replies
17h46m

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

LatticeAnimal
1 replies
18h21m

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

legrisch
0 replies
2h23m

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
0 replies
15h55m

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.

thelastparadise
0 replies
13m

This reminds me of VRML.

smj-edison
0 replies
18h23m

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.

keb_
0 replies
17h11m

cool

gtm1260
0 replies
18h27m

Super cool!

goldielox
0 replies
10h25m

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/

claytongulick
0 replies
17h24m

Cool project!

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

[1] https://aframe.io/

bschmidt1
0 replies
17h20m

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.

SeanAnderson
0 replies
13h39m

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

CountHackulus
0 replies
16h52m

Oh neat, kind of like a modern VRML.

Cloudef
0 replies
18h26m

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