Make d3-3d ready for v1

.eslintrc.json

@@ -1,29 +1,24 @@
 {
-
-	"extends": "eslint:recommended",
+    "extends": "eslint:recommended",
 
     "parserOptions": {
-    	"sourceType": "module"
-  	},
-
+        "sourceType": "module"
+    },
     "ecmaFeatures": {
         "modules": true
     },
-
     "globals": {
-    	"document": false,
-    	"window": false
- 	},
-
-	"env": {
-		"browser": true,
-    	"es6": true,
-		"node": true
-	},
-
-	"rules": {
-		"eqeqeq": "error",
-		"semi": ["error", "always"],
-		"quotes": ["error", "single", { "avoidEscape": true, "allowTemplateLiterals": true }]
-	}
+        "document": false,
+        "window": false
+    },
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "rules": {
+        "eqeqeq": "error",
+        "semi": ["error", "always"],
+        "quotes": ["error", "single", { "avoidEscape": true, "allowTemplateLiterals": true }]
+    }
 }

index.js

@@ -1,3 +1,12 @@
+/**
+ * @author Stefan Nieke / http://niekes.com/
+ */
 export { default as _3d } from './src/3d.js';
-export { triangles3D } from './src/primitiveShapes/triangle.js';
-export { points3D } from './src/primitiveShapes/point.js';
+export { cubes3D } from './src/primitiveShapes/cubes.js';
+export { gridPlanes3D } from './src/primitiveShapes/gridPlanes.js';
+export { lines3D } from './src/primitiveShapes/lines.js';
+export { lineStrips3D } from './src/primitiveShapes/lineStrips.js';
+export { planes3D } from './src/primitiveShapes/planes.js';
+export { points3D } from './src/primitiveShapes/points.js';
+export { polygons3D } from './src/primitiveShapes/polygons.js';
+export { triangles3D } from './src/primitiveShapes/triangles.js';

src/3d.js

@@ -1,10 +1,10 @@
-import { cube } from './primitiveShapes/cube.js';
-import { gridPlane } from './primitiveShapes/gridPlane.js';
-import { lineStrip } from './primitiveShapes/lineStrip.js';
-import { line } from './primitiveShapes/line.js';
-import { plane } from './primitiveShapes/plane.js';
-import { point } from './primitiveShapes/point.js';
-import { triangle } from './primitiveShapes/triangle.js';
+import { cube } from './primitiveShapes/cubes.js';
+import { gridPlane } from './primitiveShapes/gridPlanes.js';
+import { lineStrip } from './primitiveShapes/lineStrips.js';
+import { line } from './primitiveShapes/lines.js';
+import { plane } from './primitiveShapes/planes.js';
+import { point } from './primitiveShapes/points.js';
+import { triangle } from './primitiveShapes/triangles.js';
 
 import { drawLineStrip } from './draw/drawLineStrip.js';
 import { drawPlane } from './draw/drawPlane.js';

src/centroid.js

@@ -1,15 +1,45 @@
-export function centroid(polygon){
-    var _x = 0, _y = 0, _z = 0, _n = polygon.length;
+/**
+ * Calculates the centroid of a polygon.
+ *
+ * The centroid is the average position of all the points in the polygon.
+ *
+ * @param {Object[]} polygon - The polygon represented as an array of objects with x, y, and z properties.
+ * @param {number} polygon[].rotated.x - The x-coordinate of the rotated point.
+ * @param {number} polygon[].rotated.y - The y-coordinate of the rotated point.
+ * @param {number} polygon[].rotated.z - The z-coordinate of the rotated point.
+ * @returns {Object} - The centroid of the polygon with x, y, and z properties.
+ *
+ * @throws {Error} Will throw an error if the polygon is empty or if any point in the polygon is missing rotated coordinates.
+ *
+ * @example
+ * // Calculate the centroid of a polygon
+ * const polygon = [
+ *   { rotated: { x: 1, y: 2, z: 3 } },
+ *   { rotated: { x: 4, y: 5, z: 6 } },
+ *   { rotated: { x: 7, y: 8, z: 9 } },
+ * ];
+ * const centroidPoint = centroid(polygon);
+ * console.log(centroidPoint); // Outputs: { x: 4, y: 5, z: 6 }
+ */
+export function centroid(polygon) {
+    let _x = 0;
+    let _y = 0;
+    let _z = 0;
+    let _n = polygon.length;
 
-    for (var i = _n - 1; i >= 0; i--) {
-        _x += polygon[i].rotated.x;
-        _y += polygon[i].rotated.y;
-        _z += polygon[i].rotated.z;
+    // Calculate the sum of rotated coordinates
+    for (let i = _n - 1; i >= 0; i--) {
+        const point = polygon[i].rotated;
+
+        _x += point.x;
+        _y += point.y;
+        _z += point.z;
     }
 
+    // Calculate the average of rotated coordinates to get the centroid
     return {
         x: _x / _n,
         y: _y / _n,
-        z: _z / _n,
+        z: _z / _n
     };
 }

src/draw/drawLineStrip.js

@@ -1,9 +1,3 @@
-/**
- * Draws a line strip based on projected coordinates.
- *
- * @param {Array<Point>} lineStrip - An array of points representing the line strip with projected coordinates.
- * @returns {string} The SVG path data for the drawn line strip.
- */
 export function drawLineStrip(lineStrip) {
     const lastPoint = lineStrip[lineStrip.length - 1];
 

src/draw/drawPlane.js

@@ -1,9 +1,3 @@
-/**
- * Draws a plane based on projected coordinates.
- *
- * @param {Array} d - An array of points representing the plane with projected coordinates.
- * @returns {string} The SVG path data for the drawn plane.
- */
 export function drawPlane(d) {
     return `M${d[0].projected.x},${d[0].projected.y}L${d[1].projected.x},${d[1].projected.y}L${d[2].projected.x},${d[2].projected.y}L${d[3].projected.x},${d[3].projected.y}Z`;
 }

src/draw/drawPolygon.js

@@ -1,10 +1,17 @@
 export function drawPolygon(d) {
-    var lastPoint = d[d.length - 1];
-    var path = 'M' + lastPoint.projected.x + ',' + lastPoint.projected.y;
-    for (var i = d.length - 2; i >= 0; i--) {
-        var p = d[i].projected;
-        path += 'L' + p.x + ',' + p.y;
+    // Start the SVG path string from the last point
+    const lastPoint = d[d.length - 1];
+    let path = `M${lastPoint.projected.x},${lastPoint.projected.y}`;
+
+    // Add line segments to the path for each point
+    for (let i = d.length - 2; i >= 0; i--) {
+        const p = d[i].projected;
+
+        path += `L${p.x},${p.y}`;
     }
+
+    // Close the path to form a polygon
     path += 'Z';
+
     return path;
 }

src/draw/drawTriangle.js

@@ -1,8 +1,3 @@
-/**
- * Draws a triangle based on projected coordinates.
- *
- * @param {Array} d - An array of points representing the triangle with projected coordinates.
- * @returns {string} The SVG path data for the drawn triangle.
- */
-export const drawTriangle = (d) =>
-    `M${d[0].projected.x},${d[0].projected.y}L${d[1].projected.x},${d[1].projected.y}L${d[2].projected.x},${d[2].projected.y}Z`;
+export const drawTriangle = (triangle) => {
+    return `M${triangle[0].projected.x},${triangle[0].projected.y}L${triangle[1].projected.x},${triangle[1].projected.y}L${triangle[2].projected.x},${triangle[2].projected.y}Z`;
+};

src/generator.js

@@ -0,0 +1,149 @@
+import { orthographic } from './projection-orthographic.js';
+import { x as px, y as py, z as pz } from './point.js';
+import { sort } from './sort.js';
+
+/**
+ * Generates 3D shapes based on specified parameters and transformations.
+ *
+ * @param {Function} transform - The transformation function for generating 3D shapes.
+ * @param {Function|undefined} draw - The drawing function for rendering the generated 3D shapes.
+ * @returns {Function} - A function that, when called with data, generates and returns an array of 3D shapes.
+ */
+export function generator3D(transform, draw) {
+    let angleX = 0;
+    let angleY = 0;
+    let angleZ = 0;
+    let origin = [0, 0];
+    let rotateCenter = [0, 0, 0];
+    let scale = 1;
+    let x = px;
+    let y = py;
+    let z = pz;
+    let rows = 0;
+
+    /**
+     * Generates 3D shapes based on specified parameters and transformations.
+     *
+     * @param {Object} data - The data representing the 3D shapes.
+     * @returns {Object[]} - An array of 3D shapes generated with the specified parameters and transformations.
+     *
+     */
+    function fn(data) {
+        return transform(
+            data,
+            { scale: scale, origin: origin, project: orthographic, row: rows },
+            { x: x, y: y, z: z },
+            { x: angleX, y: angleY, z: angleZ, rotateCenter: rotateCenter }
+        );
+    }
+
+    /**
+     * Sets or retrieves the origin for rendering the 3D shapes.
+     *
+     * @param {number[]} [o] - The origin point for rendering the 3D shapes.
+     * @returns {Function|number[]} - If no argument is provided, returns the current origin. Otherwise, sets the origin and returns the function.
+     */
+    fn.origin = function (o) {
+        return arguments.length ? ((origin = o), fn) : origin;
+    };
+
+    /**
+     * Sets or retrieves the scale factor for the 3D shapes.
+     *
+     * @param {number} [s] - The scale factor for the 3D shapes.
+     * @returns {Function|number} - If no argument is provided, returns the current scale factor. Otherwise, sets the scale factor and returns the function.
+     */
+    fn.scale = function (s) {
+        return arguments.length ? ((scale = s), fn) : scale;
+    };
+
+    /**
+     * Sets or retrieves the rotation angle around the x-axis.
+     *
+     * @param {number} [ax] - The rotation angle around the x-axis.
+     * @returns {Function|number} - If no argument is provided, returns the current rotation angle around the x-axis. Otherwise, sets the rotation angle and returns the function.
+     */
+    fn.rotateX = function (ax) {
+        return arguments.length ? ((angleX = ax), fn) : angleX;
+    };
+
+    /**
+     * Sets or retrieves the rotation angle around the y-axis.
+     *
+     * @param {number} [ay] - The rotation angle around the y-axis.
+     * @returns {Function|number} - If no argument is provided, returns the current rotation angle around the y-axis. Otherwise, sets the rotation angle and returns the function.
+     */
+    fn.rotateY = function (ay) {
+        return arguments.length ? ((angleY = ay), fn) : angleY;
+    };
+
+    /**
+     * Sets or retrieves the rotation angle around the z-axis.
+     *
+     * @param {number} [az] - The rotation angle around the z-axis.
+     * @returns {Function|number} - If no argument is provided, returns the current rotation angle around the z-axis. Otherwise, sets the rotation angle and returns the function.
+     */
+    fn.rotateZ = function (az) {
+        return arguments.length ? ((angleZ = az), fn) : angleZ;
+    };
+
+    /**
+     * Sets or retrieves the rotation center for the 3D shapes.
+     *
+     * @param {number[]} [rc] - The rotation center for the 3D shapes.
+     * @returns {Function|number[]} - If no argument is provided, returns the current rotation center. Otherwise, sets the rotation center and returns the function.
+     */
+    fn.rotationCenter = function (rc) {
+        return arguments.length ? ((rotateCenter = rc), fn) : rotateCenter;
+    };
+
+    /**
+     * Sets or retrieves the x-coordinate for the 3D shapes.
+     *
+     * @param {number} [px] - The x-coordinate for the 3D shapes.
+     * @returns {Function|number} - If no argument is provided, returns the current x-coordinate. Otherwise, sets the x-coordinate and returns the function.
+     */
+    fn.x = function (px) {
+        return arguments.length ? ((x = typeof px === 'function' ? px : +px), fn) : x;
+    };
+
+    /**
+     * Sets or retrieves the y-coordinate for the 3D shapes.
+     *
+     * @param {number} [py] - The y-coordinate for the 3D shapes.
+     * @returns {Function|number} - If no argument is provided, returns the current y-coordinate. Otherwise, sets the y-coordinate and returns the function.
+     */
+    fn.y = function (py) {
+        return arguments.length ? ((y = typeof py === 'function' ? py : +py), fn) : y;
+    };
+
+    /**
+     * Sets or retrieves the z-coordinate for the 3D shapes.
+     *
+     * @param {number} [pz] - The z-coordinate for the 3D shapes.
+     * @returns {Function|number} - If no argument is provided, returns the current z-coordinate. Otherwise, sets the z-coordinate and returns the function.
+     */
+    fn.z = function (pz) {
+        return arguments.length ? ((z = typeof pz === 'function' ? pz : +pz), fn) : z;
+    };
+
+    /**
+     * !IMPORT! ONLY FOR gridplanes
+     * Sets or retrieves the rows for 3d gridplanes.
+     *
+     * @param {number} [pz] - The z-coordinate for the 3D shapes.
+     * @returns {Function|number} - If no argument is provided, returns the current rowse. Otherwise, sets the rows and returns the function.
+     */
+    fn.rows = function (r) {
+        return arguments.length ? ((rows = typeof r === 'function' ? r : +r), fn) : rows;
+    };
+
+    // Attach the draw function to the generator
+    fn.draw = draw;
+
+    // Attach the sort function to the generator
+    fn.sort = sort;
+
+    // Return the generator function
+    return fn;
+}