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]
I'm curious to hear about the changes.
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]
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.
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. ]
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
You mean like a zooming user interface https://en.wikipedia.org/wiki/Zooming_user_interface ?
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!"
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.
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.
These are great links