var x2d_Base = 150; var y2d_Base = 300; class Point2D { constructor (x , y){ this.x = x; this.y = y; } } class Point3D { constructor (Vx , Vy, Vz){ this.x = Vx; this.y = Vy; this.z = Vz; this.v2D = new Point2D( 0, 0 ); } to2D() { //Simple isometric measurement... angle values calculated this.v2D.x = x2d_Base + this.x - this.y/2; this.v2D.y = y2d_Base + -this.z + this.y/2; return this.v2D; } } class FillStyle { constructor ( color, opacity ){ this.color = color; this.opacity = opacity; } } class Object3D { constructor ( ){ } buildSvgPath(){ return NULL; } } class TriangleSurface3D extends Object3D { constructor ( p1, p2, p3, tFillStyle, tBordStyle ){ super(); this.p1 = p1; this.p2 = p2; this.p3 = p3; this.tFillStyle = tFillStyle; this.tBordStyle = tBordStyle; this.vecP1PUP = null; this.vecP1PDW = null; this.calcPairPerpendicularVectors(); } calcPairPerpendicularVectors(){ let vecP1P2, vecP1P3; let vecP1PUP, vecP1PLW; vecP1P2 = { x: (this.p2.x - this.p1.x), y: (this.p2.y - this.p1.y), z: (this.p2.z - this.p1.z) }; vecP1P3 = { x: (this.p3.x - this.p1.x), y: (this.p3.y - this.p1.y), z: (this.p3.z - this.p1.z) }; //Calculate Upper Perpendicular Vector this.vecP1PUP = { x: (vecP1P2.y * vecP1P3.z - vecP1P2.z * vecP1P3.y), y: (vecP1P2.z * vecP1P3.x - vecP1P2.x * vecP1P3.z), z: (vecP1P2.x * vecP1P3.y - vecP1P2.y * vecP1P3.x) } //Calculate Lower Perpendicular Vector this.vecP1PDW = { x: (vecP1P3.y * vecP1P2.z - vecP1P3.z * vecP1P2.y), y: (vecP1P3.z * vecP1P2.x - vecP1P3.x * vecP1P2.z), z: (vecP1P3.x * vecP1P2.y - vecP1P3.y * vecP1P2.x) } } buildSvgPath(){ let vPathTag = document.createElementNS("http://www.w3.org/2000/svg", 'path'); let vD = ""; let vAxis2D; vAxis2D = this.p1.to2D(); vD += "M" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; vAxis2D = this.p2.to2D(); vD += "L" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; vAxis2D = this.p3.to2D(); vD += "L" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " Z"; vPathTag.setAttribute( "d", vD ); if( this.tBordStyle !== undefined ){ vPathTag.style.stroke = this.tBordStyle.color; vPathTag.style.strokeOpacity = this.tBordStyle.opacity; } else { vPathTag.style.stroke = "none"; } vPathTag.style.strokeWidth = "1px"; vPathTag.style.fill = this.tFillStyle.color; vPathTag.style.fillOpacity = this.tFillStyle.opacity; return vPathTag; } } class Line3D extends Object3D { constructor ( p1, p2, tStyle ){ super(); this.p1 = p1; this.p2 = p2; this.tStyle = tStyle; } buildSvgPath(){ let vPathTag = document.createElementNS("http://www.w3.org/2000/svg", 'path'); let vD = ""; let vAxis2D; vAxis2D = this.p1.to2D(); vD += "M" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; vAxis2D = this.p2.to2D(); vD += "L" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2); vPathTag.setAttribute( "d", vD ); vPathTag.style.stroke = this.tStyle.color; vPathTag.style.strokeOpacity = this.tStyle.opacity; vPathTag.style.strokeWidth = "1px"; vPathTag.style.fill = "none"; return vPathTag; } } class PolyLine3D extends Object3D { constructor ( tStyle ){ super(); this.pA = []; this.tStyle = tStyle; } addPoint3D( p ){ this.pA.push( p ); } buildSvgPath(){ let vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); let vPathTag = document.createElementNS("http://www.w3.org/2000/svg", 'path'); let vD = ""; let vAxis2D; let pi = 0; let pii = 0; let pCnt = this.pA.length; this.pA.forEach( pCur => { vAxis2D = pCur.to2D(); if( pi === 0 ){ vD += "M" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; } else { vD += "L" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2)+" "; } pi++; pii++; if( (pi>20) && (pii < pCnt - 1) ){ vPathTag.setAttribute( "d", vD ); vPathTag.style.stroke = this.tStyle.color; vPathTag.style.strokeOpacity = this.tStyle.opacity; vPathTag.style.strokeWidth = "1px"; vPathTag.style.fill = "none"; vGTag.appendChild(vPathTag); vPathTag = document.createElementNS("http://www.w3.org/2000/svg", 'path'); vD = "M" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; pi = 1; } }); if( pi > 0 ){ vPathTag.setAttribute( "d", vD ); vPathTag.style.stroke = this.tStyle.color; vPathTag.style.strokeOpacity = this.tStyle.opacity; vPathTag.style.strokeWidth = "1px"; vPathTag.style.fill = "none"; vGTag.appendChild(vPathTag); } return vGTag; } } class ArcSphere extends Object3D { constructor ( pC, rX, rY, rZ, cntArcsDim, tStyleX, tStyleY, tStyleZ ){ super(); this.pArcsX = []; this.pArcsY = []; this.pArcsZ = []; this.pC = pC; this.rX = rX; this.rY = rY; this.rZ = rZ; this.cntArcsDim = cntArcsDim; this.tStyleArcX = tStyleX; this.tStyleArcY = tStyleY; this.tStyleArcZ = tStyleZ; this.generateArcs(); } generateArcs() { let dFi,Fi; let pArcC = new Point3D( 0, 0, 0) let pRx,pRy,pRz,pz,py,px; dFi = (-Math.PI / ( this.cntArcsDim ) ); Fi = 0.0; for( let i = 0; i < this.cntArcsDim * 2; i++ ){ pRx = Math.cos( Fi )*this.rX; pRy = Math.cos( Fi )*this.rY; pz = this.pC.z + Math.sin( Fi )*this.rZ; Fi += dFi; pArcC.x = this.pC.x; pArcC.y = this.pC.y; pArcC.z = pz; this.addArcX( pArcC, pRx, pRy ); } dFi = (-Math.PI / ( this.cntArcsDim ) ); Fi = 0.0; for( let i = 0; i < this.cntArcsDim * 2; i++ ){ pRx = Math.cos( Fi )*this.rX; pRz = Math.cos( Fi )*this.rZ; py = this.pC.y + Math.sin( Fi )*this.rY; Fi += dFi; pArcC.x = this.pC.x; pArcC.y = py; pArcC.z = this.pC.z; this.addArcY( pArcC, pRx, pRz ); } dFi = (-Math.PI / ( this.cntArcsDim ) ); Fi = 0.0; for( let i = 0; i < this.cntArcsDim * 2; i++ ){ pRy = Math.cos( Fi )*this.rY; pRz = Math.cos( Fi )*this.rZ; px = this.pC.x + Math.sin( Fi )*this.rX; Fi += dFi; pArcC.x = px; pArcC.y = this.pC.y; pArcC.z = this.pC.z; this.addArcZ( pArcC, pRy, pRz ); } } addArcX( pCArcX, trX, trY ){ let dFi,Fi,px,py; let plArc = new PolyLine3D( null ); dFi = (2.0 * Math.PI / ( this.cntArcsDim * 4 ) ); Fi = 0.0; for( let i = 0; i < this.cntArcsDim * 4; i++ ){ px = pCArcX.x + Math.cos( Fi )*trX; py = pCArcX.y + Math.sin( Fi )*trY; Fi += dFi; plArc.addPoint3D( new Point3D( px, py, pCArcX.z ) ); } plArc.addPoint3D( new Point3D( pCArcX.x + trX, pCArcX.y, pCArcX.z ) ); this.pArcsX.push( plArc ); } addArcY( pCArcY, trX, trZ ){ let dFi,Fi,px,pz; let plArc = new PolyLine3D( null ); dFi = (2.0 * Math.PI / ( this.cntArcsDim * 4 ) ); Fi = 0.0; for( let i = 0; i < this.cntArcsDim * 4; i++ ){ px = pCArcY.x + Math.cos( Fi )*trX; pz = pCArcY.z + Math.sin( Fi )*trZ; Fi += dFi; plArc.addPoint3D( new Point3D( px, pCArcY.y, pz ) ); } plArc.addPoint3D( new Point3D( pCArcY.x + trX, pCArcY.y, pCArcY.z ) ); this.pArcsY.push( plArc ); } addArcZ( pCArcZ, trY, trZ ){ let dFi,Fi,py,pz; let plArc = new PolyLine3D( null ); dFi = (2.0 * Math.PI / ( this.cntArcsDim * 4 ) ); Fi = 0.0; for( let i = 0; i < this.cntArcsDim * 4; i++ ){ py = pCArcZ.y + Math.cos( Fi )*trY; pz = pCArcZ.z + Math.sin( Fi )*trZ; Fi += dFi; plArc.addPoint3D( new Point3D( pCArcZ.x, py, pz ) ); } plArc.addPoint3D( new Point3D( pCArcZ.x, pCArcZ.y + trY, pCArcZ.z ) ); this.pArcsZ.push( plArc ); } buildSvgPath(){ let vGGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); let vGTag; let fArcBuild = (pArc, vStyle) => { let vD, pi, pii, pCnt, vAxis2D, vPathTag; pi = 0; vD = ""; pii = 0; pCnt = pArc.pA.length; vPathTag = document.createElementNS("http://www.w3.org/2000/svg", 'path'); pArc.pA.forEach( pCur => { vAxis2D = pCur.to2D(); if( pi === 0 ){ vD += "M" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; } else { vD += "L" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2)+" "; } pi++; pii++; if( (pi>20) && (pii < pCnt - 1) ){ vPathTag.setAttribute( "d", vD ); vPathTag.style.stroke = vStyle.color; vPathTag.style.strokeOpacity = vStyle.opacity; vPathTag.style.strokeWidth = "1px"; vPathTag.style.fill = "none"; vGTag.appendChild(vPathTag); vPathTag = document.createElementNS("http://www.w3.org/2000/svg", 'path'); vD = "M" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; pi = 1; } }); if( pi > 0 ){ vPathTag.setAttribute( "d", vD ); vPathTag.style.stroke = vStyle.color; vPathTag.style.strokeOpacity = vStyle.opacity; vPathTag.style.strokeWidth = "1px"; vPathTag.style.fill = "none"; vGTag.appendChild(vPathTag); } }; vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); this.pArcsX.forEach( pArcX => { fArcBuild( pArcX, this.tStyleArcX ) } ); vGGTag.appendChild(vGTag); vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); this.pArcsY.forEach( pArcY => { fArcBuild( pArcY, this.tStyleArcY ) } ); vGGTag.appendChild(vGTag); vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); this.pArcsZ.forEach( pArcZ => { fArcBuild( pArcZ, this.tStyleArcZ ) } ); vGGTag.appendChild(vGTag); return vGGTag; } } class VolumetricSphere extends Object3D { constructor ( pC, rX, rY, rZ, cntArcsDim, tFillStyleTriangle, tBordStyleTriangle ){ super(); this.aTrianglesRibbons = []; this.pC = pC; this.rX = rX; this.rY = rY; this.rZ = rZ; this.cntArcsDim = cntArcsDim; this.tFillStyleTriangle = tFillStyleTriangle; this.tBordStyleTriangle = tBordStyleTriangle; this.generateTrianglesRibbons(); } generateTrianglesRibbons() { let dFi,Fi; let pArcCP = new Point3D( 0, 0, 0); let pArcC = new Point3D( 0, 0, 0); let pRx,pRy,pz,pRxP,pRyP,pzP; let mapZ = new Map(); dFi = (Math.PI / ( this.cntArcsDim ) ); Fi = -Math.PI/2; pRxP = Math.cos( Fi )*this.rX; pRyP = Math.cos( Fi )*this.rY; pzP = this.pC.z + Math.sin( Fi )*this.rZ; pArcCP.x = this.pC.x; pArcCP.y = this.pC.y; pArcCP.z = this.pC.z + Math.sin( Fi )*this.rZ; for( let i = 0; i < this.cntArcsDim; i++ ){ Fi += dFi; pRx = Math.cos( Fi )*this.rX; pRy = Math.cos( Fi )*this.rY; pz = this.pC.z + Math.sin( Fi )*this.rZ; pArcC.x = this.pC.x; pArcC.y = this.pC.y; pArcC.z = pz; mapZ.set( pz, this.generateTrianglesRibbon( pArcCP, pRxP, pRyP, pArcC, pRx, pRy ) ); pRxP = pRx; pRyP = pRy; pzP = pz; pArcCP.x = pArcC.x; pArcCP.y = pArcC.y; pArcCP.z = pArcC.z; } let mapZSort = new Map([...mapZ.entries()].sort( (a, b) => { return parseFloat(a) - parseFloat(b); } )); for (var [keyZ, vTrianglesRibbon] of mapZSort.entries()) { this.aTrianglesRibbons.push( vTrianglesRibbon ); } } generateTrianglesRibbon( pCArcXP, trXP, trYP, pCArcX, trX, trY ){ let vTrianglesRibbon = []; let dFi,Fi,px,py; let plArcP = new PolyLine3D( null ); let plArc = new PolyLine3D( null ); dFi = (2.0 * Math.PI / ( this.cntArcsDim * 2 ) ); Fi = 0.0; for( let i = 0; i <= this.cntArcsDim * 2; i++ ){ px = pCArcXP.x + Math.cos( Fi )*trXP; py = pCArcXP.y + Math.sin( Fi )*trYP; plArcP.addPoint3D( new Point3D( px, py, pCArcXP.z ) ); px = pCArcX.x + Math.cos( Fi )*trX; py = pCArcX.y + Math.sin( Fi )*trY; plArc.addPoint3D( new Point3D( px, py, pCArcX.z ) ); Fi += dFi; } plArcP.addPoint3D( new Point3D( pCArcXP.x, pCArcXP.y, pCArcXP.z ) ); plArc.addPoint3D( new Point3D( pCArcX.x, pCArcX.y, pCArcX.z ) ); let p11, p12, p21, p22; for( let i = 1; i <= this.cntArcsDim * 2; i++ ){ p11 = plArcP.pA[ i - 1 ]; p12 = plArcP.pA[ i ]; p21 = plArc.pA[ i - 1]; p22 = plArc.pA[ i ]; vTrianglesRibbon.push( new TriangleSurface3D( new Point3D( p11.x, p11.y, p11.z ), new Point3D( p12.x, p12.y, p12.z ), new Point3D( p22.x, p22.y, p22.z ), this.tFillStyleTriangle, this.tBordStyleTriangle ) ); vTrianglesRibbon.push( new TriangleSurface3D( new Point3D( p21.x, p21.y, p21.z ), new Point3D( p22.x, p22.y, p22.z ), new Point3D( p11.x, p11.y, p11.z ), this.tFillStyleTriangle, this.tBordStyleTriangle ) ); } return vTrianglesRibbon; } buildSvgPath(){ let vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); this.aTrianglesRibbons.forEach( vTrianglesRibbon => { vTrianglesRibbon.forEach( vTriangle => { vGTag.appendChild( vTriangle.buildSvgPath() ); } ); } ); return vGTag; } } class ArrayObj3D { constructor () { this.Ao = []; } pushObject3D( pO ){ this.Ao.push( pO ); } buildSvgPath() { return NULL; } }

Played with SVG a bit 5 - Generation of volumetric pseudo 3D Spheres