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) |
| getWorldPosition | 获取世界坐标 | mesh.getWorldPosition(vec) |
| visible | 渲染可见性 | mesh.visible = false |
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、点击事件处理
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 的核心组件，掌握其使用技巧能显著提升开发效率。建议：
- 根据场景需求选择合适的材质类型
- 复杂场景使用几何体合并和实例化
- 定期使用 Chrome 的 Three.js 插件进行性能分析
更多three.js、cesium.js开源案例，请移至gitee.com/giser2017/t…
