Aiden Explains!

X3dom Tutorial!

HEY GUYS! Please read HTML TUTORIAL Before reading because this has a same stucture And this is a easier tutorial for This tutorial And, see this tutorial for another tutorial.

Hello! Did you know there can be 3D markup languages?

Wait 3D markup languages??

Indeed! There is one called X3DOM!

What the hell is X3DOM???

Well X3dom is "an open-source framework and runtime for 3D graphics on the Web. It can be freely used for non-commercial and commercial purposes, and is dual-licensed under MIT and GPL license."

Explain it in English Please.

Its a markup language to make 3d graphics.

Oh! I understand!

Ok now can we do the tutorial now?

Sure!

Real tutorial!

OK NOW so you gotta make a html file, maybe 3d.html! AND REMINDER TO PUT <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script> <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link> if u want it to work. And you of course gotta put what u want to the html file. So now if u already put some stuff in the html file, u gotta put <x3d> and <Scene> if you want to make a 3d scene.

TAGS!

  1. <shape>
  2. <appearance>
  3. <transform>

Shape tags

So the shape tag is for making shapes with are made using shape tags. Some shape tags like a <cone> or a <sphere> and u can put a <cube>. You can put shapes like <shape> <box></box> </shape>

Appearance

We need appearance because if you only put the <shape> <box></box> </shape> You can only get a white cube. -> Cheatsheet image example Anyways What IS APPEARANCE!? The appearance tag is like a <style> tag, but in x3dom. You can put color by the <material> tag. For a red cube you can put: <shape> <appearance> <material diffuseColor='1 0 0'></material> </appearance> <box></box>> </shape> And here is the result:-> Cheatsheet image example

Transform

The transform tag is for moving 3D shapes. For example: <shape>
<appearance>
<material diffuseColor='1 0 0'></material>
</appearance>
<box></box>
</shape>

<transform translation='-3 0 0'>
<shape>
<appearance>
<material diffuseColor='0 1 0'></material>
</appearance>
<cone></cone>
</shape>
</transform>

<transform translation='3 0 0'>
<shape>
<appearance>
<material diffuseColor='0 0 1'></material>
</appearance>
<sphere></sphere>
</shape>
</transform> And the result is -> Cheatsheet image example