search

Home >Web Front-end >JS Tutorial >How to create 3D geometry in webGL and p5.js?

How to create 3D geometry in webGL and p5.js?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBforward
2023-08-25 13:49:061288browse

How to create 3D geometry in webGL and p5.js?

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

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() .

Use webGL

In webGL, the gl.drawArrays() function can be used to build basic shapes. This function has three input parameters, which are the basic primitive type, the starting index and the number of indexes to be displayed. For example, to create a sphere, we can use the gl.TRIANGLES primitive type and pass in the vertices and indices of the sphere.

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

After generating our 3D designs, we can add textures to make them more attractive. In webGL and p5.js, textures can be applied to shapes using the gl.texImage2D() and texture() APIs respectively.

Use 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

In p5.js, the texture() function is used to apply texture to an object. The texture() function accepts one parameter: the texture image file.

Example

<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 discussed some basic concepts of creating 3D geometries in webGL and p5.js, including shapes, textures, lighting, and more.

The above is the detailed content of How to create 3D geometry in webGL and p5.js?. For more information, please follow other related articles on the PHP Chinese website!

for format using internal JS function 对象 this transform animation webgl
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：TaffyDB – JavaScript database for the browserNext article：TaffyDB – JavaScript database for the browser

Related articles

See more