Topics

Vroeger, als ik naar verschillende websites keek, was ik gefascineerd door de objecten die bij de eerste weergave bewogen en de animaties die een gevoel van diepte gaven. Ik dacht toen: "Wauw!" Op dat moment dacht ik: "Zoiets wil ik zelf ook maken!"Three.jsofBlenderEr was een tijd dat ik het probeerde.

Ik ben met veel bewondering bij Liberogic gaan werken, maar uiteindelijk... ben ik de laatste tijd meer bezig met degelijk implementatiewerk, zoals het bouwen van bedrijfsapplicaties en headless CMS'en (lacht). Ik wil ze niet afkraken of zo!

Nu we in het vierde jaar zitten, herinner ik me hoe ik toen verlangde naar een ‘dynamisch web’.WebGLIk wil graag kort de basiskenmerken van de omgeving bespreken.

Wat is WebGL?

Wat is WebGL?Technologie voor het weergeven van 3D-graphics op websitesHet werkt op alle belangrijke browsers, waaronder Chrome, Firefox en Safari.

Vroeger waren plug-ins als Flash Player de norm, maar die waren lastig te gebruiken op smartphones.

In dat opzicht wordt WebGL standaard ondersteund, dus de volgendeTechnologie die een pionier was op het gebied van 3D-expressie in het mobiele tijdperkJe kunt ook zeggen dat...

Ik heb het daadwerkelijk geprobeerd

3D weergeven in de browser met Three.js

Drie.jsJavaScript gebruikenEen bibliotheek zonder handelsmerken waarmee u eenvoudig 3D-inhoud kunt maken.

Allereerst heb je, volgens WebGL-concepten, een Renderer, Scene en Camera nodig.

Renderer is het belangrijkste object in Three.js.ScenevanCamera, de camera-frustumRenderer3D binnenSceneHet onderdeel wordt als 2D-afbeelding op het canvas weergegeven (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);

Het 3D-kubusonderdeel wordt gemaakt met behulp van een weergaveobject, een zogenaamde mesh. Om een ​​mesh te maken, moet u de geometrie (vorm) en het materiaal (materiaal) voorbereiden.

//Geometrie (kubus)
const geometrie = new THREE.BoxGeometry(100, 100, 100)

//Materiaal (kleur)
const materiaal = new THREE.MeshNormalMaterial
const box = new THREE.Mesh(geometrie, materiaal);
//Toevoegen aan scène
scene.add(box);

//Licht
const licht = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
//Toevoegen aan scène
scene.add(licht);

Voeg ten slotte animatie toe.

Deze keer sla ik de implementatie van de omringende deeltjes over!

function animate() {
  requestAnimationFrame(animate);

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

animate()

Wanneer u een scène rendert met de ingestelde camera, geometrie, materiaal en licht, wordt deze in de browser getekend.

3D-modellen maken met Blender

BlenderGratis, open source, geïntegreerde software die het volledige 3D-productieproces bestrijkt, van 3D-modellering, animatie, rendering, game-ontwikkeling en videobewerking.Blender alleen kan geen WebGL-site maken.

Blender maakt gebruik van hetzelfde concept als Three.js: vormen worden gemaakt met behulp van mesh-objecten, kleur en textuur worden toegevoegd met behulp van materialen, de manier waarop licht valt en schaduwen worden aangepast met lampen, en de positie en richting van de camera worden aangepast om rendering uit te voeren.

U kunt realistische texturen creëren door knooppunten te combineren, zoals kleurverlopen, metaaleffecten en gloeiende elementen.

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

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

Exporteer de 3D die u in Blender hebt gemaakt naar een .glb-bestand en neem dit op in Three.js.

OrbitControls、GLTFLoader、DRACOLoaderImporteer elke functie uit de Three.js-bibliotheek.

OrbitControlsis een hulpprogramma voor het bedienen van de camera met de muis,GLTFLoaderEnDRACOLoaderzijn hulpprogramma's voor het laden van 3D-modellen in respectievelijk het GLTF-formaat en de gecomprimeerde versie daarvan, het DRACO-formaat.

De gemodelleerde appel wordt nu weergegeven in de browser!

Wanneer ik echter een model dat is gemaakt in Blender weergeef in een browser met behulp van Three.js,Verschillen in renderomgevingen en materiaalcompatibiliteitDe kleur en textuur zien er afhankelijk van de omgeving anders uit. Mogelijk moet u daarom enkele aanpassingen doen om het gewenste resultaat te krijgen.

Mijn dagelijkse werkzaamheden bestaan ​​uit CMS-integratie en front-end design/constructie van bedrijfsapplicaties. Daarom heb ik in mijn eigen werk niet veel te maken met 3D-expressie.

Maar als ik het op deze manier speel, besef ik weer dat het eigenlijk heel leuk is.

ToenHet bewegende webMisschien kwam het door zijn bewondering voor het verleden dat hij zich van nature aangetrokken voelde tot moderne technologie.

Vandaag is het weer tijd voor Next en Nuxt!

Terug naar de site, in een andere vormHet bewegende webIk ga het doen. 🚀