Skip to content

3D Molecule Explorer

Rotate, build and compare molecules in 3D in the browser.

Intermediate14h1–2 people17/20 fit
TL;DR

Build 3D Molecule Explorer for chemistry students in ~14h with 1–2 people. Stack: Three.js + JavaScript.

Why it wins: Visual science learning.

Build flow

01 · Problem
Molecular shapes are hard to imagine from flat drawings.
02 · Solution
Render molecules with three.js from standard files, show bond angles and let students build simple molecules and check them.
03 · Build
  1. 1Parse molecule files
  2. 2Render with three.js
  3. 3Add measurement
  4. 4Add builder
04 · Demo
Rotate a molecule and measure a bond angle.

MVP checklist

  • 3D rendering
  • Bond angles
  • Builder
  • Quiz

Tech stack

TechRole
Three.js3D rendering
JavaScriptGame / app logic

Reference repos

Open-source projects you can build on. Links checked 2026-10-31.

Related ideas

More EdTech
  • Run physics experiments in the browser with real measurements

    Intermediate16h1–3
    JavaScriptCanvasECharts
    17/20
  • Turn notes or a chapter into an editable concept map

    Intermediate12h1–2
    LLMExcalidrawNext.js
    17/20