从零开始学习three.js（7）：一文详解three.js中的物体Mesh

Mesh核心概念

Mesh是Three.js中可渲染3D对象的基本单元，由几何体（Geometry）和材质（Material）组合而成

。作为Object3D的子类，Mesh继承位置(position)、旋转(rotation)、缩放(scale)等三维变换属性。

Mesh创建与配置

1、基础创建

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

2、Mesh组成部分

1. 几何体（Geometry）

• 基础几何体：BoxGeometry, SphereGeometry, CylinderGeometry
• 自定义几何体：通过 BufferGeometry 定义顶点数据
• 性能优化：使用 BufferGeometry 替代传统 Geometry

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([0,0,0, 1,0,0, 0,1,0]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

2. 材质（Material）

材质类型	光照支持	性能消耗	典型应用场景
MeshBasicMaterial	否	低	线框、简单颜色
MeshPhongMaterial	是	中	光泽表面（塑料、金属）
MeshStandardMaterial	是	高	PBR 物理渲染
MeshLambertMaterial	是	中	无光泽表面（木材、石材）

3. 多材质配置

立方体支持6个面独立材质：

const materials = [
  new THREE.MeshBasicMaterial({map: frontTex}),  // 前
  new THREE.MeshPhongMaterial({specular: 0x111111}), // 后
  // 其他面材质...
];
const cube = new THREE.Mesh(geometry, materials); // 材质顺序对应立方体面[2,7](@ref)

关键属性与方法

1、基本配置

属性/方法	功能描述	示例代码
position	局部坐标系位置	mesh.position.set(2,0,-1)
rotation	欧拉角旋转（弧度制）	mesh.rotation.y += 0.01
scale	三轴缩放比例	mesh.scale.multiplyScalar(2);mesh.scale.set(1,2,3)
visible	渲染可见性	mesh.visible = false
castShadow / receiveShadow	是否投射或接收阴影	mesh.castShadow = false
frustumCulled	是否启用视锥体裁剪（默认 true）	mesh.frustumCulled= false
renderOrder	渲染顺序（数值越小越早渲染）	mesh.renderOrder= 1
getWorldPosition	获取世界坐标	mesh.getWorldPosition(vec)
translateX(distance)、translateY(distance)、translateZ(distance)	这些方法可以方便地将Mesh沿指定轴移动一定距离	mesh.translateX(10)
lookAt(target)	使Mesh朝向指定的目标点	mesh.lookAt(0, 0, 0)

2、矩阵更新

• 手动更新：mesh.matrixAutoUpdate = false; mesh.updateMatrix();
• 自动更新：默认开启，适合动态变化的物体

高级应用

1、自定义材质（ShaderMaterial）

const material = new THREE.ShaderMaterial({
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
  `
});

2、性能优化技巧

• 几何体合并：使用 BufferGeometryUtils.mergeBufferGeometries
• 实例化渲染：InstancedMesh 提升同类物体渲染效率
• LOD（细节层次） ：根据距离切换不同精度模型

常见问题与解决方案

1、透明材质显示异常

• 解决方案：设置 material.transparent = true 并调整渲染顺序

2、阴影不显示

mesh.castShadow = true; // 产生阴影
mesh.receiveShadow = true; // 接收阴影
renderer.shadowMap.enabled = true;

3、点击事件处理

//raycaster.intersectObject方法
const raycaster = new THREE.Raycaster();
function onClick(event) {
  const mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObject(mesh);
  if (intersects.length > 0) {
    console.log('Mesh 被点击！');
  }
}

结语

Mesh 是 Three.js 的核心组件，掌握其使用技巧能显著提升开发效率。建议：

1. 根据场景需求选择合适的材质类型
2. 复杂场景使用几何体合并和实例化
3. 定期使用 Chrome 的 Three.js 插件进行性能分析

更多three.js、cesium.js开源案例，请移至https://gitee.com/giser2017/threejs-cesium-webgpu-vue-js