Canvas 3D Graphics Library - arc .id.au

Cango3D is a graphics library for the HTML canvas element which simplifies the drawing and animation of 3D shapes on the 2D canvas. Cango3D uses the fact ... Canvas3DGraphicsLibrary Cango3DgraphicslibraryforHTMLcanvas Cango3DisagraphicslibraryfortheHTMLcanvaselementwhichsimplifiesthedrawingandanimationof3Dshapesonthe2Dcanvas.Cango3DusesthefactthatstraightlinesandBéziercurvesmaintaintheirshapeunder3Dtransformation.Restrictingobjectoutlinedefinitionstothesetypesmeansthatsmoothcurvescanbedrawnin3Dwithveryfewpointsneedingtobetransformedandprojectedontothecanvas. Herearevariousexamplesofobjects,drawnandanimatedbytheCango3Dgraphicslibrary. Cang3Dbasicdrawingcapability Figure1.Examplesofdrawingusingthe3Dgraphicslibrary. Cango3D Cango3Dprovidesmethodsforcreating,renderingandanimating3Doutlinepaths,filledshapesandstroketextona2Dcanvas.Complex3Dobjectscanbeconstructedbymaneuveringshapes,actingaspanels,formingthe3Dobject. ThecurrentversionofCango3Dis11v00,andthesourcecodeisavailableatCango3D-11v00.js. FeaturesoftheCango3D Simpleandlightweight-Cango3Ddrawsfourobjecttypes:Path3D,Panel3D,Shape3DandText3D.AlltheseinheritmethodsfromthegenericObj3Dobject.ObjectscanbegroupedaschildrenofaGroup3Dobject.Group3DcanalsohavemoreGroup3DsaschildrenandsoontoformatreeofObjectsarbitrarilydeep. WorldCoordinates-Cango3DusestheRightHandedCartesiancoordinatesystem.ThecanvassitsintheXYplane,theviewpointisatsomedistancealongthepositiveZaxis(outofthescreen)XvaluesincreasetotheRIGHTandYaxisvaluesincreaseUPthescreen.Thefieldofviewisuserdefined.Theworldcoordinatesarealsouseddefined,mappingof3Dworldcoordinatesto2DcanvaspixelsishandledbytheCango3D. Shading-WhenaShape3Darerenderedtheirfillcolorisshadedaccordingtothecurrentpositiondirectionoftheuserdefinedlightsource. Animationusingmatrixtransforms-AllObj3DandGroup3Dhaveamethodstranslate,rotate,rotateX,rotateY,rotateZ,scaleandscaleNonUniformwhichapplytemporarytransformstotheobjectcoordinatesastheyarerendered.Thetransformsareresetafterrendering,newtransformscanthenbeappliedateveryframeofananimationwithoutchangingtheunderlyingcoordinatesoftheObj3D.Childreninherittheeffectofanytransformsappliedtotheparentrecursively. DragandDrop-AnyObj3DorGroup3Dcanbesimplyenabledfordrag-n-drop,justspecifythecallbackfunctions,alltheeventhandlingsupportcodeisbuilt-in. TaggingofPanel3D-APanel3DmayhaveTextorotherPanel3Dsgroupedsoitappearstheyaredrawnonthepanel. ObjectcreationbyExtrusionorRotation-Utilityfunctions'objectByExtrusion3D'and'objectByRevolution3D'areprovidedforeasycreationof3Dobjectsofthesestyles. UsingCango3D Firstly,downloadtheCango3DJavaScriptsourcefile:Cango3D-11v00.jsortheminifiedversionCango3D-11v00-min.js.ThiscanbeplacedinthesamedirectoryasthewebpageHTMLfile.Addthefollowinglinetothewebpageheader: Thisfileexposestheglobalobjects:Cango3D,Shape3D,Path3D,Sphere3D,Text3DandGroup3D.ToassistinobjectconstructionandmanipulationtheglobalCgo3Dsegsandthe2DshapeoutlinegeneratorshapeDefsarealsosuppliedalongwiththeutilityfunctions:svgToCgo3D,calcNormal,calcIncAngle. Withinthebodyofthewebpage,theremustbeacanvaselement,itmusthaveauniqueid. TypicalHTMLcodeis: AninstanceofaCango3Dgraphicscontextiscreatedasfollows: constg=newCango3D(canvasID); Thereturnedobjectreferencedbyg,hastheCango3Dmethodssuchasg.setWorldCoords3D,g.clearCanvas,g.setFOVandsoon. CreatinganobjectwithCango3D A3DobjectitismadebyfirstcreatingitscomponentpiecesbycallingtheconstructorofeitherPath3D,Panel3D,Shape3DorText3D.Eachconstructorrequiresadefinitionparameter,anoutlinepathexpressedin3DSVGcoordinatesforthePath3DandShape3D,orexpressedin2D(XYplane)SVGcoordinatesforthePanel3DoraStringfortheText3D.Variousoptionalpropertiescontrollingtheappearanceoftheobjectcanbepassedtotheconstructor. Cango3DprovidestheglobalobjectshapeDefstosimplifydefiningcommonshapes.TheshapeDefsobjecthasmethodstogeneratecircle,ellipse,square,triangle.Thesemethodstakebasicdimensionsasaparameterandreturnanarrayofdatain2DSVGformatdefiningtheshapeoutline. MorecomplexobjectsmaybecreatedwiththeutilitiesobjectByExtrusion3DandobjectByRevolution3D.objectByExtrusion3DtakesaflatpanelintheXYplaneandextrudesittoforma3Dobject.objectByRevolution3Dtakesa2DpathintheXYplaneandrotatesitinstepsabouttheYaxistoformasymmetricobject. Example Hereisaverysimpleexample,itcreatesaPanel3DrepresentingaplateusingashapeDefs.circleasitsoutlinepathandaPath3DrepresentingacurvedstickusingaarrayofCgo3DdatadefiningaCubicBéziercurve.ThesearethenaddedtoaGroup3Dtomovethemasoneentity.TheGroup3D's'rotate'methodisappliedwiththenewrotationanglepriortotheGroup3Dbeingrenderedevery50msec. JavaScriptsourcecodeforthisexampleisshownbelow: functiondrawDemo(cvsID) { constg=newCango3D(cvsID), stick=newPath3D(["M",0,0,0,"C",0,33,0,-5,66,0,-15,100,0], {y:-100,strokeColor:"sienna",lineWidth:3}), plate=newPanel3D(shapeDefs.circle(50), {xRot:-75,fillColor:"yellow",backColor:"yellow"}), plateNstick=newGroup3D(stick,plate); letangle=0; functionturnPlate() { angle+=20; if(angle>360) angle-=360; plateNstick.rotateY(angle);//applymatrixtoGroup3D g.render(plateNstick); } g.setWorldCoords3D(-75,-120,150); g.setLightSource(0,500,200); setInterval(turnPlate,50)//keepdoingthisforever } Animatedsculpturein3Dwithdraggablebase HereisanexampleofmanyofthefeaturesofCango3Dworkingtogether.Thehexagonaldisplaystandbaseismadeby'objectByRevolution3D'with6segmentsjoinedbystraightlines.Theturntableonthedisplaystandhasalsobeenmadefrom'objectByRevolution3D'butwith36segmentsjoinedbyarcs.ThesculptureismadeinthestyleofMarkusRaetzwork's.ItismadefromasinglePath3D. ThesculptureisanimatedusingtheTimelineutilitycontrolledbytheTURN,PAUSE,STEP,STOPcontrolbuttons. Thedarkgreenbasehasbeenenabledfordrag-n-dropsothatthedisplaystandcanbetiltedbyclickinganddraggingwiththemouse.ThisallowsagoodviewoftheingenuityoftheMarkusRaetzstylesculpture. TURN PAUSE STEP STOP