three.js 在 webGL 添加纹理

在我们生成了3D设计之后，我们可以添加纹理使其更加吸引人。在 webGL 和 p5.js中，可以使用 gl.texImage2D() 和 texture()  API来为形状应用纹理。

使用 webGL

在 webGL 中，gl.texImage2D() 函数用于从图像文件生成2D纹理。该函数接受许多参数，包括目标，细节级别，内部格式，图像的宽度和高度，以及图像数据的格式和类型。

为了方便，我将使用 vite 搭建一个原生 js 项目。

1.创建项目

npm create vite@latest p5-demo
选：Vanilla
选：JavaScript

2.初始化项目
 cd p5-demo
 cnpm install

3.安装 p5.js
 cnpm install p5 --save

cd p5-demo
curl -O https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js

编写 three_texture.html  如下

5.运行 npm run dev 
访问 http://localhost:5173/three_texture.html

---

 在 p5.js 中使用 texture() 函数可以将纹理应用到一个对象上。texture() 函数接受一个参数：纹理图像文件。

编写 p5_texture.html  如下

 访问 http://localhost:5173/p5_texture.html

 可见同样的程序 p5.js 的代码量比 three.js 和 python 都要少。