Three.js

Author - Sarmpavi

I developed an interactive visualisation using three.js on quantum gates and their effects on quantum states. This visualisation is intended for 3^rd and 4^th undergraduate Physics students taking the Quantum Information module. I also created a design template (with the learning outcomes) which can be found on the Miro page under Bloch Sphere. As I developed this visualisation, I documented what I had learnt about three.js and how it can be used to create visualisations. Below is a summary of what I have learnt.

Introduction

This guidance page provides some basic information on how to use three.js including example code (which can be found on ImpVis’ GitHub) and some useful resources to learn and gain more knowledge about the package. Please note that the example code has been written by myself with only a few weeks of three.js experience – a lot of improvements can be made (some of which I have listed below) but I hope this will be somewhat useful for any beginners who are reading this. This page also assumes that you have some basic JavaScript/HTML/CSS knowledge.

three.js is a library which allows you to create 3D content and is a useful tool when developing interactive visualisations.

Installation:

three.js can be installed by navigating to your project folder in your terminal and then typing: