Three.js 阵列模型教程

阵列模型 ·Array Model· ▶ 在线运行案例

• 案例合集：三维可视化功能案例（threehub.cn）
• 开源仓库github地址：https://github.com/z2586300277/three-cesium-examples
• 400个案例代码:网盘链接

你将学到什么

• 用循环批量创建 Mesh 的基本方法
• 共享 Geometry/Material的内存优化
• 1000 个独立 Mesh 的性能隐患与InstancedMesh方向

效果说明

10×10×10 =1000 个红色小立方体排列成三维矩阵。OrbitControls 旋转时可感受规模。

核心概念

for (let i = 0; i < 10; i++)
for (let j = 0; j < 10; j++) for (let k = 0; k < 10; k++) { const mesh = new THREE.Mesh(geometry, material); mesh.position.set(i20, k20, j * 20); scene.add(mesh); }

| 做法 | draw call | 适用 | |------|-----------|------| | 1000 个 Mesh | ~1000 | 入门演示、数量少 | |InstancedMesh| 1 | 大量相同物体（树、草、城市） | | 合并 Geometry | 1 | 静态场景、不再单独控制 |

本案例共享同一个geometry和material实例，节省 GPU 内存，但draw call 仍是 1000 次——这是性能瓶颈所在。

实现步骤

• 创建一个BoxGeometry(5,5,5)和MeshBasicMaterial
• 三重循环创建 Mesh，间距 20
• OrbitControls + change 事件渲染

• 代码要点

  import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
  // 场景 const scene = new THREE.Scene();// 创建场景 const geometry = new THREE.BoxGeometry(5, 5, 5); const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); //材质 for (let i = 0; i < 10; i++) { for (let j = 0; j < 10; j++) { for (let k = 0; k < 10; k++) { const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh mesh.position.set(i20, k20, j * 20); scene.add(mesh); //网格模型添加到场景中 } } }
  // AxesHelper const axesHelper = new THREE.AxesHelper(150); scene.add(axesHelper);
  // 相机 const camera = new THREE.PerspectiveCamera(); //相机 camera.position.set(500, 500, 500); //相机位置 camera.lookAt(0, 50, 0); //相机观察位置
  // 渲染器 const renderer = new THREE.WebGLRenderer(); // 创建渲染器 const box = document.getElementById('box'); renderer.setSize(box.clientWidth, box.clientHeight); //渲染区域 renderer.render(scene, camera); //执行渲染 box.appendChild(renderer.domElement);;
  // 设置相机控件轨道控制器OrbitControls const controls = new OrbitControls(camera, renderer.domElement); // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景 controls.addEventListener('change', function () { renderer.render(scene, camera); //执行渲染操作 console.log(camera.position) });//监听鼠标、键盘事件

  完整源码：GitHub

  小结

  • 本文提供阵列模型完整 Three.js 源码与在线 Demo，建议先运行案例再改 uniform/参数做二次实验
  • 更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库