Future to the fantasy ★ ★
Titania
X3D Editor
Version
3.0

Hello world!

As first a very easy example, we will create a sphere with a texture and a text below the sphere. Let's start with the sphere:

#X3D V3.0 utf8

Transform {
  children Shape {
    geometry Sphere { }
  }
}

The Sphere has a radius field, which which is by default 1. The units in X3D are measured in Meters. The Sphere here is a node that is assigned to the geometry field of the Shape node. The Shape node has a second field appearance, which we will use later for texturing. The Shape node is assigned to the children field of the Transform node. The Transform node could have as many children as you want, but this is not always desired. The Transform node has special fields translation, rotation and scale for positioning it's children in space.

Now we have a sphere, but we don't see if it is rotating, let's assign a texture:

#X3D V3.0 utf8

Transform {
  children Shape {
    appearance Appearance {
      texture ImageTexture {
        url "earth.jpg"
      }
    }
    geometry Sphere { }
  }
}

We take a Appearance node and assign it to the appearance field of the Shape node. For the texture we take an ImageTexture node. It would be possible a MovieTexture as texture too. But this later. The ImageTexture has a field url. Here we say the ImageTexture should fetch the image from »../earth.png«. We could assign multiple urls:

url [
  "../earth.png",
  "example.com/earth.png"
]

If one image from the url field is not found or something went wrong the next one is taken.

Now the sphere looks like an earth and you are very curious how the text will be made:

#X3D V3.0 utf8

META "title" "about:hello_world"

Viewpoint {
  description "Home"
  position 0 -1.01581 6.02612
  centerOfRotation 0 -1.01581 0
}

Transform {
  children Shape {
    appearance Appearance {
      texture ImageTexture {
        url "earth.jpg"
      }
    }

    geometry Sphere { }
  }
}


Transform {
  translation 0 -1.5 0
  children Shape {
    appearance Appearance {
      material Material {
        diffuseColor 0 0.5 1
      }
    }

    geometry Text {
      string [ "Hello", "world!" ]
      solid FALSE
      fontStyle FontStyle {
        justify [ "MIDDLE", "BEGIN" ]
      }
    }
  }
}

We positioning the text below the sphere by translating it 1 Meter along the y-axis. We want a blue coloured text, so we assign a Material node to the material field of the Appearance node and set the diffuseColor field to 1 0 0. As geometry we take a Text node and set the string field to »Hello world!«

If you want to have the example on your desktop, download hello_world.x3dv or download hello_world.x3d.

Live preview


»Hello World!« example from the exercise. Drag and move the mouse while over the frame to rotate. Hold down the middle mouse button to move the dragon up and down. Use the scroll wheel to zoom closer or farther.