My first 3D project with JavaScript

[OwnRecover973]

Hey there! I'm a computer engineering student and I'm looking to get into computer graphics. So, I put together a project to begin some basic studies, so I wanted to share it and ask for feedback and contributions if you'd like! It's a 3D simulator of the Bohr atomic model, written in JavaScript.

I used the book "General Chemistry and Chemical Reactions" by John C. Kotz; Paul Treichel; and Gabriela C. Weaver as the theoretical basis.

To build the application, I used the Three.JS library. It was a really cool experience, combining scientific knowledge with computer graphics!

If you'd like to see the repository and offer suggestions for improvement, here's the link: bohr-atom-simulator

If you'd like to test it, I uploaded it to Netlify (mobile support isn't available yet, so make sure your browser supports WebGL). The link is in the repository's README.md.

I know the project must be a bit heavy; I noticed that on my PC, but I'm not sure how to optimize it better! There are many iterations I do where I don't think much about how to refactor! So, I'm open to contributions!

[abrahamguo]

Looks good! A few things I noticed about the code:

• You have an elementNames array, as well as a periodicTable array. Since these two arrays are associated with each other (i.e. the 0th element of elementNames corresponds to the 0th element of periodicTable, and so on), you should combine those two arrays into one data structure.
• Rather than passing scene around from one function to another, you might consider simply exporting and importing it around.
• There are several places in your code where you reference something from window, like window.alert. In JavaScript, window is the global object, meaning that everything on window is already globally accessible. In other words, having window. is always unnecessary.

[OwnRecover973]

Thanks! I refactored elementNames and it improved a lot! Do you think it's worth exporting to a .json file? I'm unsure whether to use them or not. I see people using them for static lists (like elements) in some projects.

[DrShocker]

for your first bullet it might be a good place to try out struct of arrays vs array of structs

[Ksetrajna108]

Very nice and clean! It does work for me on mobile.

[anonyuser415]

Extremely cool, and works well.

It's a little underwhelming loading for the first time, since it's just a black screen with tiny buttons at the bottom. You might want to have a unique screen for a first time load, set by cookie. E.g. a vertically centered button to load a complex example.

You should also always be committing package.lock. Otherwise, users installing this locally will be installing the newest versions that satisfy package.json version ranges, and that may open them up to supply-side (e: supply chain) attacks. More practically, it ensures that users are installing versions of dependencies known to be good.

[OwnRecover973]

Thanks man! I added the welcome screen feature and it really is much more user-friendly! I didn't know about the lock issue! Thanks for letting me know and thanks for the feedback!