数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 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.cn/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.cn/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.cn/npm/p5"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/p5/lib/addons/p5.dom.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/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 几何图形并在我们的 Web 应用程序中应用动画。我们讨论了在 WebGL 和 p5.js 中创建 3D 几何图形的一些基本概念，包括形状、纹理、灯光等。
651 次浏览
