我从ThresJS开始,我想用BoxGeometry或通过gridHelper制作一个5乘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();
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00,
wireframe: true
});
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; i++) {
let cube = new THREE.Mesh(geometry, material);
cube.position.x = i;
cube.position.y = j;
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();
有什么我看不到的东西会导致这个错误吗?
我提前感谢你
我试着用ThreeJS和通过BoxGeometry制作一个5x5的正方形,但我在之前的文本中有错误解释。错误:Out of memory
我可以看到问题在这段代码中:
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; i++) {
let cube = new THREE.Mesh(geometry, material);
cube.position.x = i;
cube.position.y = j;
cubes.push(cube)
scene.add(cube)
}
}
在内循环中,递增的是"i",而不是"j"。只要试着改变这个,在codesandbox中就可以了