Javascript Triple.JS中的多维数据集
我刚刚开始使用THREE.js,我正在尝试用立方体制作一个“立方体”,类似于: 我正试图用一个3D数组来完成这个任务,它遵循以下结构:Javascript Triple.JS中的多维数据集,javascript,graphics,three.js,Javascript,Graphics,Three.js,我刚刚开始使用THREE.js,我正在尝试用立方体制作一个“立方体”,类似于: 我正试图用一个3D数组来完成这个任务,它遵循以下结构:[[grid][line,line][[cube,cube],[cube,cube]]。如中所示,立方体由网格组成,网格由线条组成,线条由立方体本身组成。代码如下: function lineOfMeshes(w, g) { var cubes = []; for (var i = 0; i < w; i++) { cubes.push(
[[grid][line,line][[cube,cube],[cube,cube]]
。如中所示,立方体由网格组成,网格由线条组成,线条由立方体本身组成。代码如下:
function lineOfMeshes(w, g) {
var cubes = [];
for (var i = 0; i < w; i++) {
cubes.push(new THREE.Mesh(geometry, material));
cubes[i].position.x += i * g;
}
//console.log("LINE:" + cubes);
return cubes;
}
function gridOfMeshes(w, g) {
cubes = [];
for (var line = 0; line < w; line++) {
cubes.push(lineOfMeshes(w, g));
for (var cube = 0; cube < w; cube++) {
cubes[line][cube].position.z += line * g;
}
}
//console.log("GRID: " + cubes);
return cubes;
}
function cubeOfMeshes(w, g) {
cubes = [];
for (var grid = 0; grid < w; grid++) {
cubes.push(gridOfMeshes(w, g));
for (var line=0;line<w;line++) {
for (var cube = 0; cube < w; cube++) {
cubes[grid][line][cube].position.z += line * g;
}
}
}
//console.log("CUBE"+ cubes);
return cubes;
}
//var container = document.getElementById("3dcontainer");
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
var geometry = new THREE.BoxGeometry(); //object that contains all the points and faces of the cube
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); //material that colors the box
//var cube = new THREE.Mesh(geometry, material); //a mesh is an object that takes a geometry and applies a material to it
///////////////////////////////////////////////////////
let gridWidth = 5;
let gridGap = 3;
cubes = cubeOfMeshes(gridWidth, gridGap);
cubes.forEach(grid => {
grid.forEach(line => {
line.forEach(cube=>{
scene.add(cube);
})
});
});
camera.position.z = 5;
///////////////////////////////////////////////////////
//render loop
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
我不知道为什么会这样。我相信我的索引是正确的。感谢您的帮助。这是因为在
网格网格
和立方体网格
中,您没有将常量
、let
或变量
放在立方体
前面,因此它们实际上是同一个变量并被覆盖
注意:如果您添加
'use strict';
在JavaScript的顶部,它会在
此外,如果您使用类似的编辑器并安装。您可能需要对其进行配置,但如果您花几分钟时间进行设置,它将在您键入时突出显示这些类型的错误。哇,这解决了所有问题。非常感谢!
'use strict';
Uncaught ReferenceError: cubes is not defined
at cubeOfMeshes (js:40)
at js:80