I trying to acquaint myself with the ecosystem of tools & different architectures people use to build something full stack. Thanks for introducing me to new tools and helping me develop conversational English to speak “front end.”
REQUIREMENT #2.) I want to make each face of the “polyhedral selector” mouse clickable. When the user clicks a face, it brings up a different screen.
I think I can do this using raycaster (which is part of threeJS, so there’s no new tools needed).
==============================================
ENTER THE RABBIT HOLE OF MY INSANITY HERE…
“Abandon hope all ye who enter here”
Per requirement 1, I’m trying to think this through so I don’t enter an insane rabbit hole that ends in tears and misery.
Today, I’m considering trying to configure threeJS with electron, given the recommendations here (at least as a starting point): Heck of a time with threeJS and electron - #9 by didi_softwares. Maybe that’s the best place to start because electron allows multiple pages and doesn’t lock me into just one - a “single page application.” ???
Does that seem like a solid decision?
I could start adding raycaster functionality of the three project and put off any framework decision making. Maybe some course of action will become clear.
Step 1a.) If you have imported a custom GLTF or .glb from blender, then those files must be placed inside the vite public folder. DO NOT add the public folder name into the path where you load those files in your threeJS code. (This must be some strange characteristic of the public folder.) Vite will include files inside the public folder in your dist folder after you build. (according to this source: glb model is not found after I run npm run build in vite · pmndrs/react-three-fiber · Discussion #2792 · GitHub).
Step 3.) Make a brand new directory and initialize an electron app.
I’m just gonna use a previously created electron app to understand the recommended file structure.
So, I created a brand new electron app in a neighboring directory. I setup with vanilla JS and no typescript and no proxy, with the plugin for the electron updated. I installed/configured it with vite since the threeJS project also has that. The project structure looks like this, side by side with the original three project.
This is a little confusing. i don’t see a dist folder anywhere except in the threeJS project. I think vite makes a dist folder when we setup for production.
React is not complicated, you learn it in a few hours. If you like to learn it from a threejs perspective get three-journey, it contains a full react lesson before delving into three-fiber. It does give threejs abilities it cannot have on its own, but without changing what threejs is.
In vanilla it is hard for people to realise what an eco system means, since they have none. Without an eco system the gap between beginners/intermediates and pros (agencies etc) is always vast. Most people in this space are content with it being a hobby and nothing more. They don’t know that what holds them back isn’t a deeper grasp of threejs but the inability to share. And no matter how much experience they’ve collected, they will be leap frogged by beginners, with little to no experience, pairing three with react.
The configuration might be insurmountable with my limited experience.
I setup react with the other tools pretty easily.
What is the backend on react?
would I setup electron (to make it a Desktop application AND provide nodeJS as a backend) with react as a frontend that renders threeJS?
I think that if you build with react you either use threeJS OR three fiber. They are two different tools. At first, I imagined three fiber as a framework that allowed react to use threeJS. But, that’s not it, is it?
I’m from the diabetes tech forums, so there’s gonna be a lot of cultural stuff lost on me.
People have favorite tools and different opinions. I get that. But, think of me as newly diagnosed and barley able to stay alive in a full stack environment.
We may have to agree to disagree on this. React’s declarative components are a good thing, and obviously successful, and that’s great. But that’s not the only valid definition of an ecosystem, three.js providing a framework-agnostic library is very much by design, and a prerequisite for the success of any given framework-specific ecosystem.
I think that if you build with react you either use threeJS OR three fiber. They are two different tools…
I wouldn’t think of it like that, no.You can certainly use react three fiber, and mix in code that uses plain three.js APIs (i.e. not everything has to be a JSX template). I think the main decision here is simply, do you want to use React, or not. If React suits your project and preferences, then React Three Fiber is certainly the best way to use three.js and React together.
React is a client-side library. You can set up a backend separately, or use it with any of the platforms for desktop development like Electron or NW or Tauri. If you mean a server-side backend (e.g. a shared backend to which many different clients connect) then that’s a separate question from everything else in this thread.
Personally I think the choice of Electron vs NW.js vs Tauri is mostly unrelated to any specific JavaScript library you’ll be using within it. Electron is the old popular option, used widely, but considered big and slow. Tauri is newer, lighter, probably faster, but there will be less help when you get stuck. I know nothing about NW.js.
I’m just trying to get around the hurdles of configuring threeJS with electron. If that was successful, then none of the other things need to be added. That’s how I imagined I would build this at first (before trying to configure three with electron).
NW.js would work, too. If that has nodeJS as a backend (which it might. Might be easier to configure).
That is the point all along. You shouldn’t look at it this way - you create one directory for you project using three.js. You create an entirely separate directory for electron. Electron is a browser. It doesn’t care what and how you serve via it*, it should not be aware* of three or any other frontend library you’re using.
Only your app should have three.js as a dependency* in node_modules. Electron shouldn’t.
Only electron should have electron and express as dependencies in node_modules. Your three.js app shouldn’t.
You code your web app - copy the dist / build directory generated by vite to electron directory - you serve the content by running electron+express (you can streamline and simplify this process as you gain understanding of what is happening and why, but that’s the general idea.)
these are simplified statements, not necessarily true, but fair in this scenario
Thanks a bunch, @mjurczyk, @donmccurdy, and @manthrax. I’m getting there. I got raycaster click-ability running yesterday. I ran it on a different (better) computer and it worked like a dream. I’ll start stitching on an e- backend soon and if I figure it out I’ll try to provide documentation or a video. I have some e- books coming in the mail so I don’t harass you all constantly. I love this project. Its really fun!
Hmmmm… wondering what you mean by that, drcmda. Doesn’t it depend on the nature of the application being built? Perhaps most of the folks here are focused on 3D computer game building and maybe your comment applies to that?
