Die tijd dat ik worstelde met 3D-weergave (WebGL) – Een verhaal over experimenteren met Three.js en Blender

Vroeger keek ik vaak naar allerlei websites en raakte ik helemaal gefascineerd door objecten die bij het eerste beeld rondtollen, en door animaties met een mooi gevoel van diepte. "Wow, dat is geweldig!" dacht ik toen. Op een gegeven moment besloot ik zelf zoiets te proberen te maken en begon ik met Three.js en Blender.

Met die bewondering ben ik bij Liberogic begonnen, maar eerlijk gezegd... Tegenwoordig werk ik vooral aan zakelijke applicaties en het bouwen van headless CMS-oplossingen, dus de implementaties zijn wat zakelijker en steviger geworden (lacht). Ik heb er part noch deel niets op tegen, hoor!

Nu ik al bijna vier jaar in het vak zit, wil ik terugblikken op de basis van WebGL, en tegelijk die oude droom van 'het web in beweging' weer oppakken.

Wat is WebGL

WebGL is een technologie waarmee 3D-graphics op websites worden weergegeven, en werkt in alle grote browsers, waaronder Chrome, Firefox en Safari.

Vroeger was de Flash Player-plug-in de standaard, maar op smartphones liep dat vaak moeilijk.

WebGL is daarentegen native ondersteund, en daarmee kun je het eerlijk gezegd zien als de technologie die de weg vrijmaakte voor 3D-weergave in het mobiele tijdperk.

Zelf proberen

Een 3D-weergave in de browser maken met Three.js

Three.js is een vrij te gebruiken bibliotheek waarmee je eenvoudig 3D-content maakt met behulp van JavaScript.

Om te beginnen zijn bij WebGL drie concepten nodig: Renderer, Scene en Camera.

De Renderer is het belangrijkste object van Three.js. Wanneer je de Scene aan de Camera doorgeeft, wordt het deel van de 3D-Scene dat binnen het zichtveld (frustum) van de camera valt door de Renderer als 2D-afbeelding op het canvas weergegeven.

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  1000, // 視野角
  window.innerWidth / window.innerHeight, // 側面
  75, // 近く
  1000 // 遠い
);
camera.position.set(0, 0, 400);

//マウスで制御
const controls = new OrbitControls(camera, document.body);

//html側の<canvas id="myCanvas"></canvas>を取得
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#myCanvas"),
  antialias: true,
});

//setSize()メソッドでサイズを設定
renderer.setSize(window.innerWidth, window.innerHeight);
//背景色も変更可能
renderer.setClearColor("#000")

//htmlの<canvas id="myCanvas"></canvas>へ流し込み
document.body.appendChild(renderer.domElement);

Het 3D-kubusdeel maak je vervolgens met een weergaveobject genaamd een mesh. Om een mesh te maken, heb je een geometry (vorm) en een material (materiaal) nodig.

//ジオメトリ（立方体）
const geometry = new THREE.BoxGeometry(100, 100, 100)

//マテリアル（色）
const material = new THREE.MeshNormalMaterial
const box = new THREE.Mesh(geometry, material);
//Sceneに追加
scene.add(box);

//ライト
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
//Sceneに追加
scene.add(light);

Tot slot voegen we animatie toe.

De implementatie van de omringende deeltjes laten we in dit artikel buiten beschouwing!

function animate() {
  requestAnimationFrame(animate);

  box.rotation.x += 0.005;
  box.rotation.y += 0.005;
  renderer.render(scene, camera);
}

animate()

Wanneer je de scene met de ingestelde camera, geometry, material en licht rendert, wordt deze in de browser weergegeven.

Een 3D-model maken in Blender

Blender is een gratis, open-source geïntegreerde software die het volledige 3D-productieproces dekt, van 3D-modellering, animatie en rendering tot game-ontwikkeling en videobewerking. Blender alleen is niet voldoende om WebGL-websites te bouwen.

Ook in Blender werkt men met hetzelfde concept als Three.js: je maakt vormen met mesh-objecten en geeft ze kleur en materiaaleigenschappen met materialen. Vervolgens stel je met lichten in hoe het licht valt en hoe schaduwen ontstaan, en pas je de positie en richting van de camera aan om te renderen.

Door nodes te combineren kun je verlopen maken, metaalachtige oppervlakken creëren of voorwerpen laten gloeien, zodat je realistische materialen bouwt.

Bron: https://www.youtube.com/watch?v=DsNZzUZPhw4

Een in Blender gemaakt 3D-model weergeven in de browser met Three.js

Exporteer het in Blender gemaakte 3D-model naar een .glb-bestand en integreer het in Three.js.

Importeer de volgende functies uit de Three.js-bibliotheek: OrbitControls, GLTFLoader en DRACOLoader.

OrbitControls is een hulpprogramma waarmee de camera met de muis kan worden bestuurd. GLTFLoader en DRACOLoader zijn hulpprogramma's om respectievelijk 3D-modellen in GLTF-formaat en hun gecomprimeerde versie in DRACO-formaat te laden.

We hebben een appel in 3D in de browser weergegeven!

Toen ik het model dat ik in Blender had gemaakt met Three.js in de browser weergaf, zagen kleuren en texturen er echter anders uit door verschillen in renderomgeving en materiaalcompatibiliteit. Om het eruit te laten zien zoals ik het voor ogen had, is wel wat finetuning nodig.

Mijn dagelijkse projecten draaien vooral om CMS-integraties en het ontwerp en de bouw van frontend voor bedrijfsapplicaties, dus ik kom zelf maar zelden meer in aanraking met 3D-toepassingen.

Maar als ik er zo mee speel, merk ik opnieuw op dat het toch "echt wel leuk is".

Misschien is het juist mijn verlangen naar het bewegende web van toen dat me er vanzelf toe bracht om me ook aangetrokken te voelen tot moderne technologieën.

Nou, aan de slag met Next en Nuxt!

Terug naar de praktijk, waar ik op een andere manier aan het bewegende web ga bouwen. 🚀