ThreeJS新手用BoxGeometry创建5×5方块时遇内存溢出问题求助

内存溢出的直接原因 #

你的代码里内层for循环的增量写错了：

for (let j = 0; j < 5; i++) { // 这里应该是j++，不是i++

这个错误会导致内层循环永远无法终止——j永远达不到5，代码会疯狂创建立方体并添加到场景，直到内存耗尽。

修正方案+实现彩色方块网格 #

除了修复循环错误，要实现每个方块不同颜色，需要为每个立方体创建独立的材质（共享材质会让所有方块颜色一致）。以下是完整修正后的代码：

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import Stats from 'three/examples/jsm/libs/stats.module';
import { GUI } from 'dat.gui';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(8, 5, 8);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

var cubes = [];
const geometry = new THREE.BoxGeometry(); // 共享几何体，节省内存

// 修复循环并实现彩色方块
for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 5; j++) { // 这里改成j++
        // 为每个方块生成随机颜色，也可以按坐标计算规律颜色
        const randomColor = new THREE.Color(Math.random(), Math.random(), Math.random());
        const material = new THREE.MeshBasicMaterial({
            color: randomColor,
            wireframe: false // 可根据需求切换线框/实体模式
        });
        
        let cube = new THREE.Mesh(geometry, material);
        // 调整位置让网格居中，避免方块重叠（每个方块大小为1，间距设为2）
        cube.position.x = (i - 2) * 2;
        cube.position.y = (j - 2) * 2;
        cube.position.z = 0;

        cubes.push(cube);
        scene.add(cube);
    }
}

window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    render();
}

const stats = Stats();
document.body.appendChild(stats.dom);

const gui = new GUI();
const cubeFolder = gui.addFolder('Cube');
cubeFolder.open();
const cameraFolder = gui.addFolder('Camera');
cameraFolder.add(camera.position, 'z', 0, 10);
cameraFolder.open();

function main() {
    requestAnimationFrame(main);
    render();
    stats.update();
}

function render() {
    renderer.render(scene, camera);
}

main();

关键修改说明 #

1. 修复循环增量：内层循环改为j++，确保循环执行5×5=25次，创建25个方块
2. 独立材质实现彩色：每次循环创建新的MeshBasicMaterial，用随机颜色（也可以根据i/j的值生成规律颜色，比如new THREE.Color(i/5, j/5, 0.5)）
3. 优化位置布局：将方块位置调整为居中排列，避免重叠，提升视觉效果
4. 共享几何体：保持几何体复用，这是ThreeJS的最佳实践，减少内存占用

内容的提问来源于stack exchange，提问作者Tony