A high-speed three.js substrate for visualizing biofidelic data
Let’s start by creating a new project. For the purposes of this guide, we will use unix-like commands, but they should be relatively easy to translate if you are using Windows.
Make a new directory, and initialize a project inside it:
mkdir myfancyproject
cd myfancyproject
touch index.html index.js
npm install --save apl-substrate
This will create a package.json file in your working directory. Let’s start out with a basic page for now. Copy and paste this into your index.html:
<!DOCTYPE html>
<html>
<head>
<title>myfancyproject</title>
</head>
<body>
<div id="viz-target"></div>
<script src="bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script src="./TrackballControls.js"></script>
</body>
</html>
Copy and paste this into your index.js:
import Visualizer from 'substrate/components/Visualizer';
import Layer from 'substrate/components/Layer';
class AxisLayer extends Layer {
requestInit(scene) {
scene.add(new window.THREE.AxisHelper(5));
}
}
let V = new Visualizer({
targetElement: "viz-target"
renderLayers: {
axis: new AxisLayer()
}
});
What does this do?
We create a Visualizer variable V, which has a few attributes which we can ignore, but one very important attribute, called renderLayers. This is where we’ll specify which objects we’d like to include in our 3D scene. Right now, we only include the canonical tri-tone xyz-axis, which comes from a Layer that is built into Substrate. (It’s a good hello-world of the substrate flavor.)
There are a few built in layers, which you can read more about here. The tldr is that some common layer types, such as importing an OBJ file or rendering these axes, are provided to you for free: Other layers, you’ll have to develop or implement yourself.
Before we continue: Notice that we name our axis layer with the name axis: This is an arbitrary string that we chose because it seems intuitive…but we could just as easily have named it “Robert”.
In fact, if we never care about accessing our layers directly by name, we can pass a renderLayers array instead of dictionary:
renderLayers: [
new AxisLayer()
]