the example seemed slightly misconfigured with two imports directly referencing a three namespace… give this a try…
in the example shared above there’s also now polyfills included in the module-shims.js file which allows import maps to be compatible with almost 100% of browsers, although import maps are pretty much brand new to browser specification, this is going to be the newschool way of doing things in the browser (build tool or not) as demonstrated in all of the official three.js examples… es6 modules are the way forward like it or not especially once external import maps are supported and can be generated from a list of dependencies automatically
it is not all-in-one build, more like most-in-one build, since some parts (3D model loaders) were always in separate files. but yes, it is enough to run procedural stuff and apply materials / textures, see this fiddle.
So I googled what a polyfill is, and what a programming shim is, to give me an idea what those terms stand for.
Anyway, now that Microsoft has switched the Edge browser to the Blink rendering engine there are effectively only two major rendering engines left: Google’s Blink and Mozilla’s Gecko, and my target audience will be using either of those two. (Hang on: I just checked the ‘can I use’ information of Apple Safari; support for import maps is very recent for Apple Safari. Gosh.)
On why I am keen to scale back:
when I start using a tool I always get stuck. The more versatile the tool, the more opportunity for things to not work (more ways to get stuck).
It always takes me a lot of googling and digging though forums to find things to try. Eventually I get to the point where I need to be, but man! it’s always so much digging.
(Another example: when I mess up the javascript there is the browser’s developer tools. With the Chromium browser: the developer tools console points me to the line of javascript with the syntax error. I am very much dependent on that troubleshooting tool.)
I gather that for the three.js developers the setup with import maps will be the most effective setup. But I’m not a developer, I’m an end user.
When a technology is new there will be less resources around for troubleshooting. I’m very much dependent on resources for troubleshooting.
For local development, using a localhost webserver: using an all-in-one build of three.js will be a robust setup, it would appear.
Unfortunately, it is not useful. Actually, it is very far removed from what I need.
My existing workflow is that I am using XAMPP as localhost webserver. XAMPP ships with PHP, so that is already covered.
As far as I can tell the setup used in that description is usable only for playing around on a single computer. I don’t see a path to deployment to a web hosting provider.
What I need is a setup that slots in with my existing workflow, and that creates files for deployment. I am looking to make three.js rendered visualizations available on my own website.
So: it’s hard to see how you could possibly think the case you pointed to would be in any way useful to me.
Here are my 2 setups, I will detail my xampp way 1st.
1. PHP, MySQL & JS/TS Projects (where the JS/TS needs the web server)
Open xampp apache config and set path to a new directory for your project
project_name/server/http_docs
Create JS/TS project folder
project_name/frontend or project_name/component_name
I have webpack build a watch (not hot reload, memory compiled) JS/TS project to a specified directory in: "project_name/server/http_docs/includes/js/project_name_bundle.js
I have 2 commands setup: npm run dev (dev build and watch in dev mode) and npm run build (build prod to same folder)
Run apache and mysql
Open VSCode on your frontend folder, run cli command NPM RUN DEV and open PHPStorm on folder project_name/server (so you can simulate having access to the folder below http_docs)
You then use 127.0.0.1 or localhost as usual and open dev tools console and modify the js/ts project as and when needed.
NOTE: This will also keep PHPMyAdmin intact.
This is all just webpack setup and htaccess on xampp.
2. JS/TS Projects (where the JS/TS doesn’t need the web server)
Just setup a webpack project that builds dev/serve and prod build to a dist folder. Then copy it over to the server folder xamp uses when needed or make webpack only build to the xamp folder when you use npm run build. web pack run serve aka server would run on localhost and a specified port. so just open a browser there and use dev tools console to debug.
Thanks for taking the time to describe your setup.
To give you an idea of how small scale my needs are: the 3D visualizations I want to create (reimplementations of simulations created on another platform), will have a couple of elements each. For instance: a sphere (with meridians and latitude lines), and a sphere (or dot) in motion relative to that sphere.
Compared to other three.js projects that is peanuts, of course. The material I want to (re)create has to be interactive, so it needs real time rendering. That is why I am looking at the possibility of working with three.js
Big projects need auxillary tools, but for my small needs I am keen to use only a minimum of tools. I figure: the larger the number of tools, the more opportunities for things to not work.
I googled “JS/TS”; I gather that stands for Javascript/Typescript.
I haven’t used webpack before, I have no previous experience with setting up that type of automation.
I only have a couple of PHP commands in use; and that little bit of PHP has not changed for years now. In that sense my PHP editing requirements are zero.
Given the simplicity of my website: there is no database; no usage of an SQL.
I use Notepad++ as code editor.
To give an idea of what I make:
While most of the interactive diagrams on my website (2D graphics library: JSXGraph) have a couple of elements only, a few of them are quite elaborate. Diagrams 3.1, 3.2 and 3.3 on this page of my website: Energy-Position equation
The equations: when the visitor zooms in on the page the equations scale with the font size. (I don’t use MathJax rendering.)
The 3D simulations I am keen to recreate are Java simulations.
Example: Inertial oscillations
The page shows a screenshot of that simuation
RE: Small project, no need for complex setup
It’s just the webpack thing you need to jump over, one you have that template in place you wont look back. If your working with typescript then you should be using webpack to help / cleanup + with the transpiled code the typescript library spits out.
There lots and lots of example of this on the web, just a quick google for webpack typescript template or webpack javascript templte, or search github will lead you to many projects setup for it.
RE: Multiple little components using webgl on a single or many web pages
I would just make a folder for each component and use example 2. You can have webpack move the build files to the xampp folder of choice or just copy the dist folder contents over as and when you see fit.
RE: PHP, MySQL, Backend tech
It doesn’t really matter what server or tech you need, if your using a server in the way you described (xampp) then this will just work, same for a node express project, bit different if I was working with containers (docker etc), but nearly the same. Same for .NET however I’ve not touched .NET or a windows server in many years.
My recommendation
Download VSCode and use that instead of Notepad++ (While I love it also, when it comes to JS and TS editing it’s nothing in comparison).
Try and get a webpack hello world template setup. Get the following commands to work:
npm run dev
This will watch your code for changes and re-compile automatically.
npm run build
This will build a production version of your code
npm run serve (or as I like to name the command npm run server)
This will run a web server for HTML,CSS & JS only which will hot reload on JS and CSS changes.
Once you work that out all of your problems will soon be answered.
I try to keep SPA (Single Page Technology) libraries out of anything I build and only use them when work/clients request them, React, Angular and Vue are just the re-invention of the wheel. But if your already using them, then you already have a build setup npm command in package.json
Examples I found from a quick google:
This is a bit overkill
But see his package.json, the usual npm run (script area of the json file) commands are in there, which are run by. npm run dev, npm run …
Here are some more examples, same thing, slightly different way of doing things than what I do but don’t we all have our ways.
Also use ChatGPT, it will spit out fairly decent code snippets on small stuff, just don’t ask it too big or complex stuff or it will go very wrong (it’s not as good as all the hype says it is), you also can’t trust it to be giving you the latest and best way of doing things. But it’s very good to point you in the right direction and to answer questions.
well yes, but import statement is really not that much different - consider this same example but with import - <script …> tag is gone, import statement added.
If you have many components to display on random pages, is it good to have many single projects which display that component or 1 which you can call on by instantiation
let components = new ComponentCollection();
components(htmlDivIdToInjectInto,nameOfComponent);
// add more of the above line to add as many to the page, or any other page
This could save having multiple js files to include for just the 1, and can be included globally throughout the website.
especially once external import maps are supported and can be generated from a list of dependencies automatically