@xeokit/xeokit-sdk 2.5.2-beta-10 → 2.5.2-beta-13

package/src/src/viewer/scene/geometry/builders/buildCylinderGeometry.js

@@ -0,0 +1,271 @@
+import {utils} from '../../utils.js';
+
+/**
+ * @desc Creates a cylinder-shaped {@link Geometry}.
+ *
+ * ## Usage
+ *
+ * Creating a {@link Mesh} with a cylinder-shaped {@link ReadableGeometry} :
+ *
+ * [[Run this example](/examples/#geometry_builders_buildCylinderGeometry)]
+ *
+ * ````javascript
+ *
+ * import {Viewer, Mesh, buildCylinderGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *      canvasId: "myCanvas"
+ *  });
+ *
+ * viewer.camera.eye = [0, 0, 5];
+ * viewer.camera.look = [0, 0, 0];
+ * viewer.camera.up = [0, 1, 0];
+ *
+ * new Mesh(viewer.scene, {
+ *      geometry: new ReadableGeometry(viewer.scene, buildCylinderGeometry({
+ *          center: [0,0,0],
+ *          radiusTop: 2.0,
+ *          radiusBottom: 2.0,
+ *          height: 5.0,
+ *          radialSegments: 20,
+ *          heightSegments: 1,
+ *          openEnded: false
+ *      }),
+ *      material: new PhongMaterial(viewer.scene, {
+ *         diffuseMap: new Texture(viewer.scene, {
+ *             src: "textures/diffuse/uvGrid2.jpg"
+ *         })
+ *      })
+ * });
+ * ````
+ *
+ * @function buildCylinderGeometry
+ * @param {*} [cfg] Configs
+ * @param {String} [cfg.id] Optional ID for the {@link Geometry}, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+ * @param {Number[]} [cfg.center]  3D point indicating the center position.
+ * @param {Number} [cfg.radiusTop=1]  Radius of top.
+ * @param {Number} [cfg.radiusBottom=1]  Radius of bottom.
+ * @param {Number} [cfg.height=1] Height.
+ * @param {Number} [cfg.radialSegments=60]  Number of horizontal segments.
+ * @param {Number} [cfg.heightSegments=1]  Number of vertical segments.
+ * @param {Boolean} [cfg.openEnded=false]  Whether or not the cylinder has solid caps on the ends.
+ * @returns {Object} Configuration for a {@link Geometry} subtype.
+ */
+function buildCylinderGeometry(cfg = {}) {
+
+    let radiusTop = cfg.radiusTop || 1;
+    if (radiusTop < 0) {
+        console.error("negative radiusTop not allowed - will invert");
+        radiusTop *= -1;
+    }
+
+    let radiusBottom = cfg.radiusBottom || 1;
+    if (radiusBottom < 0) {
+        console.error("negative radiusBottom not allowed - will invert");
+        radiusBottom *= -1;
+    }
+
+    let height = cfg.height || 1;
+    if (height < 0) {
+        console.error("negative height not allowed - will invert");
+        height *= -1;
+    }
+
+    let radialSegments = cfg.radialSegments || 32;
+    if (radialSegments < 0) {
+        console.error("negative radialSegments not allowed - will invert");
+        radialSegments *= -1;
+    }
+    if (radialSegments < 3) {
+        radialSegments = 3;
+    }
+
+    let heightSegments = cfg.heightSegments || 1;
+    if (heightSegments < 0) {
+        console.error("negative heightSegments not allowed - will invert");
+        heightSegments *= -1;
+    }
+    if (heightSegments < 1) {
+        heightSegments = 1;
+    }
+
+    const openEnded = !!cfg.openEnded;
+
+    let center = cfg.center;
+    const centerX = center ? center[0] : 0;
+    const centerY = center ? center[1] : 0;
+    const centerZ = center ? center[2] : 0;
+
+    const heightHalf = height / 2;
+    const heightLength = height / heightSegments;
+    const radialAngle = (2.0 * Math.PI / radialSegments);
+    const radialLength = 1.0 / radialSegments;
+    //var nextRadius = this._radiusBottom;
+    const radiusChange = (radiusTop - radiusBottom) / heightSegments;
+
+    const positions = [];
+    const normals = [];
+    const uvs = [];
+    const indices = [];
+
+    let h;
+    let i;
+
+    let x;
+    let z;
+
+    let currentRadius;
+    let currentHeight;
+
+    let first;
+    let second;
+
+    let startIndex;
+    let tu;
+    let tv;
+
+    // create vertices
+    const normalY = (90.0 - (Math.atan(height / (radiusBottom - radiusTop))) * 180 / Math.PI) / 90.0;
+
+    for (h = 0; h <= heightSegments; h++) {
+        currentRadius = radiusTop - h * radiusChange;
+        currentHeight = heightHalf - h * heightLength;
+
+        for (i = 0; i <= radialSegments; i++) {
+            x = Math.sin(i * radialAngle);
+            z = Math.cos(i * radialAngle);
+
+            normals.push(currentRadius * x);
+            normals.push(normalY); //todo
+            normals.push(currentRadius * z);
+
+            uvs.push((i * radialLength));
+            uvs.push(h * 1 / heightSegments);
+
+            positions.push((currentRadius * x) + centerX);
+            positions.push((currentHeight) + centerY);
+            positions.push((currentRadius * z) + centerZ);
+        }
+    }
+
+    // create faces
+    for (h = 0; h < heightSegments; h++) {
+        for (i = 0; i <= radialSegments; i++) {
+
+            first = h * (radialSegments + 1) + i;
+            second = first + radialSegments;
+
+            indices.push(first);
+            indices.push(second);
+            indices.push(second + 1);
+
+            indices.push(first);
+            indices.push(second + 1);
+            indices.push(first + 1);
+        }
+    }
+
+    // create top cap
+    if (!openEnded && radiusTop > 0) {
+        startIndex = (positions.length / 3);
+
+        // top center
+        normals.push(0.0);
+        normals.push(1.0);
+        normals.push(0.0);
+
+        uvs.push(0.5);
+        uvs.push(0.5);
+
+        positions.push(0 + centerX);
+        positions.push(heightHalf + centerY);
+        positions.push(0 + centerZ);
+
+        // top triangle fan
+        for (i = 0; i <= radialSegments; i++) {
+            x = Math.sin(i * radialAngle);
+            z = Math.cos(i * radialAngle);
+            tu = (0.5 * Math.sin(i * radialAngle)) + 0.5;
+            tv = (0.5 * Math.cos(i * radialAngle)) + 0.5;
+
+            normals.push(radiusTop * x);
+            normals.push(1.0);
+            normals.push(radiusTop * z);
+
+            uvs.push(tu);
+            uvs.push(tv);
+
+            positions.push((radiusTop * x) + centerX);
+            positions.push((heightHalf) + centerY);
+            positions.push((radiusTop * z) + centerZ);
+        }
+
+        for (i = 0; i < radialSegments; i++) {
+            center = startIndex;
+            first = startIndex + 1 + i;
+
+            indices.push(first);
+            indices.push(first + 1);
+            indices.push(center);
+        }
+    }
+
+    // create bottom cap
+    if (!openEnded && radiusBottom > 0) {
+
+        startIndex = (positions.length / 3);
+
+        // top center
+        normals.push(0.0);
+        normals.push(-1.0);
+        normals.push(0.0);
+
+        uvs.push(0.5);
+        uvs.push(0.5);
+
+        positions.push(0 + centerX);
+        positions.push(0 - heightHalf + centerY);
+        positions.push(0 + centerZ);
+
+        // top triangle fan
+        for (i = 0; i <= radialSegments; i++) {
+
+            x = Math.sin(i * radialAngle);
+            z = Math.cos(i * radialAngle);
+
+            tu = (0.5 * Math.sin(i * radialAngle)) + 0.5;
+            tv = (0.5 * Math.cos(i * radialAngle)) + 0.5;
+
+            normals.push(radiusBottom * x);
+            normals.push(-1.0);
+            normals.push(radiusBottom * z);
+
+            uvs.push(tu);
+            uvs.push(tv);
+
+            positions.push((radiusBottom * x) + centerX);
+            positions.push((0 - heightHalf) + centerY);
+            positions.push((radiusBottom * z) + centerZ);
+        }
+
+        for (i = 0; i < radialSegments; i++) {
+
+            center = startIndex;
+            first = startIndex + 1 + i;
+
+            indices.push(center);
+            indices.push(first + 1);
+            indices.push(first);
+        }
+    }
+
+    return utils.apply(cfg, {
+        positions: positions,
+        normals: normals,
+        uv: uvs,
+        indices: indices
+    });
+}
+
+
+export {buildCylinderGeometry};

package/src/src/viewer/scene/geometry/builders/buildGridGeometry.js

@@ -0,0 +1,102 @@
+import {utils} from '../../utils.js';
+
+/**
+ * @desc Creates a grid-shaped {@link Geometry}.
+ *
+ * ## Usage
+ *
+ * Creating a {@link Mesh} with a GridGeometry and a {@link PhongMaterial}:
+ *
+ * [[Run this example](/examples/#geometry_builders_buildGridGeometry)]
+ *
+ * ````javascript
+ * import {Viewer, Mesh, buildGridGeometry, VBOGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *      canvasId: "myCanvas"
+ * });
+ *
+ * viewer.camera.eye = [0, 0, 5];
+ * viewer.camera.look = [0, 0, 0];
+ * viewer.camera.up = [0, 1, 0];
+ *
+ * new Mesh(viewer.scene, {
+ *      geometry: new VBOGeometry(viewer.scene, buildGridGeometry({
+ *          size: 1000,
+ *          divisions: 500
+ *      })),
+ *      material: new PhongMaterial(viewer.scene, {
+ *          color: [0.0, 0.0, 0.0],
+ *          emissive: [0.4, 0.4, 0.4]
+ *      }),
+ *      position: [0, -1.6, 0]
+ * });
+ * ````
+ *
+ * @function buildGridGeometry
+ * @param {*} [cfg] Configs
+ * @param {String} [cfg.id] Optional ID for the {@link Geometry}, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+ * @param {Number} [cfg.size=1] Dimension on the X and Z-axis.
+ * @param {Number} [cfg.divisions=1] Number of divisions on X and Z axis..
+ * @returns {Object} Configuration for a {@link Geometry} subtype.
+ */
+function buildGridGeometry(cfg = {}) {
+
+    let size = cfg.size || 1;
+    if (size < 0) {
+        console.error("negative size not allowed - will invert");
+        size *= -1;
+    }
+
+    let divisions = cfg.divisions || 1;
+    if (divisions < 0) {
+        console.error("negative divisions not allowed - will invert");
+        divisions *= -1;
+    }
+    if (divisions < 1) {
+        divisions = 1;
+    }
+
+    size = size || 10;
+    divisions = divisions || 10;
+
+    const step = size / divisions;
+    const halfSize = size / 2;
+
+    const positions = [];
+    const indices = [];
+    let l = 0;
+
+    for (let i = 0, j = 0, k = -halfSize; i <= divisions; i++, k += step) {
+
+        positions.push(-halfSize);
+        positions.push(0);
+        positions.push(k);
+
+        positions.push(halfSize);
+        positions.push(0);
+        positions.push(k);
+
+        positions.push(k);
+        positions.push(0);
+        positions.push(-halfSize);
+
+        positions.push(k);
+        positions.push(0);
+        positions.push(halfSize);
+
+        indices.push(l++);
+        indices.push(l++);
+        indices.push(l++);
+        indices.push(l++);
+    }
+
+    return utils.apply(cfg, {
+        primitive: "lines",
+        positions: positions,
+        indices: indices
+    });
+}
+
+
+export {buildGridGeometry};

package/src/src/viewer/scene/geometry/builders/buildPlaneGeometry.js

@@ -0,0 +1,168 @@
+import {utils} from '../../utils.js';
+
+/**
+ * @desc Creates a plane-shaped {@link Geometry}.
+ *
+ * ## Usage
+ *
+ * Creating a {@link Mesh} with a PlaneGeometry and a {@link PhongMaterial} with diffuse {@link Texture}:
+ *
+ * [[Run this example](/examples/#geometry_builders_buildPlaneGeometry)]
+ *
+ * ````javascript
+ * import {Viewer, Mesh, buildPlaneGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *      canvasId: "myCanvas"
+ * });
+ *
+ * viewer.camera.eye = [0, 0, 5];
+ * viewer.camera.look = [0, 0, 0];
+ * viewer.camera.up = [0, 1, 0];
+
+ * new Mesh(viewer.scene, {
+ *      geometry: new ReadableGeometry(viewer.scene, buildPlaneGeometry({
+ *          center: [0,0,0],
+ *          xSize: 2,
+ *          zSize: 2,
+ *          xSegments: 10,
+ *          zSegments: 10
+ *      }),
+ *      material: new PhongMaterial(viewer.scene, {
+ *          diffuseMap: new Texture(viewer.scene, {
+ *              src: "textures/diffuse/uvGrid2.jpg"
+ *          })
+ *      })
+ *  });
+ * ````
+ *
+ * @function buildPlaneGeometry
+ * @param {*} [cfg] Configs
+ * @param {Number[]} [cfg.center]  3D point indicating the center position.
+ * @param {String} [cfg.id] Optional ID for the {@link Geometry}, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+ * @param {Number} [cfg.xSize=1] Dimension on the X-axis.
+ * @param {Number} [cfg.zSize=1] Dimension on the Z-axis.
+ * @param {Number} [cfg.xSegments=1] Number of segments on the X-axis.
+ * @param {Number} [cfg.zSegments=1] Number of segments on the Z-axis.
+ * @returns {Object} Configuration for a {@link Geometry} subtype.
+ */
+function buildPlaneGeometry(cfg = {}) {
+
+    let xSize = cfg.xSize || 1;
+    if (xSize < 0) {
+        console.error("negative xSize not allowed - will invert");
+        xSize *= -1;
+    }
+
+    let zSize = cfg.zSize || 1;
+    if (zSize < 0) {
+        console.error("negative zSize not allowed - will invert");
+        zSize *= -1;
+    }
+
+    let xSegments = cfg.xSegments || 1;
+    if (xSegments < 0) {
+        console.error("negative xSegments not allowed - will invert");
+        xSegments *= -1;
+    }
+    if (xSegments < 1) {
+        xSegments = 1;
+    }
+
+    let zSegments = cfg.xSegments || 1;
+    if (zSegments < 0) {
+        console.error("negative zSegments not allowed - will invert");
+        zSegments *= -1;
+    }
+    if (zSegments < 1) {
+        zSegments = 1;
+    }
+
+    const center = cfg.center;
+    const centerX = center ? center[0] : 0;
+    const centerY = center ? center[1] : 0;
+    const centerZ = center ? center[2] : 0;
+
+    const halfWidth = xSize / 2;
+    const halfHeight = zSize / 2;
+
+    const planeX = Math.floor(xSegments) || 1;
+    const planeZ = Math.floor(zSegments) || 1;
+
+    const planeX1 = planeX + 1;
+    const planeZ1 = planeZ + 1;
+
+    const segmentWidth = xSize / planeX;
+    const segmentHeight = zSize / planeZ;
+
+    const positions = new Float32Array(planeX1 * planeZ1 * 3);
+    const normals = new Float32Array(planeX1 * planeZ1 * 3);
+    const uvs = new Float32Array(planeX1 * planeZ1 * 2);
+
+    let offset = 0;
+    let offset2 = 0;
+
+    let iz;
+    let ix;
+    let x;
+    let a;
+    let b;
+    let c;
+    let d;
+
+    for (iz = 0; iz < planeZ1; iz++) {
+
+        const z = iz * segmentHeight - halfHeight;
+
+        for (ix = 0; ix < planeX1; ix++) {
+
+            x = ix * segmentWidth - halfWidth;
+
+            positions[offset] = x + centerX;
+            positions[offset + 1] = centerY;
+            positions[offset + 2] = -z + centerZ;
+
+            normals[offset + 2] = -1;
+
+            uvs[offset2] = (ix) / planeX;
+            uvs[offset2 + 1] = ((planeZ - iz) / planeZ);
+
+            offset += 3;
+            offset2 += 2;
+        }
+    }
+
+    offset = 0;
+
+    const indices = new ((positions.length / 3) > 65535 ? Uint32Array : Uint16Array)(planeX * planeZ * 6);
+
+    for (iz = 0; iz < planeZ; iz++) {
+
+        for (ix = 0; ix < planeX; ix++) {
+
+            a = ix + planeX1 * iz;
+            b = ix + planeX1 * (iz + 1);
+            c = (ix + 1) + planeX1 * (iz + 1);
+            d = (ix + 1) + planeX1 * iz;
+
+            indices[offset] = d;
+            indices[offset + 1] = b;
+            indices[offset + 2] = a;
+
+            indices[offset + 3] = d;
+            indices[offset + 4] = c;
+            indices[offset + 5] = b;
+
+            offset += 6;
+        }
+    }
+
+    return utils.apply(cfg, {
+        positions: positions,
+        normals: normals,
+        uv: uvs,
+        indices: indices
+    });
+}
+
+export {buildPlaneGeometry};

package/src/src/viewer/scene/geometry/builders/buildSphereGeometry.js

@@ -0,0 +1,161 @@
+import {utils} from '../../utils.js';
+
+/**
+ * @desc Creates a sphere-shaped {@link Geometry}.
+ *
+ * ## Usage
+ *
+ * Creating a {@link Mesh} with a sphere-shaped {@link ReadableGeometry} :
+ *
+ * [[Run this example](/examples/#geometry_builders_buildSphereGeometry)]
+ *
+ * ````javascript
+ * import {Viewer, Mesh, buildSphereGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas"
+ * });
+ *
+ * viewer.camera.eye = [0, 0, 5];
+ * viewer.camera.look = [0, 0, 0];
+ * viewer.camera.up = [0, 1, 0];
+ *
+ * new Mesh(viewer.scene, {
+ *      geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({
+ *          center: [0,0,0],
+ *          radius: 1.5,
+ *          heightSegments: 60,
+ *          widthSegments: 60
+ *      }),
+ *      material: new PhongMaterial(viewer.scene, {
+ *         diffuseMap: new Texture(viewer.scene, {
+ *             src: "textures/diffuse/uvGrid2.jpg"
+ *         })
+ *      })
+ * });
+ * ````
+ *
+ * @function buildSphereGeometry
+ * @param {*} [cfg] Configs
+ * @param {String} [cfg.id] Optional ID for the {@link Geometry}, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+ * @param {Number[]} [cfg.center]  3D point indicating the center position.
+ * @param {Number} [cfg.radius=1]  Radius.
+ * @param {Number} [cfg.heightSegments=24] Number of latitudinal bands.
+ * @param  {Number} [cfg.widthSegments=18] Number of longitudinal bands.
+ * @returns {Object} Configuration for a {@link Geometry} subtype.
+ */
+function buildSphereGeometry(cfg = {}) {
+
+    const lod = cfg.lod || 1;
+
+    const centerX = cfg.center ? cfg.center[0] : 0;
+    const centerY = cfg.center ? cfg.center[1] : 0;
+    const centerZ = cfg.center ? cfg.center[2] : 0;
+
+    let radius = cfg.radius || 1;
+    if (radius < 0) {
+        console.error("negative radius not allowed - will invert");
+        radius *= -1;
+    }
+
+    let heightSegments = cfg.heightSegments || 18;
+    if (heightSegments < 0) {
+        console.error("negative heightSegments not allowed - will invert");
+        heightSegments *= -1;
+    }
+    heightSegments = Math.floor(lod * heightSegments);
+    if (heightSegments < 18) {
+        heightSegments = 18;
+    }
+
+    let widthSegments = cfg.widthSegments || 18;
+    if (widthSegments < 0) {
+        console.error("negative widthSegments not allowed - will invert");
+        widthSegments *= -1;
+    }
+    widthSegments = Math.floor(lod * widthSegments);
+    if (widthSegments < 18) {
+        widthSegments = 18;
+    }
+
+    const positions = [];
+    const normals = [];
+    const uvs = [];
+    const indices = [];
+
+    let i;
+    let j;
+
+    let theta;
+    let sinTheta;
+    let cosTheta;
+
+    let phi;
+    let sinPhi;
+    let cosPhi;
+
+    let x;
+    let y;
+    let z;
+
+    let u;
+    let v;
+
+    let first;
+    let second;
+
+    for (i = 0; i <= heightSegments; i++) {
+
+        theta = i * Math.PI / heightSegments;
+        sinTheta = Math.sin(theta);
+        cosTheta = Math.cos(theta);
+
+        for (j = 0; j <= widthSegments; j++) {
+
+            phi = j * 2 * Math.PI / widthSegments;
+            sinPhi = Math.sin(phi);
+            cosPhi = Math.cos(phi);
+
+            x = cosPhi * sinTheta;
+            y = cosTheta;
+            z = sinPhi * sinTheta;
+            u = 1.0 - j / widthSegments;
+            v = i / heightSegments;
+
+            normals.push(x);
+            normals.push(y);
+            normals.push(z);
+
+            uvs.push(u);
+            uvs.push(v);
+
+            positions.push(centerX + radius * x);
+            positions.push(centerY + radius * y);
+            positions.push(centerZ + radius * z);
+        }
+    }
+
+    for (i = 0; i < heightSegments; i++) {
+        for (j = 0; j < widthSegments; j++) {
+
+            first = (i * (widthSegments + 1)) + j;
+            second = first + widthSegments + 1;
+
+            indices.push(first + 1);
+            indices.push(second + 1);
+            indices.push(second);
+            indices.push(first + 1);
+            indices.push(second);
+            indices.push(first);
+        }
+    }
+
+    return utils.apply(cfg, {
+        positions: positions,
+        normals: normals,
+        uv: uvs,
+        indices: indices
+    });
+}
+
+export {buildSphereGeometry};