Heim >Web-Frontend >js-Tutorial >Wie erstelle ich 3D-Geometrie in webGL und p5.js?

Wie erstelle ich 3D-Geometrie in webGL und p5.js?

WBOYnach vorne: 2023-08-25 13:49:061107Durchsuche

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>

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>

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>

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>

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!

for format using internal JS function 对象 this transform animation webgl

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：TaffyDB – JavaScript-Datenbank für den BrowserNächster Artikel：TaffyDB – JavaScript-Datenbank für den Browser

In Verbindung stehende Artikel

Mehr sehen