X3D tutorial 1

Many X3D creation tools are "What you see is what you get". You can easily create a virtual realm through the graphic interface. However, X3D is not just an ordinary 3D design, although these tools are easy to use, however, the X3D standard details are often shielded, because if you want to have a deep understanding of X3D, you also need to fully understand the node, domain, detector and other technical details, the best way to achieve this is to create an X3D realm by writing text files. This tutorial provides six typical examples. These examples are not complex or brilliant, but cover the key content of X3D.

Before starting the creation, make the following preparations.

Text Editor

Any text editor you like, such as notepad in WINXP and edit in DOS.

X3D browser

3D browsers include flux player, Cortona, And the DIV client. For more information, see X3D viewers, browsers & plug-in.

Hardware

X3D has nothing to do with the hardware platform, as long as the X3D browser is available. In the following tutorial, we assume that the hardware platform is a microcomputer, the output device is a graphical window, and the input device is a mouse and keyboard. Of course, it would be better if there are more advanced virtual reality devices and the software that supports it to browse by using the language. The computer is enough for the realm we are about to create.

Section 1 "Hello, world! "

By convention, we use "Hello, world! "As our first virtual realm, it consists of cubes, cones, and sphere. You may have noticed that the X3D mark is made up of these three geometric shapes. Enter the document information:

<? XML version = "1.0" encoding = "UTF-8"?>
<! Doctype X3D public "ISO // Web3D // DTD X3D 3.1 // en" http://www.web3d.org/specifications/x3d-3.1.dtd ">

This is the identifier of the X3D file. Then type

<X3D>

This is the beginning of the X3D body content. Note that the X3D language is case sensitive. You can skip the file header

<Sence>

Then join a group node ):

<Group>

It is regarded as a whole with all the content in the following </group>, and the virtual scenario can be organized into a clear tree branch structure by using group nodes. A shape node describes a geometric shape, color, and other features:

<Shape>

Define a ry box (square box node) in the shape node ):

<Box/>

Note that we have not defined any domain for the box, which means that its dimensions, coordinates, and other features take the default value (Unit Cube ). Then end nodes:

</Shape>

</Group>

</Sence>

</X3D>

So far, we have successfully created the first virtual realm and saved it as helloworld. X3D. below is the complete file.

<? XML version = "1.0" encoding = "UTF-8"?>
<! Doctype X3D public "ISO // Web3D // DTD X3D 3.1 // en" http://www.web3d.org/specifications/x3d-3.1.dtd ">
<X3D>
<Scene>
<Group>
<Shape>
<Box/>
</Shape>
</Group>
</Scene>
</X3D>

Use the insert plug-in tool of Dreamweaver or insert a row directly in the HTML source file of the webpage.

<Embed src = "helloworld. X3D" width = "600" Height = "400"> </embed>

Open the browser and you will see a white cube. Although it is not very nice, you can change the viewpoint position and observe it from different places to experience the feeling of "3D interaction. The following defines the appearance of the cube. You only need to add the appearance (appearance) node to the shape node, add the material (material) node to the appearance, and define it as a diffuse red color:

<Appearance>
<Material diffusecolor = "1 0 0"/>
</Appearance>

Now the cube turns red, because the diffusecolor field (diffuse color) value in the material node "1 0 0" three numbers in turn represent red, green and blue, the value range is 0 to 1.

Now we have generated the second scenario. The complete code is:

<? XML version = "1.0" encoding = "UTF-8"?>
<! Doctype X3D public "ISO // Web3D // DTD X3D 3.1 // en" http://www.web3d.org/specifications/x3d-3.1.dtd ">
<X3D>
<Scene>
<Group>
<Shape>
<Appearance>
<Material diffusecolor = "1 0 0"/>
</Appearance>
<Box/>
</Shape>
</Group>
</Scene>
</X3D>

In this scenario, the red cube is located in the center of the screen, and its center coordinate is {0 0 }. If you want to move it to a position, you can use a transform (transform node) for it:

<Transform translation = "5 0 0"> <! -- Shifts the length of 5 units to the right -->
<Shape>
<Appearance>
<Material diffusecolor = "1 0 0"/>
</Appearance>
<Sphere/>
</Shape>
</Transform>

<! -- Shifts the length of five units to the right --> is the annotation part, which is used to describe the meaning of the code and does not affect the scenario description. In X3D, apart from the introduction of translation, rotation, and scaling, transform nodes play the same role as group nodes. Set the translation field of the transform node to 5 0 0, which means that the coordinate system of the transform node is shifted to the right (that is, the X axis direction) of the upper coordinate system, do not move in the other two directions. the complete code for the third scenario is:

<? XML version = "1.0" encoding = "UTF-8"?>
<! Doctype X3D public "ISO // Web3D // DTD X3D 3.1 // en" http://www.web3d.org/specifications/x3d-3.1.dtd ">
<X3D>
<Scene>
<Group>
<Transform translation = "5 0 0">
<Shape>
<Appearance>
<Material diffusecolor = "1 0 0"/>
</Appearance>
<Sphere/>
</Shape>
</Transform>
</Group>
</Scene>
</X3D>

Next, we will copy three copies of the transform node where the square is located, and define the corresponding geometric shapes as blocks, sphere, and cone in sequence:

<Transform translation = "-5 0 0">
<Shape>
<Appearance>
<Material diffusecolor = "1 0 0"/>
</Appearance>
<Box/> <! -- Square -->
</Shape>
</Transform>
<Transform translation = "0 0 0">
<Shape>
<Appearance>
<Material diffusecolor = "1 0 0"/>
</Appearance>
<Sphere/> <! -- Sphere -->
</Shape>
</Transform>
<Transform translation = "5 0 0">
<Shape>
<Appearance>
<Material diffusecolor = "1 0 0"/>
</Appearance>
<Cone/> <! -- Cone -->
</Shape>
</Transform>

You may already feel that the nodes in the X3D file appear in pairs or appear in pairs as <.../>. Note that the translation volume of the three transform nodes in the X3D file is different, so the positions of the three ry are different. In addition, you can modify the color of the three ry: the sphere is green (0 1 0), and the cone is blue (0 0 1 ). Finally, for future reference convenience, use def to specify a name for the three transform nodes, and the complete code of this X3D scenario becomes:

<? XML version = "1.0" encoding = "UTF-8"?>
<! Doctype X3D public "ISO // Web3D // DTD X3D 3.1 // en" http://www.web3d.org/specifications/x3d-3.1.dtd ">
<X3D>
<Scene>
<Group>
<Transform def = "box" Translation = "-5 0 0">
<Shape>
<Appearance>
<Material diffusecolor = "1 0 0"/>
</Appearance>
<Box/> <! -- Square -->
</Shape>
</Transform>
<Transform def = "sphere" Translation = "0 0 0">
<Shape>
<Appearance>
<Material diffusecolor = "0 1 0"/>
</Appearance>
<Sphere/> <! -- Sphere -->
</Shape>
</Transform>
<Transform def = "cone" Translation = "5 0 0">
<Shape>
<Appearance>
<Material diffusecolor = "0 0 1"/>
</Appearance>
<Cone/> <! -- Cone -->
</Shape>
</Transform>
</Group>
</Scene>
</X3D>

My flux player does not support Chinese comments. If you cannot see objects in the scenario, you can remove Chinese comments. Save the file as helloworld4.x3d, open the file in X3D browser, and view your work from multiple orientations by adjusting the viewpoint.
Summary: In this section, we created the first virtual realm, involving how to build the realm with the ry, and how to set the color and material of the ry. Although this scene chart composed of blocks, cones, and sphere is relatively simple, it already reflects the basic functions of X3D. Of course, in addition to changing the viewpoint with the mouse, this is just a static world. In the next section, we will introduce the dynamic features of X3D.