Learn Three.js - Third Edition

Show proteins from PDB

PDB (www.rcsb.org) contains detailed information about many different molecules and proteins. Besides the explanation of these proteins, they also provide a way to download the structure of these molecules in PDB format. Three.js provides a loader for files specified in the PDB format. In this section, we'll give an example of how you can parse PDB files and visualize them with Three.js.

The first thing we always need to do to load in a new file format is to include the correct loader in Three.js, as follows:

<script type="text/javascript" src="../libs/PDBLoader.js"></script>

With this loader included, we're going to create the following 3D model of the molecule description provided (see the 12-load-pdb.html example): ...