3D animation software empowers scientific illustrators and animators to create stunning visualizations of the molecular world. While animations can be an efficient and eye-catching way of communicating scientific findings, they do not let the audience interact and explore the data. Interactive media can provide an immersive way of communicating a story, and allows the audience to explore data at their own pace, order and desired level of detail. In this tutorial, you will learn how to create a 3D visualization tool that allows anyone with access to the internet (and a modern web browser) to explore a biomolecule interactively. The goal is not to program software for data analysis, but instead to craft a flexible, fully customizable and powerful data presentation tool. You will use the protein hemoglobin as an example structure, but are welcome to use your favorite protein structure instead. After preparing and exporting the structure in UCSF Chimera, you will use a combination of HTML, CSS, Javascript, THREE.js and Tween.js to create the web-based tool. All software packages and libraries used in this tutorial are available online free of charge.

Learning Objectives:

  • Understand the pros and cons of different technologies and methods of creating web-based 3D-visualizations
  • Build a simple website with the basic framework necessary for browser-based 3D-visualization, using HTML, CSS, and JavaScript
  • Create a setup for a 3D-viewer for biomolecular structures using the WebGL library THREE.js
  • Prepare biomolecular structures in USCF Chimera for upload to a browser
  • Import biomolecular structures into a browser
  • Connect your 3D-model with other elements of a website to make it interactive
  • Smoothly animate interactively triggered motion using the tweening library Tween.js

Software Links:

TABLE of CONTENTS

01 Intro - 3D interactivity and the web
05:00
02 Intro - Workflow outline
01:21
03 Setup - Obtaining the required libraries and files
06:17
04 HTML head section
08:42
05 HTML body section
16:06
06 CSS: Customizing skeleton.css
10:38
07 Javascript - Hello World
11:21
08 Javascript - Functions
06:27
09 Javascript - Objects
06:03
10 Javascript - Arrays
04:04
11 Javascript - Preparing main.js
06:10
12 Javascript - Cross Origin Resource Sharing
04:25
13 Intro to THREE.js - Setting the Stage: functions and variables
09:01
14 Intro to THREE.js - Introducing scene, camera, and light objects
12:42
15 Intro to THREE.js - Displaying a simple cube
08:10
16 Intro to THREE.js - Adding camera controls and window resize
09:38
17 Chimera - Importing myoglobin
04:33
18 Chimera - Customizing representations
05:15
19 Chimera - Surface color by charge
07:59
20 Chimera - Collada export
05:32
21 THREE.js - Collada import
05:35
22 THREE.js - Bringing back the colors
10:40
23 THREE.js - Hiding the surface
14:54
24 THREE.js - Centering the molecule
08:02
25 Adding Interactivity - The toggle-surface button
07:09
26 Adding Interactivity - Implementing mouse hover
16:07
27 Adding Interactivity - Implementing camera position switch
21:40
28 Adding Interactivity - Animating camera movement
13:16
29 Adding a 2D-label - Create and style the label
11:22
30 Adding a 2D-label - Dynamic label positioning
27:29
31 Wrapping up - Adding shadows
10:50
32 Wrapping up - Creating a custom favicon
04:48
33 Wrapping up - Web upload
02:22
34 Wrapping up - Outlook and further possibilities
07:20

RUN-TIME 05:10:00