极客教程JavaScript 如何在webGL和p5.js中创建3D几何图形
在webGL和p5.js中创建3D几何图形是创建交互式和视觉上有趣的网络应用程序的一种强大方式。有了创建基本形状、添加纹理、照明和材料以及变换三维几何体的能力，我们就可以创建各种三维图形和动画。通过了解webGL和p5.js的基础知识，我们可以为他们的网络应用创建令人惊叹的3D几何图形。
3D形状的创建
第1步是使用webGL和p5.js内置函数生成一些3D几何图形。这些形状可以使用库的内置方法产生，如sphere()、box()和cola()。
使用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几何体的一些基本概念，包括形状、纹理、照明等等。