Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencipta geometri 3D dalam webGL dan p5.js?

Bagaimana untuk mencipta geometri 3D dalam webGL dan p5.js?

WBOYke hadapan: 2023-08-25 13:49:061033semak imbas

Mencipta geometri 3D dalam webGL dan p5.js ialah cara yang berkesan untuk mencipta aplikasi web yang interaktif dan menarik secara visual Dengan keupayaan untuk mencipta bentuk asas, menambah tekstur, pencahayaan dan bahan serta mengubah geometri 3D, kami boleh mencipta. pelbagai grafik dan animasi 3D Dengan memahami asas webGL dan p5.js, kami boleh mencipta geometri 3D yang menakjubkan untuk aplikasi web mereka

Penciptaan bentuk 3D

Langkah pertama ialah menjana beberapa geometri 3D menggunakan fungsi terbina dalam webGL dan p5.js Bentuk ini boleh dihasilkan menggunakan kaedah terbina dalam perpustakaan, seperti sfera(), kotak(), dan silinder(

Gunakan webGL

Dalam webGL, fungsi gl.drawArrays() boleh digunakan untuk membina bentuk asas. Fungsi ini mempunyai tiga parameter input, iaitu jenis primitif asas, indeks permulaan dan bilangan indeks yang akan dipaparkan. Contohnya, untuk mencipta sfera, kita boleh menggunakan jenis primitif gl.TRIANGLES dan lulus dalam bucu dan indeks sfera itu.

Contoh

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

Menggunakan p5.js

Fungsi createShape() dalam p5.js boleh digunakan untuk membuat bentuk ringkas Fungsi CreateShape() mengambil satu parameter iaitu, "jenis bentuk yang akan dibuat, contohnya, kita boleh gunakan kaedah createShape(SPHERE).

Contoh

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

Menambah Tekstur

Selepas menjana reka bentuk 3D kami, kami boleh menambah tekstur untuk menjadikannya lebih menarik. Dalam webGL dan p5.js, tekstur boleh digunakan pada bentuk menggunakan gl.texImage2D() dan texture() API masing-masing.

Gunakan webGL

Fungsi gl.texImage2D() dalam webGL digunakan untuk menjana tekstur 2D daripada fail imej Fungsi ini menerima banyak hujah, termasuk sasaran, tahap perincian, format dalaman, lebar dan ketinggian imej serta format data imej dan. taip.

Contoh

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

Menggunakan p5.js

Dalam p5.js, fungsi tekstur() digunakan untuk menggunakan tekstur pada objek. Fungsi tekstur() menerima satu parameter: fail imej tekstur.

Contoh

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

Kami menggunakan WebGL dan p5.js untuk membina geometri 3D dan menggunakan animasi dalam apl web kami. Kami membincangkan beberapa konsep asas untuk mencipta geometri 3D dalam webGL dan p5.js, termasuk bentuk, tekstur, pencahayaan dan banyak lagi

Atas ialah kandungan terperinci Bagaimana untuk mencipta geometri 3D dalam webGL dan p5.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：TaffyDB – Pangkalan data JavaScript untuk penyemak imbasArtikel seterusnya：TaffyDB – Pangkalan data JavaScript untuk penyemak imbas

Artikel berkaitan

Lihat lagi