Topics

Früher, als ich mir verschiedene Websites ansah, war ich fasziniert von den Objekten, die sich im ersten Blick bewegten, und den Animationen, die ein Gefühl von Tiefe vermittelten, und rief: „Wow!“ Damals dachte ich: „So etwas möchte ich auch selbst machen!“Three.jsoderBlenderEs gab eine Zeit, da habe ich es auch mal versucht.

Ich bin mit großer Bewunderung zu Liberogic gekommen, aber letztendlich... habe ich mich in letzter Zeit mehr mit soliden Implementierungsarbeiten beschäftigt, wie zum Beispiel dem Aufbau von Geschäftsanwendungen und Headless CMS (lol). Ich will sie damit keinesfalls schlechtmachen!

Jetzt, im vierten Jahr, erinnere ich mich an meine damalige Sehnsucht nach einem „dynamischen Web“.WebGLIch möchte kurz die wichtigsten Merkmale der Umgebung erläutern.

Was ist WebGL?

Was ist WebGL?Technologie zur Darstellung von 3D-Grafiken auf WebsitesEs funktioniert auf allen gängigen Browsern, einschließlich Chrome, Firefox und Safari.

Vor langer Zeit waren Plugins wie der Flash Player Standard, aber sie hatten das Problem, dass sie auf Smartphones nur schwer lauffähig waren.

In dieser Hinsicht wird WebGL nativ unterstützt, daher ist der nächste SchrittTechnologie, die die 3D-Darstellung im mobilen Zeitalter revolutionierteMan kann auch sagen, dass...

Ich habe es tatsächlich ausprobiert.

3D-Darstellung im Browser mit Three.js

Three.jsVerwendung von JavaScriptEine markenfreie Bibliothek, mit der Sie auf einfache Weise 3D-Inhalte erstellen können.

Zunächst einmal benötigen Sie im Hinblick auf die WebGL-Konzepte einen Renderer, eine Szene und eine Kamera.

Der Renderer ist das Hauptobjekt in Three.js.ScenevonCamera, der KamerakegelRenderer3D innerhalbSceneDas Teil wird als 2D-Bild auf der Leinwand gerendert (gezeichnet).

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

Der 3D-Würfelteil wird mithilfe eines Darstellungsobjekts, einem sogenannten Mesh, erstellt. Um ein Mesh zu erstellen, müssen Sie die Geometrie (Form) und das Material (Material) vorbereiten.

// Geometrie (Würfel)
const geometry = new THREE.BoxGeometry(100, 100, 100)

// Material (Farbe)
const material = new THREE.MeshNormalMaterial
const box = new THREE.Mesh(geometry, material);

// Zur Szene hinzufügen
scene.add(box);

// Licht
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);

// Zur Szene hinzufügen
scene.add(light);

Zum Schluss fügen Sie die Animation hinzu.

Die Implementierung der umgebenden Partikel werde ich dieses Mal auslassen!

function animate() {
  requestAnimationFrame(animate);

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

animate()

Wenn Sie eine Szene mit der festgelegten Kamera, Geometrie, dem festgelegten Material und dem festgelegten Licht rendern, wird sie im Browser dargestellt.

3D-Modellierung mit Blender erstellen

MixerKostenlose, quelloffene, integrierte Software, die den gesamten 3D-Produktionsprozess abdeckt, von 3D-Modellierung, Animation, Rendering, Spieleentwicklung bis hin zur Videobearbeitung.Blender allein kann keine WebGL-Website erstellen.

Blender verwendet das gleiche Konzept wie Three.js: Es erstellt Formen mithilfe von Mesh-Objekten, fügt Farbe und Textur mithilfe von Materialien hinzu, passt an, wie Licht auftrifft und Schatten wirft, und justiert die Kameraposition und -richtung, um das Rendering durchzuführen.

Realistische Texturen lassen sich durch die Kombination von Knoten erzeugen, beispielsweise durch Farbverläufe, Metalleffekte und Glüheffekte.

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

3D-Modelle, die mit Blender erstellt wurden, im Browser mit Three.js anzeigen

Exportiere das in Blender erstellte 3D-Modell in eine .glb-Datei und integriere es in Three.js.

OrbitControls、GLTFLoader、DRACOLoaderImportiere jede Funktion aus der Three.js-Bibliothek.

OrbitControlsist ein Hilfsprogramm zur Steuerung der Kamera mit der Maus.GLTFLoaderUndDRACOLoaderEs handelt sich um Hilfsprogramme zum Laden von 3D-Modellen im GLTF-Format bzw. dessen komprimierter Version, dem DRACO-Format.

Der modellierte Apfel wird nun im Browser angezeigt!

Wenn ich jedoch ein in Blender erstelltes Modell mithilfe von Three.js in einem Browser anzeige,Unterschiede in den Rendering-Umgebungen und der MaterialkompatibilitätFarbe und Textur wirken je nach Material unterschiedlich, daher müssen Sie möglicherweise einige Anpassungen vornehmen, um den gewünschten Look zu erzielen.

Meine tägliche Arbeit besteht aus CMS-Integration und Front-End-Design/Konstruktion von Geschäftsanwendungen, daher habe ich in meiner eigenen Arbeit nicht viel Berührungspunkte mit 3D-Darstellungen.

Aber wenn ich es so spiele, merke ich wieder einmal, wie viel Spaß es macht.

DamalsDas bewegliche NetzVielleicht war es seine Bewunderung für die Vergangenheit, die ihn auf natürliche Weise zur modernen Technologie hinzog.

Nun, heute sind wieder Next und Nuxt an der Reihe!

Zurück zur Website, in anderer FormDas bewegliche NetzIch werde es schaffen. 🚀