Lorentz Force simulator and game

Hi,

I am a physics teacher, and I would like to share a 3D simulation I created with Babylon.js to visualize trajectories of electric charges at high speed, considering interactive electric and magnetic fields controlled by the user. In the simulator, by applying the fields correctly, it’s possible to accelerate the charge up to 99% of the speed of light.

telaminiatura300200

https://fisicagames.com.br/acelerador/

6 Likes

Muito legal! Always nice to see educators using the power of 3D and games to help teach these concepts to students :slight_smile:

2 Likes

I love this! I made something similar, but for gravity - GravWell. GH repos with Source code -

Pardon the sloppiness, but HTH!

1 Like

Hi, What an honor to have the author of the book ‘Going the Distance with Babylon.js’ here! :blush:
I’ve tested Gravwell, but unfortunately, the controls didn’t work for me.

My main reason for wanting to purchase your book is that I’ve been struggling with setting up Babylon.js with Webpack. I’ve been following the steps in the ‘Babylon.js ES6 support with Tree Shaking’ section, but I consistently encounter errors :unamused: Due to this, I haven’t shared the source code of my projects yet, as I usually kickstart my projects by downloading scenes from the playground and made it with cowboy programming way. :sweat_smile:

1 Like

What an honor to have the author of the book ‘Going the Distance with Babylon.js’ here! :blush:

:pray: All the props to you and the other folks in the community who consistently surprise and delight me with the amount of passion, creativity, and talent on display!

controls don’t work

The keyboard controls aren’t enabled until after you click “Resume”. Hopefully you weren’t trying on an iPad or Android device; it was never set up for touch controls as the memory needs are rather high.

I’ve been struggling with setting up Babylon.js with Webpack. I’ve been following the steps in the ‘Babylon.js ES6 support with Tree Shaking’ section, but I consistently encounter errors :unamused:

That sounds really frustrating! I know how frustrating WebPack can be to work with at times. What sort of issue are you seeing with your project?

I appreciate your interest in my book! If you happen to be working through Chapter 3, the discussion here contains some troubleshooting info and steps to take if you run into trouble with building the source for Space-Truckers.

Basically, WebPack made some changes after I wrote the chapter, and that combined with some errrhm sloppy reviewing on my part left the chapter with some confusing and missing sections.

If you just want to see what a working webpack with ES6 tree shaking project looks like, check out the develop branch of Space-Truckers. It’s only slightly out-of-date from the latest version of WebPack but hopefully it’s a good reference resource for your work!

1 Like

My issues:

Following steps here: Getting Set Up | Babylon.js Documentation

Works well! But final size (total dist folder): 36 Mb! :slightly_frowning_face:
and project folder: 284 Mb, 17863 files. :sweat_smile:

Following steps here: Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation

After: - Run npx webpack serve to check result in http://localhost:8080/
a) Browser: only the text: Cannot GET /
b) Console: Failed to load resource: the server responded with a status of 404 (Not Found)
c) Terminal: ERROR in ./src/index.js 9:0-70 Module not found: Error: Can’t resolve ‘@babylonjs/materials/grid/gridMaterial’ in C:\Users.…\steps-setup-es6\src’

Following: Using Vite with Babylon.js | Babylon.js Documentation

Works well, and final size (dist): 3,62 Mb
Vite is great, because "We can install our necessary packages once in the root folder, and reference them freely in the code inside our project subfolders*

But, with a simple import <script…> by copying the CDN files, it’s only 6 MB, without additional files (node_modules) in local storage or terminal commands.

Following: GitHub - RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely.
Works, and end size (dist folder): 1.3 Mb

About steps in Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation

I will suggest adjusting the texts of steps 5. and 6. as follows:

  1. Run npm install @babylonjs/core and npm install --save-dev @babylonjs/materials
  2. Create Folder public in MyAwesomeApp and create index.html file in public as described in First App Section below
1 Like

One of difficulties I recall running into was that the dev and prod build configurations wouldn’t seem to work right with each other in regards to static assets and such.

How are you configuring the dev server, and does it seem to work right in a production build (e.g., start or drop the /dist folder of webpack output into a web host)?

I programmed the lorentz force simulation with JavaScript Constructor/Prototype Pattern (old school) :cowboy_hat_face:, separated into different .js files. I do a manual build :wink:, gather all the files and minify.js and compress :face_with_monocle:. Then I manually upload it to the web host. JavaScript Constructor/Prototype Pattern has better performance :racing_car: (cpu time) to instantiate many objects than ES6 classes :turtle: and import/export modules .

1 Like

But, if I were to use a build tool, it seems that Vite is an excellent option, as it is fast. But, it can make the app more slow when loading in the browser than webpack.

1 Like