深入理解 Three.js 中的 Mesh 对象

最新推荐文章于 2025-06-08 17:09:38 发布

原创最新推荐文章于 2025-06-08 17:09:38 发布 · 547 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #前端 #开发语言

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看

在 Three.js 这个强大的 JavaScript 3D 库中，Mesh对象扮演着至关重要的角色。它是构成 3D 场景中可见物体的基础元素，通过组合几何形状（Geometry）和材质（Material），让我们能够在网页上创建出各种绚丽多彩、栩栩如生的 3D 模型。

Mesh 对象的基本概念

简单来说，Mesh就像是现实世界中用某种材料包裹着的一个物体形状。在 Three.js 里，几何形状定义了物体的外形，比如立方体、球体、圆柱体等；而材质则决定了物体的外观特性，例如颜色、光泽度、透明度等。Mesh将这两者结合起来，使其在场景中以具体的视觉形象呈现。

Mesh 对象的 API 使用

创建 Mesh 对象

创建一个Mesh对象非常简单，首先需要创建一个几何形状对象和一个材质对象，然后将它们作为参数传递给Mesh的构造函数。以下是一个创建简单立方体Mesh的示例代码：

代码解读

复制代码

// 创建一个立方体几何形状 const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个基础材质，设置颜色为蓝色 const material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // 创建Mesh对象，将几何形状和材质传入 const cube = new THREE.Mesh(geometry, material);

在这段代码中，THREE.BoxGeometry创建了一个边长为 1 的立方体几何形状。THREE.MeshBasicMaterial创建了一个基础材质，这里设置颜色为蓝色（十六进制颜色码 0x0000ff）。最后，通过THREE.Mesh将几何形状和材质组合成一个立方体Mesh对象。

设置 Mesh 的位置和旋转

一旦创建了Mesh对象，我们通常需要对其在场景中的位置和方向进行调整。Mesh对象具有position和rotation属性来实现这些操作。

代码解读

复制代码

// 设置Mesh在x轴方向上的位置为2 cube.position.x = 2; // 设置Mesh绕y轴旋转45度（注意Three.js中旋转以弧度为单位，45度转换为弧度为Math.PI / 4） cube.rotation.y = Math.PI / 4;

通过修改position的x、y、z属性，可以将Mesh放置在场景中的不同位置。而通过修改rotation的x、y、z属性，可以让Mesh绕相应的轴进行旋转。

将 Mesh 添加到场景中

要让创建好的Mesh在场景中显示出来，需要将其添加到Scene对象中。

代码解读

复制代码

// 假设已经创建了一个Scene对象，名为scene scene.add(cube);

这样，我们创建的蓝色立方体Mesh就会出现在场景中，并按照设置的位置和旋转角度进行显示。

完整示例

下面是一个完整的使用Mesh对象创建一个简单 3D 场景的示例代码，包含了初始化场景、相机、渲染器等必要步骤。

html

代码解读

复制代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Three.js Mesh Example</title> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script> // 创建场景 const scene = new THREE.Scene(); // 创建相机 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建一个立方体几何形状 const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个基础材质，设置颜色为蓝色 const material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // 创建Mesh对象，将几何形状和材质传入 const cube = new THREE.Mesh(geometry, material); // 设置Mesh在x轴方向上的位置为2 cube.position.x = 2; // 设置Mesh绕y轴旋转45度（注意Three.js中旋转以弧度为单位，45度转换为弧度为Math.PI / 4） cube.rotation.y = Math.PI / 4; // 将Mesh添加到场景中 scene.add(cube); function animate() { requestAnimationFrame(animate); // 可以在这里添加动画逻辑，例如让立方体持续旋转 cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); </script> </body> </html>

在这个示例中，我们创建了一个包含一个蓝色旋转立方体的 3D 场景。通过不断更新立方体的旋转角度，实现了动画效果。

通过以上对 Three.js 中Mesh对象的介绍、API 使用讲解以及完整示例展示，相信你对Mesh对象有了更深入的理解。利用Mesh对象，结合不同的几何形状和材质，你可以在 Three.js 中创建出各种复杂精美的 3D 场景和模型，开启你的 3D Web 开发之旅。

原文：https://juejin.cn/post/7490849016851857443

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看