Maison > Article > interface Web > Comment créer une géométrie 3D dans webGL et p5.js ?

Comment créer une géométrie 3D dans webGL et p5.js ?

WBOYavant: 2023-08-25 13:49:061032parcourir

Créer des géométries 3D dans webGL et p5.js est un moyen puissant de créer des applications Web interactives et visuellement intéressantes. Avec la possibilité de créer des formes de base, d'ajouter des textures, de l'éclairage et des matériaux, et de transformer des géométries 3D, nous pouvons créer. une large gamme de graphiques et d'animations 3D En comprenant les bases de webGL et p5.js, nous pouvons créer de superbes géométries 3D pour leurs applications Web

Création de formes 3D

La première étape consiste à générer des géométries 3D à l'aide des fonctions intégrées de webGL et p5.js. Ces formes peuvent être produites à l'aide des méthodes intégrées de la bibliothèque, telles que sphère(), boîte() et cylindre().

Utilisez webGL

Dans webGL, la fonction gl.drawArrays() peut être utilisée pour créer des formes de base. Cette fonction dispose de trois paramètres d'entrée, qui sont le type primitif de base, l'index de départ et le nombre d'index à afficher. Par exemple, pour créer une sphère, on peut utiliser le type primitif gl.TRIANGLES et passer les sommets et indices de la sphère.

Exemple

<!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>

Utilisation de p5.js

La fonction createShape() dans p5.js peut être utilisée pour créer des formes simples. La fonction CreateShape() prend un seul paramètre, c'est-à-dire « le type de forme à créer ». Pour créer une sphère, par exemple, nous pouvons utiliser. la méthode createShape(SPHERE).

Exemple

<!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>

Ajout de textures

Après avoir généré nos conceptions 3D, nous pouvons ajouter des textures pour les rendre plus attrayantes. Dans webGL et p5.js, les textures peuvent être appliquées aux formes à l'aide respectivement des API gl.texImage2D() et texture().

Utilisez webGL

La fonction gl.texImage2D() de webGL est utilisée pour générer une texture 2D à partir d'un fichier image. Cette fonction accepte de nombreux arguments, notamment la cible, le niveau de détail, le format interne, la largeur et la hauteur de l'image, ainsi que le format des données d'image. tapez.

Exemple

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

Utilisation de p5.js

Dans p5.js, la fonction texture() est utilisée pour appliquer une texture à un objet. La fonction texture() accepte un paramètre : le fichier image de texture.

Exemple

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

Nous avons appliqué WebGL et p5.js pour créer une géométrie 3D et appliquer une animation dans nos applications Web. Nous avons discuté de certains concepts de base de la création de géométries 3D dans webGL et p5.js, notamment les formes, les textures, l'éclairage, et plus encore

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：TaffyDB – Base de données JavaScript pour le navigateurArticle suivant：TaffyDB – Base de données JavaScript pour le navigateur

Articles Liés

Voir plus