Kommentar: Wir haben gesehen, wie müde es ist, die native WebGL -API zur Entwicklung zu verwenden, da eine große Anzahl von WebGL -Frameworks entwickelt wurde. Diese Frameworks verkapulieren verschiedene Elemente des Erstellens von 3D -Szenen in unterschiedlichem Maße. Sie können schnell die erforderlichen 3D -Szenen erstellen. Interessierte Freunde können darüber lernen. Vielleicht ist dieser Artikel für Sie hilfreich.
Wir haben gesehen, wie müde es ist, native WebGL -API -Entwicklung zu verwenden. Aus diesem Grund wurde eine große Anzahl von WebGL -Frameworks entwickelt. Mit diesen Frameworks können Sie schnell die erforderlichen 3D -Szenen erstellen. Diese Frameworks verkapulieren verschiedene Elemente des Erstellens von 3D -Szenen in unterschiedlichem Maße wie Szenen, Kameras, Modelle, Beleuchtung, Materialien usw.; Mit diesen eingekapselten Objekten können Sie die erforderlichen 3D -Szenen problemlos erstellen, damit Sie nur mehr Energie auf die Logik konzentrieren müssen.
Derzeit hat niemand den Vorteil, andere Frameworks zu überwältigen. Welche Art von Rahmen zu wählen ist, hängt von Ihrer persönlichen Präferenz ab. Bei der Auswahl eines Frameworks denke ich persönlich, dass es besser ist, die letzte Update -Zeit des Frameworks zu betrachten. Die Auswahl eines stabilen aktualisierten Frameworks kann immer die neuesten Funktionen verwenden und Ihr Programm stabiler machen.
Das folgende Beispiel verwendet das Drei.js -Framework für die Entwicklung.
Three.js ist ein relativ umfassendes Open -Source -Framework, das mit verschiedenen Elementen von 3D -Szenen gut eingekapselt ist. Sie können es verwenden, um einfach Kameras, Modelle, Beleuchtung, Materialien und mehr zu erstellen. Sie können auch verschiedene Renderer auswählen. Drei.js bietet eine Vielzahl von Rendering -Methoden. Sie können wählen, ob Sie Leinwand zum Rendern oder zum Rendern von WebGL oder SVG verwenden können.
Darüber hinaus können drei.js 3D -Dateien in vielen Formaten laden, und Ihre Modelldateien können von Blender, Maya, Chinema4d, 3Dmax usw. stammen, und es verfügt über relativ einfache Dinge, die in: (Kugeln) Kugeln, (Flugzeug-) Flugzeuge, (Cubes) Würfel, (Zylinder-) Zyliner. Drei.js erstellen diese Objekte sehr leicht.
Ok, rede nicht unsinn, sieh dir den Code an:
<! DocType html>
<html>
<kopf>
<title> ThreeJSdemo </title>
<meta charset = "utf-8">
<Styles>
Körper
{
Rand: 0px;
Hintergrundfarbe:#B0B0B0;
Überlastung: versteckt;
}
</style>
</head>
<body>
<script src = "drei.js"> </script>
<Script>
var camera, szene, renderer;
var mesh;
init ();
animieren();
Funktion init () {
Szene = new Three.scene ();
camera = new Three.
camera.position.z = 400;
Szene.Add (Kamera);
Geometrie = new Three.CubeGeometry (200.200.200);
Material = new Three.Meshbasicmaterial ({Farbe: 0xff0000, Wireframe: true});
mesh = neue drei.mesh (Geometrie, Material);
szene.add (mesh);
Renderer = new Three.Webglrenderer ();
renderer.setSize (window.innnerwidth, window.innerHeight);
document.body.Appendchild (Renderer.Domelement);
}
Funktion animate () {
RequestAnimationFrame (Animate);
mesh.Rotation.x += 0,05;
mesh.Rotation.y += 0,05;
Renderer.Render (Szene, Kamera);
}
</script>
</body>
</html>
Dies ist der gesamte Code im Vergleich zum vorherigen Code mit WebGL -API. Dies ist einfach zu einfach.
Der Code ist sehr intuitiv, nur ein paar Schritte:
1. Erstellen Sie Szenenszene.
2. Erstellen Sie eine Kamerakamera.
3. Erstellen/Lastmodellgeometrie.
4. Beladen Sie das Material.
5. Rendern Sie das Modellobjekt -Netz (bestehend aus Geometrie und Material).
6. Animation aktivieren.
Dies ist eine Funktion, die von jedem Framework bereitgestellt wird. Die Verwendung verschiedener Frameworks ist im Grunde genommen gleich, außer dass die Funktionsnamen unterschiedlich sein können. In der folgenden Referenz werden viele Dokumente für Framework -Lern aufgeführt. Sie können verschiedene Möglichkeiten zum Lernen auswählen.
In Bezug auf Modelldaten möchte ich eine Sache sagen, denn JSON ist kurz und präzise, es ist besser für die Netzwerkübertragung geeignet. In Zukunft könnte es das am besten geeignete Modelldatenformat für WebGL werden, so dass viele Frameworks begonnen haben, Modelldaten im JSON -Format zu unterstützen.
Praktische Referenz:
Entwicklungszentrum: https://developer.mozilla.org/en/webgl
Premium -Online -Entwicklungstools:
Grundlegende Tutorials für verschiedene Frameworks:
WebGL Chinese Tutorial:? P = 42
Oak3d Chinese Tutorial:? Cat = 57
Cubicvr3d Offizielle Website:
Three.js Graphics Library: https://github.com/mrdoob/three.js
Sammelbeiträge für verschiedene Frames: