极客笔记如何在webGL和p5.js中创建3D几何体
在webGL和p5.js中创建3D几何体是创建交互性和视觉上有趣的Web应用程序的强大方式。通过能够创建基本形状，添加纹理、光照和材料，以及变换3D几何体，我们可以创建各种各样的3D图形和动画。通过了解webGL和p5.js的基础知识，我们可以为他们的Web应用程序创建令人惊叹的3D几何体。
创建3D形状
第一步是使用webGL和p5.js的内置函数生成一些3D几何体。这些形状可以使用库的内置方法（如sphere()、box()和cylinder()）生成。
使用webGL
在webGL中，可以使用gl.drawArrays()函数构建基本形状。原始类型、起始索引和要显示的索引数量是这个函数的三个输入。例如，要创建一个球体，我们可以使用gl.TRIANGLES原始类型并传入球体的顶点和索引。
示例
<!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>
使用p5.js
p5.js中的createShape()函数可用于创建简单的形状。createShape()函数接受一个参数，即“要创建的形状的类型”。例如，要创建一个球体，我们可以使用createShape(SPHERE)方法。
示例
<!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>
添加纹理
在我们生成了3D设计之后，我们可以添加纹理使其更加吸引人。在webGL和p5.js中，可以使用gl.texImage2D()和texture() API来为形状应用纹理。
使用webGL
在webGL中，gl.texImage2D()函数用于从图像文件生成2D纹理。该函数接受许多参数，包括目标，细节级别，内部格式，图像的宽度和高度，以及图像数据的格式和类型。
示例
<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>
使用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>
我们应用了WebGL和p5.js来构建3D几何体，并在我们的网页应用程序中应用动画。我们讨论了在WebGL和p5.js中创建3D几何体的一些基本概念，包括形状、纹理、灯光等等。