A-Frame VS drei

I like it. It is a perfect framework for my smart RSS reader and my image sorter where I want to do some simple things like putting up modal dialogs, implementing multiple-stage selects, combo boxes, things like that.

React can handle apps with much more complex state and do really amazing things like

https://aframe.io/

but it is overkill for the common form applications it is commonly used for.

Cool project!

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

[1] https://aframe.io/

I looked at it seriously for content authoring but gave it up.

The big problem is you cannot import images, textures, 3-d models and such from ordinary tools. You have something like constructive solid geometry to work with but only so much and there is a slider you can use to set the number of players and the more players the less geometry you can use.

I want to make worlds based in photographs (particularly pano and stereo) and art. McDonalds needs to put a Coca-Cola logo on the side of the cup. Either way it is a non-starter.

HW supports collaboration (more than one person shares the world) but https://aframe.io/ lets me make the content I want. If I have to choose one or the other I am going to pick the second.

My take on Meta Quest is that it seems highly successful as a gaming environment based on an app store but is skews towards single-player experiences. Like a lot of AAA games, the excellent Asgard’s Wrath 2 has some multiplayer tacked on but it is all meaningless like leaderboards and the occasional ghost that shows up in a procedurally generated dungeon.

Of course, Meta wants to make multiplayer experiences but somehow they just can’t do it.

... I remember inventing signals circa 2005 for a knowledge graph editor I worked on in GWT back when I didn't care about knowledge graphs. Not long after that I was using similar concepts to develop a complex Silverlight decision support application for sales territories.

I'm still a little appalled that people have forgotten how to make HTML form applications like we made in 1999 and frequently use React for things that don't really need it. React has, I think, one of the most elegant methods of implementing a widget set ever invented (sure beats XAML, FXML, Visual Basic, etc.) but it doesn't support a real answer to maintaining application state that would be adequate for applications as complex as RIAs made by early adopters in 2005.

My favorite use for React is

https://aframe.io/

which works like a cross between VRML and Unity Framework. Here you can easily build a virtual world that people can experience with desktop, mobile and VR headsets. Something you can't do with HTML forms!

I have a few side projects based on HTMX but I am pretty sure we will see something like it but better soon. In particular back end frameworks need to be updated for the new reality. Often you have a "component" like a dropdown box which can either be drawn as part of a bigger page or updated on its own and you really need some way you can reuse the HTML template for those purposes and hopefully also reuse associated code that does database lookups and such.

A lot depends on what kind of app you want to build.

For my current side projects I am interested in two kinds of technology.

(1) ML-enhanced apps that involve sorting and classifying content. Here I am drawing everything in the back end and using HTMX to partially update the screen to, for instance, create modal dialog boxes. The point here is that I want to quickly add new UI tasks and it will not be so quick if a front end build process is involved. (Notably in my system you can roll out a new task on the back end without reloading the front end)

My back end is Python which I am souring on. The basic problem is that it does not have threads. So if I have a 1GB ML model and a celery with 32 processes I could waste memory with 32 copies of the model. There are ways of working around all this but if I was just using Java, one copy of the model could be shared by any number of threads. Java doesn’t have the ML libraries though.

The general principle here is that the vast majority of React apps are just ordinary form processing apps that could be developed using the methods we used back in 1999 and seem to have either forgot or never learned (if we are young.). You could make the case that DX and UX were better then.

(2) Virtual reality applications using

https://aframe.io/

here there is no back end. With these tools you can make a world that is browsable with an ordinary web browser but put on a VR headset and you are there. This is another counter to the boring React app because it is something you could never do with an frontendless site.

Meta Quest also has full support for WebXR which lets you bypass all the app store BS. You can use this framework to make worlds visible on most XR headsets as well as desktop and mobile

https://aframe.io/

My understanding is that Apple is making excuses about being slow to support WebXR.

Meta Quest. It even runs on Android. For that matter, so does Magic Leap 2. If they deign to do so all the "usual suspects" who make Android phones could make Android-based VR headsets.

As much as the media has been obsessed with the train wreck that is Horizon Worlds, it's a well kept secret that Meta Quest has an app store that works like the app store on a game console. You can even sideload phone, tablet and TV apps and they "just work" most of the time.

There is no working "metaverse" and even meaningful multiplayer games are thin on the ground, but no shortage of good single-player games and what I'd call game-adjacent apps.

It's little recognized that XR apps are highly portable because they are almost always based on portable frameworks like Unity. In fact, just about every XR headset supports WebXR which makes it outright easy to make web-based virtual worlds

https://aframe.io/

these work with desktop, phones and tablets as well as most of the AR and VR headsets. All it takes is that you "think different" and choose to live life outside the app store.

WebXR is pretty amazing. You can make a site with

https://aframe.io/

which can be navigated with a browser on desktop and mobile. Using a VR headset you can give permission and… you’re in the world! It’s like one of those kids TV shows where people can jump into the world of a book.

With WebXR you can make applications that run on Meta Quest, Magic Leap 2, Hololens 2, PCVR and other platforms. It kinda drives me up the wall that so many people are hung up on Apple because AVP competes with quite a few different platforms that are all pretty similar and if this kind of thing catches on you’d better believe people will be porting applications between them…

Let's start by adding the basketball to our scene. We'll use the useGLTF hook from @react-three/drei to load our model. You can find everything drei has to offer on the github of the project, don't hesitate to go on the documentation if you want more explanation about what we use!

In React, there are different libraries for rendering 3D. In this article, we will focus on how to use the Three.js Library, React Three Fiber library, and the React Three Drei library for creating 3D objects.

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.

the shader is here if you want it in vanilla https://github.com/pmndrs/drei/blob/master/src/core/Outlines.tsx though keep in mind it needs some additional work to support skeletons and instances, that's the code in the layout effect.

the eco system gives you so much freedom, especially when it comes to properly align, display your models, and to make them look nice. there are dozens of components for staging, lighting, soft shadows, you would miss out on all of that https://github.com/pmndrs/drei

there are more pain points than can be enumerated. i think you should take a look here https://github.com/pmndrs/drei and pmndrs in general. also the eco system it has covered so far.

there's a whole eco system around three in react and next. it starts with react-three-fiber, drei has tons of helpers, and then there's three-next for when you need 100% lighthouse, persisting canvas across routes etc.

Definitely ThreeJS and specifically React Three Fiber. React Three Fiber is an amazing wrapper around three that greatly reduces boilerplate. And because of how modular react is, the community has grown massively. With lots of helper components in the Drei library, and amazing examples in the author's Twitter. The Codesandbox is also a goldmine of example. And one of the best-produced courses by Bruno Simon to help you get started. He is the creator of this famous portfolio site.

I picked the stack I did to expand upon my skill set. In particular, I wanted to brush up on react-three-fiber, react-spring & drei.