Menu
Example Code for X3Dom Basic Primitive Shapes: Box, Sphere, Cylinder, Cone, and Torus

The basic shapes, or "primitive" shapes are the box, sphere, cylinder, cone, and torus. They are called basic because you don't have to define a faceset from which to construct these shapes. Each of these shapes has a pre-defined object tag.

These examples are close to the minimal code required to create these shapes. If you do not specify a translation transform, these elements will appear at the origin. If you do not specify a rotation transform, or a viewpoint, these elements will present a side view.

Box

<x3d width="300px" height="200px">
<scene>
<transform rotation="1 1 1 1">
   <shape>
      <appearance>
         <material diffuseColor="0 0 1" />
      </appearance>
      <box />
   </shape>
</transform>
</scene>
</x3d>

The box element, by default, will create a cube that is 2 user units on each side. Without a rotation transform it would appear as a 2 dimensional box.

You can add size values to the box element tag. This allows you to create a rectangular prism. Without a rotation transform it would appear as a 2 dimensional rectangle.

Sphere

<x3d width="300px" height="200px">
<scene>
<transform rotation="1 1 1 1">
   <shape>
      <appearance>
         <material diffuseColor="0 1 0" />
      </appearance>
      <box size="2 2 4"/>
   </shape>
</transform>
</transform>
</scene>
</x3d>

You can add a radius value to the sphere element tag. Without the radius value, you get a sphere 2 user units in radius. If you set the radius value to "0", you get no sphere. this might be one way to make a disappearing, reappearing bubble in an animation.

Cylinder

<p><b>Cylinder</b></p>

<x3d width="300px" height="200px">
<scene>
<transform rotation="1 1 1 1">
   <shape>
      <appearance>
         <material diffuseColor="0 1 1" />
      </appearance>
      <cylinder height="3" radius="2"
 top="true" bottom="true" />
   </shape>
</transform>
</scene>
</x3d>

You can add height and radius values to the cylinder element tag. Without a rotation transform the cylinder would appear as a 2 dimensional rectangle. You can also add top and bottom values and set them to "true". If you don't add top and bottom values, you get a pipe.

Cone

<x3d width="300px" height="200px">
<scene>
<transform rotation="1 1 1 1.5">
   <shape>
      <appearance>
         <material diffuseColor="1 1 0" />
      </appearance>
      <cone bottomRadius="3" height="5"
 top="true" />
   </shape>
</transform>
</scene>
</x3d>

You can add a bottomRadius and height values to the cone element tag. Without the bottomRadius and height values, you get a cone 2 user units high with a 2 unit radius bottom. You can also add a top value to the cone element tag. Setting the top value to "true" creates a top cap on the cone. Without a rotation transform it would appear as a side view, but still recognizable as a cone.

Torus

<x3d width="300px" height="200px">
<scene>
<transform rotation="1 0 0 1">
   <shape>
      <appearance>
         <material diffuseColor="1 0 1" />
      </appearance>
      <torus innerRadius="0.6"
 outerRadius="1.8" />
   </shape>
</transform>
</scene>
</x3d>

A tourus is a circle or thin cylindrical surface that is revolved in a circle about an axis that is coplanar with the circle or cylindrical surface. You can add an innerRadius and outerRadius values to the torus element tag. Without a rotation transform it would appear as a face on ring.

You may think that the terms "basic" and "primitive" makes these shapes limiting. But you can actually combine them to make some pretty complex 3D objects. Many objects in the real world can be approximated by combinations of primitive shapes. And can you image what it would like to try to define a sphere or torus by defining facesets?


Learn more at amazon.com

More Graphics Design Tips:
• History of Type Development and Type Terminology
• Graphics Design for Beginners - Blur Filters
• Inkscape - How to Join Two Segments at Endnodes
• SVG Code for Outlined Letters Text
• Inkscpe Snap Controls Bar
• How to De-haze a Photo with GIMP
• Drawing Text with Draw SVG
• Free Animated GIF Maker
• How to Create Radial Gradients in Inkscape
• Graphic Design Meets Open Source