Die tijd dat ik me waagde aan 3D-expressie (WebGL) — Een verhaal over Three.js en Blender

Vroeger keek ik naar allerlei websites en werd ik gefascineerd door objecten die in de hero-afbeelding ronddraaide en animaties met dieptegevoel. Ik dacht: "Ik wil zoiets zelf ook maken!" en begon me in Three.js en Blender te verdiepen.

Ik ben bij Liberogic gekomen met die droom, maar eigenlijk werk ik tegenwoordig vooral aan zakelijke applicaties en headless CMS-constructie — wat meer van het praktische werk (lacht). Niet dat ik het afkraak, hoor!

Nu ik in mijn vierde jaar ben, wil ik graag terugdenken aan die fascinatie voor "moving web" en de basis van WebGL wat beter bekijken.

Wat is WebGL?

WebGL is een technologie voor het weergeven van 3D-graphics op websites en werkt op alle grote browsers zoals Chrome, Firefox en Safari.

Lange tijd waren plug-ins als Flash Player de standaard, maar die werkten slecht op smartphones.

WebGL werkt natively en opende daarmee de deur naar 3D-expressie in het mobiele tijdperk.

We probeerden het zelf uit

3D in de browser weergeven met Three.js

Three.js is een bibliotheek waarmee je met JavaScript gemakkelijk 3D-inhoud kunt maken en die onder een vrij gebruikslicentie beschikbaar is.

Voor het WebGL-concept heb je eerst een Renderer, Scene en Camera nodig.

Renderer is het hoofdobject van Three.js. Als je Scene en Camera doorgeeft, wordt het gedeelte van de 3D-Scene binnen de camerafrustratie van de Renderer als een 2D-afbeelding op het canvas gerenderd (getekend).

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);

Vervolgens maak je het 3D-kubusobject met behulp van een mesh, een weergaveobject. Om een mesh te maken, heb je geometrie (vorm) en materiaal (textuur) 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 voeg je animatie toe.

De implementatie van de deeltjes eromheen laten we deze keer achterwege!

function animate() {
  requestAnimationFrame(animate);

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

animate()

Als je de scene met de ingestelde camera, geometrie, materiaal en licht rendert, wordt deze in de browser weergegeven.

3D-modellering in Blender creëren

Blender is open source integrated software dat de gehele 3D-productieproces – van 3D-modellering, animatie en rendering tot game development en videobewerking – gratis dekt. Met Blender alleen kun je geen WebGL-websites maken.

Blender werkt op dezelfde manier als Three.js: je maakt vormen met mesh-objecten, voegt kleur en textuur toe met materialen, stelt licht in om schaduwen te creëren en past de camerahoek aan voordat je rendert.

Door nodes te combineren kun je realistische oppervlakken creëren – met gradiënten, metallic effecten, gloeiing en meer.

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

Een 3D-model dat in Blender is gemaakt, weergeven in een browser met Three.js

Exporteer het 3D-model dat je in Blender hebt gemaakt naar een .glb-bestand en integreer het in Three.js.

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

OrbitControls is een hulpprogramma om de camera met de muis te bedienen, terwijl GLTFLoader en DRACOLoader respectievelijk worden gebruikt voor het laden van 3D-modellen in GLTF-indeling en hun gecomprimeerde DRACO-variant.

Ik heb een in Blender gemodelleerde appel in de browser weergegeven!

Echter, wanneer ik een model dat in Blender is gemaakt met Three.js in de browser weergeef, verschil in renderingomgeving en materialcompatibiliteit veroorzaakt dat kleur en textuur er anders uitzien dan verwacht. Er is wat aanpassing nodig om het gewenste uiterlijk te bereiken.

Mijn dagelijks werk bestaat vooral uit CMS-integratie en frontend-ontwerp/-bouw van bedrijfsapplicaties, dus ik kom niet veel in aanraking met 3D-expressie.

Maar als ik hierop experimenteer, realiseer ik me opnieuw: "Dit is eigenlijk heel leuk."

Misschien omdat ik destijds zo'n fascinatie had voor dynamische web, werd ik vanzelf aangetrokken tot moderne technologie.

Goed, vandaag weer Next en Nuxt!

Terug naar het project, waar ik opnieuw dynamische web op mijn eigen manier zal creëren. 🚀