Three.js 数组模型

提示词

PROMPT
1
使用 Three.js 创建多个网格模型，通过循环创建模型数组，展示批量创建模型的方法。

效果描述

这是一个展示如何批量创建多个网格模型的示例。

效果特性

  • 批量创建：通过循环创建多个模型
  • 三维数组：创建 10x10x10 的模型数组
  • 位置分布：模型在三维空间中分布
  • 共享几何体：多个模型共享同一个几何体
  • 共享材质：多个模型共享同一个材质
  • 轨道控制：使用 OrbitControls 控制视角

核心参数

参数 值 说明
模型数量 1000 10x10x10
几何体大小 5, 5, 5 XYZ 三方向大小
材质颜色 0xff0000 红色
位置间隔 20 模型之间的间隔
坐标轴大小 150 AxesHelper 大小

核心代码解析

创建模型数组

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
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.position.set(i * 20, k * 20, j * 20);
            scene.add(mesh);
        }
    }
}

创建相机和控制器

JAVASCRIPT
1
2
3
4
5
6
7
8
const camera = new THREE.PerspectiveCamera();
camera.position.set(500, 500, 500);
camera.lookAt(0, 50, 0);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", function () {
    renderer.render(scene, camera);
});

技术亮点

  1. 批量创建：通过循环批量创建模型
  2. 三维数组：创建三维模型数组
  3. 共享资源：多个模型共享几何体和材质
  4. 位置分布：模型在三维空间中分布
  5. 性能优化：共享资源提高性能

调试技巧

  1. 模型数量：调整模型数量测试性能
  2. 位置间隔：调整模型之间的间隔
  3. 几何体大小：调整几何体大小
  4. 材质颜色：调整材质颜色
  5. 相机位置：调整相机位置观察所有模型

扩展方向

  1. 不同颜色：为不同模型设置不同颜色
  2. 随机位置：随机分布模型位置
  3. 模型动画：动画模型
  4. 模型交互：添加模型交互
  5. 模型优化：优化模型渲染性能

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。