首頁 > 文章 > web前端 > 如何在webGL和p5.js中建立3D幾何體？

如何在webGL和p5.js中建立3D幾何體？

WBOY轉載: 2023-08-25 13:49:061033瀏覽

Creating 3D geometries in webGL and p5.js is a powerful way to create interactive and visually interesting web applications. With the ability to create basic shapes, add textures, serial and basic and transform 3D geometries, we can create a wide range of 3D graphics and animations. By understanding the basics of webGL and p5.js, we can create stunning 3D geometries for their web applications.

3D形狀創建

The first step is to generate some 3D geometries using webGL and p5.js built-in functions. These shapes can be produced using the library's built-in methods, such as sphere), library's built-in methods, such as sphere( .

使用webGL

在webGL中，gl.drawArrays()函數可以用來建構基本形狀。這個函數有三個輸入參數，分別是基本圖元類型、起始索引和要顯示的索引數。例如，要建立一個球體，我們可以使用gl.TRIANGLES基本圖元類型，並傳入球體的頂點和索引。

Example

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

Using p5.js

The createShape() function in p5.js can be used to make simple shapes. The CreateShape() function takes a single parameter i.e., “ the type of shape to be created”. To make a sphere, for exle, 支持” can use the createShape(SPHERE) method.

Example

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

Adding Textures

在生成了我們的3D設計之後，我們可以添加紋理來使它們更具吸引力。在webGL和p5.js中，可以分別使用gl.texImage2D()和texture() API將紋理應用於形狀。

使用webGL

The gl.texImage2D() function in webGL is used to generate a 2D texture from an image file. This function accepts lots of arguments, including the target, level of detail, inter pm, image wid and the image, inter fimage and inter p. format and type.

Example

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

Using p5.js

在p5.js中，texture()函數用於將紋理應用到一個物件上。 texture()函數接受一個參數：紋理影像檔。

範例

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

We applied WebGL and p5.js to build 3D geometry and applied WebGL and p5.js to build 3D geometry and applied WebGL and p5.js to build 3D geometry and applied animation in our web apps. We discussedsome basic concepts of creating 3D geometries in webGL and p5.js, including pess, textures.

以上是如何在webGL和p5.js中建立3D幾何體？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

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

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：TaffyDB – 適用於瀏覽器的 JavaScript 資料庫下一篇：TaffyDB – 適用於瀏覽器的 JavaScript 資料庫

看更多