Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create 3D Geometries in webGL and p5.js?
Creating 3D geometries in WebGL and p5.js enables developers to build interactive and visually compelling web applications. With built-in functions for basic shapes, texture mapping, and transformations, both libraries provide powerful tools for 3D graphics development.
Understanding WebGL vs p5.js for 3D Graphics
WebGL is a low-level graphics API that provides direct access to the GPU, while p5.js offers a higher-level, artist-friendly interface. For complex 3D applications, Three.js (built on WebGL) is often preferred, whereas p5.js excels in creative coding and educational contexts.
Creating Basic 3D Shapes
Using Three.js (WebGL-based)
Three.js simplifies WebGL by providing an object-oriented approach to 3D graphics. Here's how to create a basic sphere:
<!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
p5.js provides simple functions like sphere(), box(), and cylinder() for creating 3D shapes. Enable WEBGL mode using createCanvas(width, height, WEBGL):
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.min.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(200);
// Create a red sphere
fill(255, 0, 0);
sphere(100);
}
</script>
</body>
</html>
Adding Textures to 3D Objects
Texturing with Three.js
Three.js uses TextureLoader to load images and apply them as materials to 3D objects:
<!DOCTYPE html>
<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
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create a textured cube
const geometry = new THREE.BoxGeometry(3, 3, 3);
const texture = new THREE.TextureLoader().load(
"https://images.pexels.com/photos/1029604/pexels-photo-1029604.jpeg?auto=compress&cs=tinysrgb&w=400"
);
const material = new THREE.MeshBasicMaterial({ map: texture });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// Animation loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
Texturing with p5.js
Use loadImage() in preload() and texture() to apply images to 3D shapes:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5"></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=400");
}
function setup() {
createCanvas(400, 400, WEBGL);
noStroke();
}
function draw() {
background(200);
// Apply texture and create rotating box
texture(img);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(100);
}
</script>
</body>
</html>
Key Differences
| Aspect | Three.js (WebGL) | p5.js |
|---|---|---|
| Learning Curve | Moderate to steep | Beginner-friendly |
| Performance | High performance | Good for simple scenes |
| 3D Shape Creation | new THREE.SphereGeometry() | sphere() |
| Texture Loading | TextureLoader().load() | loadImage() + texture() |
Common Use Cases
Three.js is ideal for complex 3D applications, games, architectural visualizations, and data visualization requiring high performance.
p5.js excels in creative coding, educational projects, interactive art installations, and rapid prototyping of 3D concepts.
Conclusion
Both WebGL (via Three.js) and p5.js offer powerful approaches to 3D geometry creation. Choose Three.js for performance-critical applications and p5.js for creative coding and educational purposes. Understanding both libraries expands your toolkit for web-based 3D graphics development.
944 Views
