Showcase: 3D Molecular Visualiser/Manipulator

Hi everyone! I wanted to share a project I’ve been working on a 3D molecular visualiser for 4-bromo-3-nitroacetophenone for a Level 6 HE Applied Chem course, and it’s been a bit of a journey in balancing high-end aesthetics with rock-solid performance.

 

 

The "Why" Behind the Build

We’ve all been there: you embed a cool 3D element, and it either looks tiny on the screen or feels like you're steering a tank when you try to rotate it. For this asset (S0501b), I wanted to see if I could create a digital laboratory experience that felt "snappy" and scientifically grounded, even when tucked inside an iFrame.

The Technical "Secret Sauce"

I spent quite a bit of time under the hood on this one, and here are the bits I’m most excited about:

• Scientific Grounding: No manual models here! The engine pulls raw SDF coordinates directly from PubChem (CID 87737), so every atom and bond is exactly where it should be.
• Fixing the "Input Lag": If you’ve ever used WebGL, you know the keyboard can sometimes feel laggy. I built a custom Input State Filter (a little JS buffer) that syncs movement to the browser’s refresh rate. It completely killed the "overshoot" and made keyboard navigation feel instant.
• The "Cyber-Flora" Look: I moved away from the standard black background for a softer, pastellised #691eda (Purple) theme. It’s easier on the eyes and makes the Jmol colour-coded atoms really pop.

Features at a Glance

• Adaptive Scaling: No more "tiny molecule" syndrome. The engine forces a zoom and a strict 700px height to keep the UI stable.
• Accessibility First: It’s fully navigable via mouse, touch, or keyboard (tuned with a high rotStep for precision).
• Performance Tweak: I used Level of Detail (LOD) geometry to make sure it runs at a smooth 60fps, even on older hardware.

I'd Love Your Feedback!

I’m really looking to see how this holds up across different environments. If you have a moment, I’d love for you to review and evaluate the interaction.

• Does the rotation feel smooth on your setup?
• How does the scale look in your specific VLE?

Please feel free to reach out if you’re working on something similar or want to chat about the code logic behind the input filtering. I’m more than happy to share what I’ve learned!

 

Review360