如何在webGL和p5.js中创建3D几何体？

WBOY 转载: 2023-08-25 13:49:06 673浏览

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, lighting, and materials, 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(), box(), and cylinder().

使用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 example, we 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, internal format, image width and height, and image data 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 animation in our web apps. We discussedsome basic concepts of creating 3D geometries in webGL and p5.js, including shapes, textures, lighting, and more.

以上就是如何在webGL和p5.js中创建3D几何体？的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：TaffyDB – 适用于浏览器的 JavaScript 数据库下一条：Google 是否会抓取包含正文内容的 JavaScript