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 Vector3D { constructor (Vx , Vy, Vz){ this.x = Vx; this.y = Vy; this.z = Vz; this.bZeroVec = true; } calcVecL1() { let LenVec; this.bZeroVec = false; // We get a vector of length 1 LenVec = Math.sqrt( Math.pow(this.x,2) + Math.pow(this.y,2) + Math.pow(this.z,2) ); if( LenVec > 0 ){ this.x = this.x / LenVec; this.y = this.y / LenVec; this.z = this.z / LenVec; } else this.bZeroVec = true; } calcAngleForVec( pVec2 ){ let Len1, Len2, fAngle; Len1 = Math.sqrt( Math.pow(this.x,2) + Math.pow(this.y,2) + Math.pow(this.z,2) ); Len2 = Math.sqrt( Math.pow(pVec2.x,2) + Math.pow(pVec2.y,2) + Math.pow(pVec2.z,2) ); if( (Len1*Len2) > 0 ){ fAngle = Math.acos( ( this.x*pVec2.x + this.y*pVec2.y + this.z*pVec2.z ) / ( Len1 * Len2 ) ); } else fAngle = 0; return fAngle; } } class FillStyle { constructor ( color, opacity ){ this.color = color; this.opacity = opacity; } } class Object3D { constructor ( ){ this.vGId = null; this.vLightVec = null; } setGId( pGId ){ this.vGId = pGId; } setLightVec( vLightVec ){ this.vLightVec = vLightVec; } getRGBFromStringRGB( pRGBString ){ let bigint = parseInt(pRGBString.split('#')[1], 16); let r = (bigint >> 16) & 255; let g = (bigint >> 8) & 255; let b = bigint & 255; return {r:r, g:g, b:b}; } getCMYKfromRGB( vRGB ) { let c,m,y,k; if ( (vRGB.r === 0) && (vRGB.g === 0) && ( vRGB.b === 0) ) { c = 0; m = 0; y = 0; k =0; } else { let calcR = 1 - (vRGB.r / 255), calcG = 1 - (vRGB.g / 255), calcB = 1 - (vRGB.b / 255); k = Math.min(calcR, Math.min(calcG, calcB)), c = (calcR - k) / (1 - k), m = (calcG - k) / (1 - k), y = (calcB - k) / (1 - k); } return {c:c, m:m, y:y, k:k}; } getRGBfromCMYK( vCMYK ){ let c,m,y,r,g,b; c = vCMYK.c * (1.0 - vCMYK.k) + vCMYK.k; m = vCMYK.m * (1.0 - vCMYK.k) + vCMYK.k; y = vCMYK.y * (1.0 - vCMYK.k) + vCMYK.k; r = 255 * (1.0 - c); g = 255 * (1.0 - m); b = 255 * (1.0 - y); return {r:r, g:g, b:b}; } getStringRGBfromRGB( vRGB ) { return "#" + ( (1 << 24) + (vRGB.r << 16) + (vRGB.g << 8) + vRGB.b ).toString(16).slice(1,7); } 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.vecPerUP = null; this.vecPerDW = null; this.bNo2Vec = true; this.calcPairPerpendicularVectors(); } calcPairPerpendicularVectors(){ let vecP1P2, vecP1P3; 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) }; let LenvecP1P2, LenvecP1P3; this.bNo2Vec = false; // We get a vector P1P2 of length 1 LenvecP1P2 = Math.sqrt( Math.pow(vecP1P2.x,2) + Math.pow(vecP1P2.y,2) + Math.pow(vecP1P2.z,2) ); if( LenvecP1P2 > 0 ){ vecP1P2.x = vecP1P2.x / LenvecP1P2; vecP1P2.y = vecP1P2.y / LenvecP1P2; vecP1P2.z = vecP1P2.z / LenvecP1P2; } else this.bNo2Vec = true; // We get a vector P1P3 of length 1 LenvecP1P3 = Math.sqrt( Math.pow(vecP1P3.x,2) + Math.pow(vecP1P3.y,2) + Math.pow(vecP1P3.z,2) ); if( LenvecP1P3 > 0 ){ vecP1P3.x = vecP1P3.x / LenvecP1P3; vecP1P3.y = vecP1P3.y / LenvecP1P3; vecP1P3.z = vecP1P3.z / LenvecP1P3; } else this.bNo2Vec = true; if( !this.bNo2Vec ){ //Calculate Upper Perpendicular Vector this.vecPerUP = { 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.vecPerDW = { 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) && (this.tBordStyle !== null) ){ vPathTag.style.stroke = this.tBordStyle.color; vPathTag.style.strokeOpacity = this.tBordStyle.opacity; vPathTag.style.strokeWidth = "1px"; } else { console.log(123); vPathTag.style.stroke = "none"; vPathTag.style.strokeWidth = "0"; } 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 ]; let tr1, tr2; tr1 = 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 ); tr2 = new TriangleSurface3D( new Point3D( p21.x, p21.y, p21.z ), new Point3D( p11.x, p11.y, p11.z ), new Point3D( p22.x, p22.y, p22.z ), this.tFillStyleTriangle, this.tBordStyleTriangle ); if( !tr1.bNo2Vec )vTrianglesRibbon.push( tr1 ); if( !tr2.bNo2Vec )vTrianglesRibbon.push( tr2 ); } return vTrianglesRibbon; } buildSvgPath( UpDwPerVecLen, UpPerVecStyle, DwPerVecStyle ){ let vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); this.aTrianglesRibbons.forEach( vTrianglesRibbon => { vTrianglesRibbon.forEach( vTriangle => { let vFillStyle = new FillStyle( vTriangle.tFillStyle.color, vTriangle.tFillStyle.opacity); let bVisible = false; if( this.vLightVec !== null ){ let fAngleVecLight = this.vLightVec.calcAngleForVec( vTriangle.vecPerUP ); if( fAngleVecLight > Math.PI / 2 ){ bVisible = true; let vRGB = this.getRGBFromStringRGB( vFillStyle.color ); let vCMYK = this.getCMYKfromRGB( vRGB ); let vColor; let dK = vCMYK.k / (Math.PI / 2); vCMYK.k = dK * ( Math.PI - fAngleVecLight ); vRGB = this.getRGBfromCMYK( vCMYK ); vColor = this.getStringRGBfromRGB( vRGB ); vFillStyle.color = vColor; } } if( bVisible === true ){ vTriangle.tFillStyle = vFillStyle; vTriangle.tBordStyle = vFillStyle; vGTag.appendChild( vTriangle.buildSvgPath() ); if(UpDwPerVecLen !== undefined){ let vecPDW = new Line3D( vTriangle.p1, new Point3D( vTriangle.p1.x + vTriangle.vecPerDW.x * UpDwPerVecLen, vTriangle.p1.y + vTriangle.vecPerDW.y * UpDwPerVecLen, vTriangle.p1.z + vTriangle.vecPerDW.z * UpDwPerVecLen), DwPerVecStyle ); let vecPUP = new Line3D( vTriangle.p1, new Point3D( vTriangle.p1.x + vTriangle.vecPerUP.x * UpDwPerVecLen, vTriangle.p1.y + vTriangle.vecPerUP.y * UpDwPerVecLen, vTriangle.p1.z + vTriangle.vecPerUP.z * UpDwPerVecLen), UpPerVecStyle ); vGTag.appendChild( vecPDW.buildSvgPath() ); vGTag.appendChild( vecPUP.buildSvgPath() ); } } } ); } ); return vGTag; } } class VolumetricBaggySphere 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 + Math.sin( Fi*16 )*this.rX/16; pRy = Math.cos( Fi )*this.rY + Math.sin( Fi*8 )*this.rY/16; 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 - Math.cos( Fi*8 )*trXP/16); py = pCArcXP.y + Math.sin( Fi )* (trYP - Math.sin( Fi*16 )*trYP/16); plArcP.addPoint3D( new Point3D( px, py, pCArcXP.z ) ); px = pCArcX.x + Math.cos( Fi )* (trX - Math.cos( Fi*8 )*trX/16); py = pCArcX.y + Math.sin( Fi )* (trY - Math.sin( Fi*16 )*trY/16); 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 ]; let tr1, tr2; tr1 = 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 ); tr2 = new TriangleSurface3D( new Point3D( p21.x, p21.y, p21.z ), new Point3D( p11.x, p11.y, p11.z ), new Point3D( p22.x, p22.y, p22.z ), this.tFillStyleTriangle, this.tBordStyleTriangle ); if( !tr1.bNo2Vec )vTrianglesRibbon.push( tr1 ); if( !tr2.bNo2Vec )vTrianglesRibbon.push( tr2 ); } return vTrianglesRibbon; } buildSvgPath( UpDwPerVecLen, UpPerVecStyle, DwPerVecStyle ){ let vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); this.aTrianglesRibbons.forEach( vTrianglesRibbon => { vTrianglesRibbon.forEach( vTriangle => { let vFillStyle = new FillStyle( vTriangle.tFillStyle.color, vTriangle.tFillStyle.opacity); let bVisible = false; if( this.vLightVec !== null ){ let fAngleVecLight = this.vLightVec.calcAngleForVec( vTriangle.vecPerUP ); if( fAngleVecLight > Math.PI / 2 ){ bVisible = true; let vRGB = this.getRGBFromStringRGB( vFillStyle.color ); let vCMYK = this.getCMYKfromRGB( vRGB ); let vColor; let dK = vCMYK.k / (Math.PI / 2); vCMYK.k = dK * ( Math.PI - fAngleVecLight ); vRGB = this.getRGBfromCMYK( vCMYK ); vColor = this.getStringRGBfromRGB( vRGB ); vFillStyle.color = vColor; } } if( bVisible === true ){ vTriangle.tFillStyle = vFillStyle; vTriangle.tBordStyle = vFillStyle; vGTag.appendChild( vTriangle.buildSvgPath() ); if(UpDwPerVecLen !== undefined){ let vecPDW = new Line3D( vTriangle.p1, new Point3D( vTriangle.p1.x + vTriangle.vecPerDW.x * UpDwPerVecLen, vTriangle.p1.y + vTriangle.vecPerDW.y * UpDwPerVecLen, vTriangle.p1.z + vTriangle.vecPerDW.z * UpDwPerVecLen), DwPerVecStyle ); let vecPUP = new Line3D( vTriangle.p1, new Point3D( vTriangle.p1.x + vTriangle.vecPerUP.x * UpDwPerVecLen, vTriangle.p1.y + vTriangle.vecPerUP.y * UpDwPerVecLen, vTriangle.p1.z + vTriangle.vecPerUP.z * UpDwPerVecLen), UpPerVecStyle ); vGTag.appendChild( vecPDW.buildSvgPath() ); vGTag.appendChild( vecPUP.buildSvgPath() ); } } } ); } ); return vGTag; } } class ArrayObj3D { constructor () { this.Ao = []; } pushObject3D( pO ){ this.Ao.push( pO ); } buildSvgPath() { return NULL; } }

Played with SVG a bit 7 - Tiled bags as bulky pseudo 3D shapes in SVG