Molecule Viewer

A React Three.js application for viewing molecular structures with transmission materials and interactive controls.

Getting Started

npm install
npm run dev

Converting OBJ to GLB

To add new molecular models, convert OBJ files to GLB format for optimal performance:

1. Install the converter

npm install -g obj2gltf

2. Convert your OBJ file

obj2gltf -i your-molecule.obj -o public/your-molecule.glb --binary

The GLB format provides:

• Smaller file sizes (typically 60-70% compression)
• Faster loading times
• Single binary file containing geometry, materials, and textures

Adding New Molecules

1. Place GLB files in the public/ directory

public/
├── surface.glb      # Surface representation
├── cartoon.glb     # Cartoon representation
└── your-new-molecule.glb

2. Update the MoleculeViewer component

For transmission materials (glass-like effect):

function TransmissionMolecule() {
  const gltf = useLoader(GLTFLoader, './your-molecule.glb')
  // ... rest of component
}

For standard materials (solid appearance):

function StandardMolecule() {
  const gltf = useLoader(GLTFLoader, './your-molecule.glb')
  // ... rest of component
}

3. Customize appearance

• Adjust transmission, roughness, thickness in Leva controls
• Modify colors in the color and bg properties
• Change material properties like metalness and clearcoat

File Structure

• MoleculeViewer.jsx - Main viewer component with dual rendering modes
• public/ - Static assets including GLB molecular models
• Interactive controls powered by Leva for real-time shader adjustments