quaintitative

I write about my quantitative explorations in visualisation, data science, machine and deep learning here, as well as other random musings.

For more about me and my other interests, visit playgrd or socials below


Categories
Subscribe

Simple primer on three.js

Compared to Processing or p5.js, three.js may seem a little intimidating at the start. The main reason for that is really just the code needed to set-up the 3D scene. Other than that, it really isn’t much more complicated.

The three.js documentation is great, but the example provided within might not go far enough.

So what I’ll do here is to use a three.js piece that I did that goes a little further than the example on the three.js site, and use that to explain some key concepts in three.js. The complete code is available here.

First, we import the core three.js library as well as the OrbitControls.js library. The three.js library has the core functions, while the OrbitControls.js library will allow us to insert controls to zoom, pan and rotate the view.

<script type="text/javascript" src="./three.js"></script>
<script type="text/javascript" src="./OrbitControls.js"></script>

Setup the scene by declaring -

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 10, 1000 );
camera.position.z = 30;
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xCC7FE0, 1 );

document.body.appendChild( renderer.domElement );

The other stuff within the code above are used to set the options for these variables, e.g. setting the position of the camera on the z axis camera.position.z = 30;. The last line is the most important. It appends the renderer to the body of the HTML document so that we can see whatever we are drawing to the screen.

Next we declare an instance of the OrbitControl.

var orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit.enableZoom = false;

And declare and add some lights to the scene.

var ambientLight  = new THREE.AmbientLight( '#FFE7FF' ),
    hemiLight     = new THREE.HemisphereLight('#FFE7FF', '#FFE7FF', 0.5 ),
    light         = new THREE.PointLight( '#FFE7FF', 1, 100 );

hemiLight.position.set( 0, 0, 10 );
light.position.set( 0, 0, 0 );

scene.add( hemiLight );
scene.add( light );

Notice that we add an item to the scene each time we create it. The ‘set’ function is really just for setting the x, y, and z coordinates of the each item that we add to the scene (light, camera).

Now we start creating the objects within the scene. Let’s add one sphere.

var group = new THREE.Group();
var geometry = new THREE.SphereGeometry( 3, 32, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, opacity:0.7, transparent:true } );
var sphere_one = new THREE.Mesh( geometry, material );
sphere_one.position.x = 0;
sphere_one.position.y = 0;
sphere_one.position.z = 0;

group.add( sphere_one );

The lines above -

We then set the position of the sphere and add it to the group.

The script does the same for another 2 spheres, with different materials.

We then add the whole group into the scene.

scene.add( group ); 

Next we render the scene and animate it.

var render = function () {
                requestAnimationFrame( render );
                orbit.update();
                group.rotation.x += 0.03;
                group.rotation.y += 0.02;
                group.rotation.z += 0.01;
                
                renderer.render( scene, camera );
            };

At each frame, the group of items is rotated.

The full code is here.


Articles

AI and UIs
Listing NFTs
Extracting and Processing Wikidata datasets
Extracting and Processing Google Trends data
Extracting and Processing Reddit datasets from PushShift
Extracting and Processing GDELT GKG datasets from BigQuery
Some notes relating to Machine Learning
Some notes relating to Python
Using CCapture.js library with p5.js and three.js
Introduction to PoseNet with three.js
Topic Modelling
Three.js Series - Manipulating vertices in three.js
Three.js Series - Music and three.js
Three.js Series - Simple primer on three.js
HTML Scraping 101
(Almost) The Simplest Server Ever
Tweening in p5.js
Logistic Regression Classification in plain ole Javascript
Introduction to Machine Learning Right Inside the Browser
Nature and Math - Particle Swarm Optimisation
Growing a network garden in D3
Data Analytics with Blender
The Nature of Code Ported to Three.js
Primer on Generative Art in Blender
How normal are you? Checking distributional assumptions.
Monte Carlo Simulation of Value at Risk in Python
Measuring Expected Shortfall in Python
Style Transfer X Generative Art
Measuring Market Risk in Python
Simple charts | crossfilter.js and dc.js
d3.js vs. p5.js for visualisation
Portfolio Optimisation with Tensorflow and D3 Dashboard
Setting Up a Data Lab Environment - Part 6
Setting Up a Data Lab Environment - Part 5
Setting Up a Data Lab Environment - Part 4
Setting Up a Data Lab Environment - Part 3
Setting Up a Data Lab Environment - Part 2
Setting Up a Data Lab Environment - Part 1
Generating a Strange Attractor in three.js
(Almost) All the Most Common Machine Learning Algorithms in Javascript
3 Days of Hand Coding Visualisations - Day 3
3 Days of Hand Coding Visualisations - Day 2
3 Days of Hand Coding Visualisations - Day 1
3 Days of Hand Coding Visualisations - Introduction