During runtime, I am constructing the mesh of a sphere for later use in supershape generation, which is why I am not using SphereGeometry. The current vector placements appear to be functioning correctly, as confirmed by placing spheres at the corresponding coordinates. However, when attempting to create the mesh from these coordinates, I am encountering the following error:
three.min.js:532
THREE.BufferAttribute.copyVector3sArray(): vector is undefined 0
copyVector3sArray @ three.min.js:532
fromDirectGeometry @ three.min.js:548
fromGeometry @ three.min.js:547
setFromObject @ three.min.js:544
get @ three.min.js:67
update @ three.min.js:76
k @ three.min.js:155
k @ three.min.js:156
Wd.render @ three.min.js:190
render @ threedVisuals.js:520
superShapes @ threedVisuals.js:512
visualise @ app.js:155
(anonymous) @ app.js:87
Upon using Chrome’s debugger, it seems that the vertices and faces are correctly being assigned to the mesh. However, the error occurs when the mesh is passed into the render cycle. The functions involved in this process are:
function calcSphere(radius, detailLevel) {
var globePoints = [];
for (var i = 0; i < detailLevel; i++) { //latitude
var lat = map_range(i, 0, detailLevel, -Math.PI / 2, Math.PI / 2);
var latPoints = [];
for (var j = 0; j < detailLevel; j++) { //longitude
var long = map_range(j, 0, detailLevel, -Math.PI, Math.PI);
// convert lat and long to cartesian coords
var x = radius * Math.sin(long) * Math.cos(lat);
var y = radius * Math.sin(long) * Math.sin(lat);
var z = radius * Math.cos(long);
latPoints.push({
x,
y,
z
});
}
globePoints.push(latPoints);
}
drawSphere(globePoints);
}
function drawSphere(globePoints) {
var sphereGeo = new THREE.Geometry();
for (var i = 0; i < globePoints.length - 1; i++) {
for (var j = 0; j < globePoints[i].length - 1; j++) {
var curIndex = sphereGeo.vertices.length; //used for tracking cur location in vertices array
var v1 = globePoints[i][j];
sphereGeo.vertices.push(new THREE.Vector3(v1.x, v1.y, v1.z));
var v2 = globePoints[i + 1][j];
sphereGeo.vertices.push(new THREE.Vector3(v2.x, v2.y, v2.z));
var v3 = globePoints[i][j + 1];
sphereGeo.vertices.push(new THREE.Vector3(v3.x, v3.y, v3.z));
var v4 = globePoints[i + 1][j + 1];
sphereGeo.vertices.push(new THREE.Vector3(v4.x, v4.y, v4.z));
var f1 = new THREE.Face3(
sphereGeo.vertices[curIndex + 0],
sphereGeo.vertices[curIndex + 1],
sphereGeo.vertices[curIndex + 2]);
var f2 = new THREE.Face3(
sphereGeo.vertices[curIndex + 1],
sphereGeo.vertices[curIndex + 2],
sphereGeo.vertices[curIndex + 3]);
sphereGeo.faces.push(f1);
sphereGeo.faces.push(f2);
}
}
// sphereGeo.computeFaceNormals();
// sphereGeo.computeVertexNormals();
var sphereMat = new THREE.MeshBasicMaterial();
var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);
scene.add(sphereMesh);
}Could someone provide insight into why this issue is happening? I have not been able to find any similar problems, and attempted solutions such as computing normals are also failing (
three.min.js:326 - Uncaught TypeError: Cannot read property 'x' of undefinedThank you in advance!