一、技术背景与优势解析 当需要渲染大量同类型物体（如星空、雨滴、粒子特效）时，传统逐个创建网格的方式会导致性能急剧下降。Three.js的InstancedBufferGeometry通过实例化渲染技

本文将会以three.js 官网的一个轿车3D展示demo为例，进行讲解。示例具体查看地址：www.yanhuangxueyuan.com/threejs/exa…

一、主要开发流程

1. 搭建3D渲染场景
2. 使用 GridHelper 对象，生成网格地板
3. 使用 GLTFLoader 加载轿车模型，并自定义模型材质，可通过颜色选择器操控材质样式
4. 将四个车轮模型保存在wheels对象中，通过改变车轮模型的 rotation.x 属性，让车轮旋转起来，模拟汽车奔跑。

二、查看3D模型

可以使用3D软件或者在线工具，预览轿车模型。这里推荐一个在线地址，用于浏览模型： gltf.nsdt.cloud/

三、绘制网格地板

GridHelper 是 Three.js 里的一个实用工具，用于创建网格辅助线，能在场景中直观地显示网格，辅助你理解和定位物体的位置。
该demo中使用 GridHelper 来模拟地板。

grid = new THREE.GridHelper( 20, 40, 0xffffff, 0xffffff );
grid.material.opacity = 0.2;
grid.material.depthWrite = false;
grid.material.transparent = true;
scene.add( grid );

代码解读：

1. 实例化GridHelper对象

grid = new THREE.GridHelper( 20, 40, 0xffffff, 0xffffff );

参数说明：

• 第一个参数 20：表示网格的大小（边长），这里意味着创建的网格是一个边长为 20 个单位的正方形区域。
• 第二个参数 40：表示网格的分割数量，即把整个网格区域在每个方向上平均分割成 40 份，这样会形成更密集的网格线。
• 第三个参数 0xffffff：指定网格中轴线（穿过网格中心的线）的颜色，0xffffff 代表白色。
• 第四个参数 0xffffff：指定网格线的颜色，同样是白色。

2. 设置材质透明度

grid.material.opacity = 0.2;

opacity 属性用于设置材质的透明度，取值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。这里将透明度设置为 0.2，意味着网格线会呈现出半透明的效果。

3. 禁用深度写入

grid.material.depthWrite = false;

• depthWrite 是材质的一个属性，用于控制是否将该材质所渲染的物体的深度信息写入深度缓冲区。
• 当设置为 false 时，意味着该材质渲染的物体不会影响深度缓冲区，这样可能会使得该物体在渲染时不会被其他物体遮挡，即使从深度上看它应该被遮挡。

4. 启用材质透明效果

grid.material.transparent = true;

transparent 属性用于启用材质的透明效果。当设置为 true 时，材质会根据 opacity 属性的值来呈现透明效果。

四、加载轿车模型，并自定义材质（核心）

下面将会介绍如何使用 Three.js 加载一个 GLTF 格式的汽车模型，并为模型的不同部分（车身、细节、玻璃等）设置不同的材质。同时，允许用户通过改变颜色值来动态改变这些部分的颜色。此外，还为汽车模型添加了底部阴影效果。

1. 定义材质

// 车身材质
const bodyMaterial = new THREE.MeshPhysicalMaterial( {
    color: 0xff0000, // 默认颜色
    metalness: 1.0, // 车外壳金属都
    roughness: 0.5, // 车外壳粗糙度
    clearcoat: 1.0, // 清漆层强度为 1.0，模拟清漆效果
    clearcoatRoughness: 0.03 //清漆层的粗糙度为 0.03
});

// 细节部分（如轮毂、装饰条等）的材质
const detailsMaterial = new THREE.MeshStandardMaterial( {
    color: 0xffffff, 
    metalness: 1.0, 
    roughness: 0.5
});

// 玻璃材质
const glassMaterial = new THREE.MeshPhysicalMaterial( {
    color: 0xffffff, 
    metalness: 0.25, 
    roughness: 0, 
    transmission: 1.0
});

（1） MeshPhysicalMaterial

• MeshPhysicalMaterial 是具有有金属度metalness、粗糙度roughness属性的PBR材质。
• MeshPhysicalMaterial是基于物理的材质，能够模拟真实世界中的光照和材质交互效果。对于车身材质，使用这种材质可以让车身在不同光照条件下表现出更加逼真的反射、折射、阴影等效果，使车身看起来更有质感和真实感。

（2） MeshStandardMaterial

MeshStandardMaterial也是一种常用的材质，它在计算光照时采用了标准的 PBR（基于物理的渲染）模型，能够提供较为真实的光照效果，同时性能相对较好。对于汽车的细节部分，如轮辋（rim）和装饰条（trim）等，使用MeshStandardMaterial可以在保证视觉效果的同时，减少计算量，提高渲染性能。

2. 模型加载

// 车底部阴影图
const shadow = new THREE.TextureLoader().load( 'models/gltf/ferrari_ao.png' );

// 车3D模型
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );

const loader = new GLTFLoader();
loader.setDRACOLoader( dracoLoader );

loader.load( 'models/gltf/ferrari.glb', function ( gltf ) {
const carModel = gltf.scene.children[ 0 ];
})

• 汽车底部阴影纹理图： 使用 THREE.TextureLoader 加载 ferrari_ao.png 图片
• Draco 解码器设置：创建 DRACOLoader 对象并设置解码器路径，用于处理压缩的 GLTF 模型。
• GLTF 模型加载：创建 GLTFLoader 对象并设置 Draco 解码器，然后使用 load 方法加载 ferrari.glb 模型。

3. 替换汽车材质，收集车轮

carModel.getObjectByName( 'body' ).material = bodyMaterial;

carModel.getObjectByName( 'rim_fl' ).material = detailsMaterial;
carModel.getObjectByName( 'rim_fr' ).material = detailsMaterial;
carModel.getObjectByName( 'rim_rr' ).material = detailsMaterial;
carModel.getObjectByName( 'rim_rl' ).material = detailsMaterial;
carModel.getObjectByName( 'trim' ).material = detailsMaterial;

carModel.getObjectByName( 'glass' ).material = glassMaterial;

wheels.push(
carModel.getObjectByName( 'wheel_fl' ),
carModel.getObjectByName( 'wheel_fr' ),
carModel.getObjectByName( 'wheel_rl' ),
carModel.getObjectByName( 'wheel_rr' )
);

4. 汽车底部阴影

const mesh = new THREE.Mesh(
    new THREE.PlaneGeometry( 0.655 * 4, 1.3 * 4 ),
    new THREE.MeshBasicMaterial( {
        map: shadow, 
        blending: THREE.MultiplyBlending, 
        toneMapped: false, 
        transparent: true 
    } )
);
mesh.rotation.x = - Math.PI / 2;
mesh.renderOrder = 2;
carModel.add( mesh );

scene.add( carModel );

• 定义一个网格对象，并将之前加载好的阴影纹理应用到该材质上。
• 对mesh 沿x轴旋转90度，使其平行于地面

5. 使车轮和地面动起来

function render() {
controls.update();
const time = - performance.now() / 1000;
for ( let i = 0; i < wheels.length; i ++ ) {
wheels[ i ].rotation.x = time * Math.PI * 2;
}
grid.position.z = - ( time ) % 1;
renderer.render( scene, camera );
stats.update();
}

• 旋转车轮： for循环遍历四个车轮对象，wheels[i].rotation.x 表示第 i 个车轮绕 X 轴的旋转角度
• 移动网格辅助线：( time ) % 1 计算出 time 的小数部分，取负号后将其赋值给 grid.position.z，使得网格辅助线在 Z 轴上以 1 个单位为周期循环移动，从而产生网格滚动的动画效果

6. 动态更改车模型材质颜色

const bodyColorInput = document.getElementById( 'body-color' );
bodyColorInput.addEventListener( 'input', function () {
bodyMaterial.color.set( this.value );
});

const detailsColorInput = document.getElementById( 'details-color' );
detailsColorInput.addEventListener( 'input', function () {
detailsMaterial.color.set( this.value );
});

const glassColorInput = document.getElementById( 'glass-color' );
glassColorInput.addEventListener( 'input', function () {
glassMaterial.color.set( this.value );
});

通过 color.set方法，修改材质颜色

四、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - car</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
body {
color: #bbbbbb;
background: #333333;
}
a {
color: #08f;
}
.colorPicker {
display: inline-block;
margin: 0 10px
}
</style>
</head>

<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> car materials<br/>
Ferrari 458 Italia model by <a href="https://sketchfab.com/models/57bf6cc56931426e87494f554df1dab6" target="_blank" rel="noopener">vicent091036</a>
<br><br>
<span class="colorPicker"><input id="body-color" type="color" value="#ff0000"></input><br/>Body</span>
<span class="colorPicker"><input id="details-color" type="color" value="#ffffff"></input><br/>Details</span>
<span class="colorPicker"><input id="glass-color" type="color" value="#ffffff"></input><br/>Glass</span>
</div>

<div id="container"></div>

<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>

<script type="module">

import * as THREE from 'three';

import Stats from 'three/addons/libs/stats.module.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';

let camera, scene, renderer;
let stats;

let grid;
let controls;

const wheels = [];

function init() {

const container = document.getElementById( 'container' );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
// setAnimationLoop: 每个可用帧都会调用的函数。 如果传入“null"，所有正在进行的动画都会停止。
renderer.setAnimationLoop( render );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.85; // 色调映射的曝光级别。默认是1
container.appendChild( renderer.domElement );

window.addEventListener( 'resize', onWindowResize );

stats = new Stats();
container.appendChild( stats.dom );

//

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.set( 4.25, 1.4, - 4.5 );

// OrbitControls: 轨道控制器
controls = new OrbitControls( camera, container );
controls.maxDistance = 9; // 能够将相机向外移动多少， 其默认值为Infinity
controls.maxPolarAngle = THREE.MathUtils.degToRad( 90 ); // 你能够垂直旋转的角度的上限，范围是0到Math.PI，其默认值为Math.PI。
controls.target.set( 0, 0.5, 0 );
controls.update();

scene = new THREE.Scene();
scene.background = new THREE.Color( 0x333333 );
// environment: 若该值不为null，则该纹理贴图将会被设为场景中所有物理材质的环境贴图。 然而，该属性不能够覆盖已存在的、已分配给 MeshStandardMaterial.envMap 的贴图。默认为null。
scene.environment = new RGBELoader().load( 'textures/equirectangular/venice_sunset_1k.hdr' );
scene.environment.mapping = THREE.EquirectangularReflectionMapping;
scene.fog = new THREE.Fog( 0x333333, 10, 15 );

// 网格地板
grid = new THREE.GridHelper( 20, 40, 0xffffff, 0xffffff );
grid.material.opacity = 0.2;
grid.material.depthWrite = false;
grid.material.transparent = true;
scene.add( grid );

// materials

const bodyMaterial = new THREE.MeshPhysicalMaterial( {
color: 0xff0000, 
metalness: 1.0, 
roughness: 0.5, 
clearcoat: 1.0, // 清漆层
clearcoatRoughness: 0.03
} );

const detailsMaterial = new THREE.MeshStandardMaterial( {
color: 0xffffff, metalness: 1.0, roughness: 0.5
} );

const glassMaterial = new THREE.MeshPhysicalMaterial( {
color: 0xffffff, metalness: 0.25, roughness: 0, transmission: 1.0
} );

const bodyColorInput = document.getElementById( 'body-color' );
bodyColorInput.addEventListener( 'input', function () {

bodyMaterial.color.set( this.value );

} );

const detailsColorInput = document.getElementById( 'details-color' );
detailsColorInput.addEventListener( 'input', function () {

detailsMaterial.color.set( this.value );

} );

const glassColorInput = document.getElementById( 'glass-color' );
glassColorInput.addEventListener( 'input', function () {

glassMaterial.color.set( this.value );

} );

// Car
// 车底部阴影图
const shadow = new THREE.TextureLoader().load( 'models/gltf/ferrari_ao.png' );

// 车3D模型
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );

const loader = new GLTFLoader();
loader.setDRACOLoader( dracoLoader );

loader.load( 'models/gltf/ferrari.glb', function ( gltf ) {

const carModel = gltf.scene.children[ 0 ];

carModel.getObjectByName( 'body' ).material = bodyMaterial;

carModel.getObjectByName( 'rim_fl' ).material = detailsMaterial;
carModel.getObjectByName( 'rim_fr' ).material = detailsMaterial;
carModel.getObjectByName( 'rim_rr' ).material = detailsMaterial;
carModel.getObjectByName( 'rim_rl' ).material = detailsMaterial;
carModel.getObjectByName( 'trim' ).material = detailsMaterial;

carModel.getObjectByName( 'glass' ).material = glassMaterial;

wheels.push(
carModel.getObjectByName( 'wheel_fl' ),
carModel.getObjectByName( 'wheel_fr' ),
carModel.getObjectByName( 'wheel_rl' ),
carModel.getObjectByName( 'wheel_rr' )
);

// shadow  车底部阴影
const mesh = new THREE.Mesh(
new THREE.PlaneGeometry( 0.655 * 4, 1.3 * 4 ),
new THREE.MeshBasicMaterial( {
map: shadow, 
blending: THREE.MultiplyBlending, 
toneMapped: false, // 定义这个材质是否会被渲染器的toneMapping设置所影响，默认为 true 。
transparent: true // 定义此材质是否透明。这对渲染有影响，因为透明对象需要特殊处理，并在非透明对象之后渲染。设置为true时，通过设置材质的opacity属性来控制材质透明的程度。默认值为false。
} )
);
mesh.rotation.x = - Math.PI / 2;
// renderOrder： 这个值将使得scene graph（场景图）中默认的的渲染顺序被覆盖， 即使不透明对象和透明对象保持独立顺序。 渲染顺序是由低到高来排序的，默认值为0。
mesh.renderOrder = 2;
carModel.add( mesh );

scene.add( carModel );

// 坐标轴
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

} );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function render() {

controls.update();

const time = - performance.now() / 1000;

for ( let i = 0; i < wheels.length; i ++ ) {

wheels[ i ].rotation.x = time * Math.PI * 2;

}

grid.position.z = - ( time ) % 1;

renderer.render( scene, camera );

stats.update();

}

init();

</script>

</body>
</html>

1. 为什么选择BufferGeometry？

在Three.js开发中，几何体创建是3D建模的基础。相比传统Geometry，BufferGeometry具有显著优势：

• ‌内存效率‌：采用TypedArray存储顶点数据，内存占用减少40%
• ‌渲染性能‌：直接对接WebGL缓冲区，减少CPU-GPU数据传输
• ‌灵活性‌：支持动态更新顶点数据
• ‌扩展性‌：可处理百万级顶点的复杂模型

2. 基础创建流程

2.1 创建空几何体

const geometry = new THREE.BufferGeometry();

2.2 定义顶点数据

// 创建包含12个顶点的立方体（每个面2个三角形）
const vertices = new Float32Array([
  // 前表面
  -1, -1,  1,  // 0
   1, -1,  1,  // 1
   1,  1,  1,  // 2
  -1,  1,  1,  // 3
  
  // 后表面
  -1, -1, -1,  // 4
   1, -1, -1,  // 5
  // ...（完整顶点数据）
]);

// 创建并设置顶点属性
geometry.setAttribute(
  'position', 
  new THREE.BufferAttribute(vertices, 3)
);

2.3 定义索引数据（可选优化）

const indices = new Uint16Array([
  // 前表面
  0, 1, 2,  2, 3, 0,
  
  // 顶部表面
  2, 3, 7,  7, 6, 2,
  // ...（完整索引数据）
]);

geometry.setIndex(new THREE.BufferAttribute(indices, 1));

3. 高级属性配置

3.1 添加法线向量

const normals = new Float32Array(vertices.length);
for (let i = 0; i < vertices.length; i += 9) {
  // 计算三角形法线
  const vA = new THREE.Vector3(...vertices.slice(i, i+3));
  const vB = new THREE.Vector3(...vertices.slice(i+3, i+6));
  const vC = new THREE.Vector3(...vertices.slice(i+6, i+9));
  
  const cb = new THREE.Vector3().subVectors(vC, vB);
  const ab = new THREE.Vector3().subVectors(vA, vB);
  const normal = new THREE.Vector3()
    .crossVectors(cb, ab)
    .normalize();

  // 为每个顶点设置法线
  normals.set([...normal.toArray()], i);
  normals.set([...normal.toArray()], i+3);
  normals.set([...normal.toArray()], i+6);
}

geometry.setAttribute(
  'normal',
  new THREE.BufferAttribute(normals, 3)
);

3.2 添加UV坐标

const uvs = new Float32Array([
  // 前表面UV
  0, 0, 
  1, 0,
  1, 1,
  0, 1,
  
  // 其他面UV坐标...
]);

geometry.setAttribute(
  'uv',
  new THREE.BufferAttribute(uvs, 2)
);

4. 性能优化技巧

4.1 内存复用策略

// 创建可复用数组
const vertexPool = new Float32Array(300000); // 预分配内存

function updateGeometry(geometry) {
  const positions = geometry.attributes.position;
  
  // 直接修改已存在的BufferAttribute
  for (let i = 0; i < positions.count; i++) {
    positions.array[i * 3] += Math.random() * 0.1; // X坐标
    positions.array[i * 3 + 1] *= 0.95; // Y坐标
  }
  
  positions.needsUpdate = true;
}

4.2 几何体合并

const geometries = [];
const material = new THREE.MeshStandardMaterial();

// 生成多个几何体
for (let i = 0; i < 100; i++) {
  const geom = new THREE.BufferGeometry();
  // ...配置几何体
  geometries.push(geom);
}

// 合并几何体
const mergedGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries(
  geometries
);

const mesh = new THREE.Mesh(mergedGeometry, material);
scene.add(mesh);

5. 动态几何体示例：波浪平面

// 初始化平面
const WIDTH_SEGMENTS = 128;
const SIZE = 20;

const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(
  (WIDTH_SEGMENTS + 1) ** 2 * 3
);
const uvs = new Float32Array(
  (WIDTH_SEGMENTS + 1) ** 2 * 2
);

// 生成初始顶点
let vertexIndex = 0;
for (let y = 0; y <= WIDTH_SEGMENTS; y++) {
  for (let x = 0; x <= WIDTH_SEGMENTS; x++) {
    positions[vertexIndex * 3] = 
      (x / WIDTH_SEGMENTS) * SIZE - SIZE/2;
    positions[vertexIndex * 3 + 1] = 0;
    positions[vertexIndex * 3 + 2] = 
      (y / WIDTH_SEGMENTS) * SIZE - SIZE/2;
    
    uvs[vertexIndex * 2] = x / WIDTH_SEGMENTS;
    uvs[vertexIndex * 2 + 1] = y / WIDTH_SEGMENTS;
    
    vertexIndex++;
  }
}

// 设置几何体属性
geometry.setAttribute(
  'position',
  new THREE.BufferAttribute(positions, 3)
);
geometry.setAttribute(
  'uv',
  new THREE.BufferAttribute(uvs, 2)
);

// 创建动画效果
function animate() {
  const positions = geometry.attributes.position.array;
  const time = performance.now() * 0.001;
  
  for (let i = 0; i < positions.length; i += 3) {
    positions[i + 1] = Math.sin(
      positions[i] * 0.5 + positions[i+2] * 0.3 + time
    ) * 1.5;
  }
  
  geometry.attributes.position.needsUpdate = true;
}

6. 常见问题解决方案

6.1 内存管理

// 正确释放内存
function disposeGeometry(geometry) {
  geometry.dispose();
  geometry.attributes.position.array = null;
  geometry = null;
}

6.2 顶点更新优化

// 使用共享ArrayBuffer
const sharedBuffer = new ArrayBuffer(1024 * 1024);
const positions = new Float32Array(sharedBuffer);
const normals = new Float32Array(sharedBuffer);

7. 完整应用案例

// 创建参数化圆柱体
function createCylinder(radiusTop, radiusBottom, height, radialSegments) {
  const geometry = new THREE.BufferGeometry();
  const vertices = [];
  const uvs = [];

  // 生成侧面顶点
  for (let y = 0; y <= 1; y++) {
    const radius = y ? radiusTop : radiusBottom;
    for (let i = 0; i <= radialSegments; i++) {
      const angle = (i / radialSegments) * Math.PI * 2;
      vertices.push(
        Math.cos(angle) * radius,
        height * (y - 0.5),
        Math.sin(angle) * radius
      );
      uvs.push(i / radialSegments, y);
    }
  }

  // 设置几何属性
  geometry.setAttribute(
    'position',
    new THREE.BufferAttribute(new Float32Array(vertices), 3)
  );
  geometry.setAttribute(
    'uv',
    new THREE.BufferAttribute(new Float32Array(uvs), 2)
  );

  return geometry;
}

掌握BufferGeometry的使用可以显著提升Three.js应用的性能表现，特别适用于以下场景：

• 大数据量可视化（如地图、分子模型）
• 动态几何体（实时变形、粒子系统）
• 程序化生成模型（参数化建模）
• WebXR等高性能要求场景

建议通过实际项目加深理解，可以先从修改现有几何体参数开始，逐步尝试完整几何体创建流程。