function customGeometry(r = 1, numCols = 30, numRows = 15) {
const vertices = []; // Vertices of triangle strips
const indices = []; // Index array for triangles
const uvs = []; // Texture mapping coordinates.
const halfPi = Math.PI / 2;
for (let col = 0; col <= numCols; col++) {
const t1 = THREE.MathUtils.mapLinear(col, 0, numCols, -Math.PI, Math.PI);
for (let row = 0; row <= numRows; row++) {
const t2 = THREE.MathUtils.mapLinear(row, 0, numRows, -halfPi, halfPi);
// Parametric equation of a spheroid
const x = 0.5 * r * Math.cos(t1) * Math.cos(t2);
const z = r * Math.sin(t1) * Math.cos(t2);
const y = 0.5 * r * Math.sin(t2);
vertices.push(x, y, z);
// Calculate UV texture coordinates
const u = 1 - col / numCols;
const v = row / numRows;
uvs.push(u, v);
}
}
// Generate indices to form triangles for each quad in the grid
for (let col = 0; col < numCols; col++) {
for (let row = 0; row < numRows; row++) {
const a = col * (numRows + 1) + row;
const b = (col + 1) * (numRows + 1) + row;
const c = col * (numRows + 1) + row + 1;
const d = (col + 1) * (numRows + 1) + row + 1;
indices.push(a, c, b);
indices.push(b, c, d);
}
}
// Add vertices, indices, and UVs to the buffer geometry
const geometry = new THREE.BufferGeometry();
geometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(vertices, 3)
);
geometry.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2));
geometry.setIndex(indices);
geometry.computeVertexNormals();
return geometry;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
