13/04/2021
4 minuten

Expert talks | Three.js is better than one

Three.js

Bij Esign krijgen we vaak de kans om aan nieuwe en spannende projecten te werken. Dit betekent ook dat we innovatief moeten blijven en onze eigen kennis over de Front-End wereld moeten blijven uitbreiden. We gebruiken nieuwe en spannende libraries en krijgen de vrijheid om nieuwe ideeën uit te proberen.

Bijvoorbeeld we hadden eens een project dat een zeer specifieke en complexe navigatie vereiste. We hadden een interactieve HTML-inhoud nodig die we konden pannen, zoomen en roteren. Terwijl het mogelijk moest blijven om tekst te selecteren, links te plaatsen en animaties op te nemen. Dit sloot de optie uit om iets van afbeeldingen te gebruiken.

Een van de collega's noemde een javascript library genaamd Three.js en beschreef hoe je er niet alleen 3D-modellen mee kan visualiseren, maar ook HTML-elementen op deze objecten kan weergeven. Bovendien heeft het een navigatiesysteem dat, indien beperkt, precies zou werken zoals wij het nodig hadden.

Wat is Three.js

Three.js is een Javascript library die het mogelijk maakt GPU versnelde 3D objecten en animaties te maken. Het gebruikt WebGL als basis, wat een low level systeem is dat alleen punten, lijnen en driehoeken tekent. Three.js kan WebGL gebruiken om je scenes weer te geven op alle moderne browsers en kan gemakkelijk worden opgenomen in je project omdat het kan worden gevonden als een npm package.

Laten we een aantal basisfuncties van Three.js doornemen en een paar voorbeelden van hoe het kan worden gebruikt. Hopelijk hebben we je aan het eind van deze lezing overtuigd.

Setup

Om Three.js in te stellen hebben we een paar dingen nodig.

Eerst en vooral moeten we Three.js installeren. Om de npm-module Three te installeren, open je een terminalvenster in je projectmap en voer je het volgende uit:

npm install --save three

Het pakket wordt gedownload en geïnstalleerd. Dan ben je klaar om het te importeren in je code:

        
// Option 1: Import the entire three.js core library.
import * as THREE from 'three';
const scene = new THREE.Scene();
// Option 2: Import just the parts you need.
import { Scene } from 'three';
const scene = new Scene();

Na de installatie van de library, kunnen we een paar basisbegrippen doornemen:

Three.js bestaat altijd uit een scene. Je kan dit zien als een driedimensionale ruimte om je objecten in te bekijken. Zoals een oneindig grote filmstudio.
Ten tweede hebben we een renderer nodig om onze scene en de objecten in de scene te bekijken. We hebben een aantal renderers om uit te kiezen, maar de belangrijkste zijn de WebGLRenderer om gewone 3D objecten weer te geven en de CSS3DRenderer om HTML elementen in 3D ruimte te visualiseren.
We hebben ook een camera nodig in onze scene om te weten waar we willen kijken.
Zonder licht in onze scene, kunnen we niets zien. Dus dit is een ander essentieel onderdeel.
Tenslotte hebben we objecten nodig in onze scene om te bekijken. We kunnen deze objecten ook een materiaal geven, om ze een andere kleur, textuur, of oppervlak te geven.

1. Scène, camera en actie!

Om onze Three.js scene te starten, maken we eerst een scene, kiezen een renderer en plaatsen onze camera.

        
function init() {
  // Setup
  renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#canvas")});
  // Make and setup a camera.
  camera = new THREE.PerspectiveCamera(70, 1, 1, 1000);
  camera.position.z = 400;
  // Make a scene
  scene = new THREE.Scene();

2. Maak onze ster

Als we iets interessants willen hebben om naar te kijken in onze scene moeten we een object maken. We kunnen dit doen in een paar stappen.

        
// Make a cube.
  var geometry = new THREE.BoxGeometry(200, 200, 200);
  // Make a material
  var material = new THREE.MeshPhongMaterial({
    ambient: 0x00505f,
    color: 0xFFC90,
    specular: 0xffffff,
    shininess: 50,
    shading: THREE.SmoothShading
  });
  // Create a mesh based on the geometry and material
  mesh = new THREE.Mesh(geometry, material);
  mesh.rotation.x = 20;
  mesh.rotation.y = 15;
  mesh.rotation.z = 20;
  scene.add(mesh);

Door ons object wat draaiing te geven, zijn we in staat om de kubus in 3D te zien. Maar zonder lichten is het een beetje te donker om iets te zien. Dus laten we die ook toevoegen.

Voeg de volgende code toe onder onze kubus code. Je zou de kubus nu moeten kunnen zien.

        
// Add 2 lights.
  var light1 = new THREE.PointLight(0xff0040, 2, 0);
  light1.position.set(200, 100, 300);
  scene.add(light1);
  var light2 = new THREE.PointLight(0x0040ff, 2, 0);
  light2.position.set(-200, 100, 300);
  scene.add(light2);

3. Voeg wat flair toe

We kunnen wat nodige functionaliteit en flair toevoegen aan onze kubus, door hem te animeren. Maak een functie genaamd animate en roep deze op bovenaan in je Javascript. Binnen deze functie willen we de waarde van de rotatie van het object als volgt veranderen:

        
function animate() {
  resize();
  mesh.rotation.x += 0.005;
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}