55
X3DOMDocumentation,Release1.4.0
<x3d width="500px" height="400px">
<scene>
<shape>
<appearance>
<material diffuseColor=’red’></material>
</appearance>
<box></box>
</shape>
</scene>
</x3d>
Youmightwonder,whythe<box>tagisn’tenoughandwhattheothertagsaregoodfor. <scene>simplysays,
thatyouare goingtodefinea3Dscene. Anda<shape>defines s thegeometry(herea<box>)as wellas the
<appearance>ofanobject. Inourexample,thewholeappearanceonlyconsistsofared<material>. Ifyou
wanttolearnmoreabouttheseelements(ornodesastheyarecalledinX3D),justfollowthislink andclickonthe
nodeyouareinterestedin.
Becausesimplylookingatonesideoftheboxisbitboring,youcannavigatewithinyourscenewiththehelpofthe
mouse. Ifyoumovethemousewithpressedleftmousebuttoninsidetheareasurroundedbyablackborder,you’ll
rotatethepointofview.Withthemiddlemousebuttonyoucanpanaroundandwiththerightbuttonyoucanzoomin
andout.Formoreinformationsee:CameraNavigation.
Ok,nowyoucanmovearound,butadmittedlythisscenestillissortofboring. Thus,we’lladdanotherobject,a
blue<sphere>,intoourlittlescene. Asisshownnext,the<shape>isnowsurroundedbyanotherelement,the
<transform>tag.Thisisnecessary,becauseotherwisebothobjectswouldappearatthesameposition,namelythe
virtualoriginofthe3Dscene.
Thereto,the‘translation’attributeofthefirst<transform>elementmovestheboxtwounitstotheleft,andthe
‘translation’attributeofthesecond<transform>elementmovesthespheretwounitstotheright.Ascanbeseenin
theexamplebelow,thevalueofthe‘translation’attributeconsistsofthreenumbers.Thefirstdenotesthelocalx-axis
(movementtotheleft/right),theseconddefinesthemovementalongthelocaly-axis(up/down),andthethirddefines
themovementalongthelocalz-axis(back/front).
<x3d width="500px" height="400px">
<scene>
<transform translation="-2 0 0 0">
<shape>
<appearance>
<material diffuseColor=’red’></material>
</appearance>
<box></box>
</shape>
</transform>
<transform translation="2 0 0 0">
<shape>
<appearance>
<material diffuseColor=’blue’></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
</scene>
</x3d>
NowyouknowthebasicsofX3DOM.Asyoumighthaveexpected,therearecertainlymorenodesorelementsyou
cantryoutlikethe<cone>orthe<cylinder>.Also,thereareothermaterialpropertieslike‘specularColor’and
‘transparency’. Byapplyingan<imageTexture>toyourobject,youcanachievefancyeffectslikeateapotthat
lookslikeearthasdemonstratedinthisexample. Whenyouhavealookattheexample’ssourcecode,you’llfinda
6
Chapter1. Guide