Das Erstellen von 3D-Geometrien in webGL und p5.js ist eine leistungsstarke Möglichkeit, interaktive und visuell interessante Webanwendungen zu erstellen. Mit der Möglichkeit, grundlegende Formen zu erstellen, Texturen, Beleuchtung und Materialien hinzuzufügen und 3D-Geometrien zu transformieren, können wir erstellen Durch das Verständnis der Grundlagen von webGL und p5.js können wir atemberaubende 3D-Geometrien für ihre Webanwendungen erstellen
Erstellung von 3D-Formen
Der erste Schritt besteht darin, einige 3D-Geometrien mithilfe der integrierten Funktionen von webGL und p5.js zu generieren. Diese Formen können mit den integrierten Methoden der Bibliothek erstellt werden, z. B. sphere(), box() undzylinder()
Verwenden Sie webGL
In WebGL kann die Funktion gl.drawArrays() zum Erstellen grundlegender Formen verwendet werden. Diese Funktion verfügt über drei Eingabeparameter: den grundlegenden Grundtyp, den Startindex und die Anzahl der anzuzeigenden Indizes. Um beispielsweise eine Kugel zu erstellen, können wir den primitiven Typ gl.TRIANGLES verwenden und die Eckpunkte und Indizes der Kugel übergeben.
Beispiel
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// Set up the scene
const scene = new THREE.Scene();
// Set up the camera
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5;
// Set up the renderer
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("canvas"),
});
renderer.setSize(window.innerWidth, window.innerHeight);
// Create the sphere
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
// Render the scene
renderer.render(scene, camera);
</script>
</body>
</html>
Nach dem Login kopieren
Mit p5.js
Die Funktion createShape() in p5.js kann verwendet werden, um einfache Formen zu erstellen. Die Funktion CreateShape() benötigt einen einzelnen Parameter, d. h. „den Typ der zu erstellenden Form“, den wir verwenden können die Methode createShape(SPHERE).
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>3D Sphere Example</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.min.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
}
function draw() {
background(200);
// Create the sphere
push();
fill(255, 0, 0);
sphere(150);
pop();
}
</script>
</body>
</html>
Nach dem Login kopieren
Hinzufügen von Texturen
Nachdem wir unsere 3D-Designs erstellt haben, können wir Texturen hinzufügen, um sie attraktiver zu machen. In webGL und p5.js können Texturen mithilfe der APIs gl.texImage2D() bzw. textur() auf Formen angewendet werden.
Verwenden Sie webGL
Die gl.texImage2D()-Funktion in webGL wird verwendet, um eine 2D-Textur aus einer Bilddatei zu generieren. Diese Funktion akzeptiert viele Argumente, einschließlich des Ziels, des Detaillierungsgrades, des internen Formats, der Bildbreite und -höhe sowie des Bilddatenformats Typ.
Beispiel
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script>
</head>
<body>
<script>
// Set up the scene
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create a cube
var geometry = new THREE.BoxGeometry(3, 3, 3);
var texture = new THREE.TextureLoader().load("https://images.pexels.com/photos/1029604/pexels-photo-1029604.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
var material = new THREE.MeshBasicMaterial({ map: texture });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Position the camera
camera.position.z = 5;
// Render the scene
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
Nach dem Login kopieren
Mit p5.js
In p5.js wird die Funktion „texture()“ verwendet, um eine Textur auf ein Objekt anzuwenden. Die Funktion „texture()“ akzeptiert einen Parameter: die Texturbilddatei.
Beispiel
<html>
<head>
<title>p5.js Texture Example</title>
<script src="https://cdn.jsdelivr.net/npm/p5"></script>
<script src="https://cdn.jsdelivr.net/npm/p5/lib/addons/p5.dom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5/lib/addons/p5.sound.min.js"></script>
</head>
<body>
<script>
let img;
function preload() {
img = loadImage("https://images.pexels.com/photos/1029604/pexels-photo-1029604.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
}
function setup() {
createCanvas(650, 300, WEBGL);
noStroke();
}
function draw() {
background(200);
texture(img);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(100);
}
</script>
</body>
</html>
Nach dem Login kopieren
Wir haben WebGL und p5.js verwendet, um 3D-Geometrie und Animationen in unseren Web-Apps zu erstellen. Wir haben einige grundlegende Konzepte zum Erstellen von 3D-Geometrien in webGL und p5.js besprochen, einschließlich Formen, Texturen, Beleuchtung und mehr
Das obige ist der detaillierte Inhalt vonWie erstelle ich 3D-Geometrie in webGL und p5.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
