three.js 在 webGL 添加纹理

原创已于 2025-03-16 15:30:37 修改 · 466 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #webgl #three.js #p5.js

于 2025-03-08 23:42:08 首次发布

javascript 同时被 2 个专栏收录

42 篇文章

订阅专栏

three.js

3 篇文章

订阅专栏

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

使用 webGL

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

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

1.创建项目

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

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

3.安装 three.js
cnpm install three@0.160.0 --save

或者 cd three-demo
curl -O https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js

4.编写示例 three_texture.html 如下

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="three.min.js"></script>
</head>
<body>
  <script>
    // curl -O https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js
    // 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);
    // 随意选一个.jpg 文件作为纹理图像
    var texture = new THREE.TextureLoader().load("./海边.jpg");
    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>
  <audio controls>
    <source src="your.mp3" \> 
  </audio>
</body>
</html>

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

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

编写 p5_texture.html 如下

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>p5.js Texture Example</title>
   <script src="p5.min.js"></script>
</head>
<body>
   <script>
      let img;
      function preload() { 
         img = loadImage("./海边.jpg");
      }
      function setup() {
         createCanvas(650, 400, WEBGL);
         noStroke();
      }
      function draw() {
         background(200);
         texture(img);
         rotateX(frameCount * 0.01);
         rotateY(frameCount * 0.01);
         box(100);
      }
   </script>
</body>
</html>

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

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