First X3D Example

X3D allows easy integration with a variety of media sources. This example shows the Bell X-1 from WebX3D.org using the same animation. The model geometry has been removed from the code here and stored in a separate file. The example shows the Bell X-1 modeled and textured using X3D.

In this example there are four files that are required. All files go into the same directory. File names are case sensitive and are listed in brackets.

  1. HTML file that includes the X3DOM library and animation file.
  2. X3D file that defines the animation (BellX1-animated.x3d)
  3. X3D file that defines the geometry and material of the Bell X-1 (model.x3d, which also includes the texture file)
  4. JPEG image texture file for the Bell X-1. (bell_x1_diffuse.jpg)

HTML [index.html]

 <!DOCTYPE html>
<html>
<head>
    <title>Bell X1</title>
        <script type='text/javascript' charset="UTF-8" src='https://x3dom.org/release/x3dom-full.js'> </script>         
        <link rel='stylesheet' type='text/css' href='https://x3dom.org/release/x3dom.css'></link> 
        <style>
            body { }
            .canvas-width {width:100%; max-width:960px;}
            .canvas-height {height:100%; max-height:960px; }
            x3d {}
        </style>
</head>
<body>
        <div class="canvas-width canvas-height" style="margin-bottom:0px;">
        <x3d class="canvas-width canvas-height"> 
        <scene>
        <background skyColor="0.678 0.847 0.902"></background>
        <inline nameSpaceName="X3dExample" mapDEFToID="true" url="BellX1-animated.x3d"></inline>
        </scene>
        </x3d> 
        </div>
</body>
</html>

X3D Bell X-1 animation [BellX1-animated.x3d]

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.3//EN" "http://www.web3d.org/specifications/x3d-3.3.dtd">
<X3D xmlns:xsd="http://www.w3.org/2001/XMLSchema-instance" xsd:noNamespaceSchemaLocation="http://www.web3d.org/specifications/x3d-3.1.xsd" version="3.1" profile="Immersive">
  <head>
    <meta name="title" content="Bell X1 Animation"/>
    <meta name="description" content="The animated version of the Bell X-1"/>
    <meta name="created" content="16 May 2023"/>
  </head>
  <Scene>
    <Viewpoint description="Approaching" position="-1.6 0 18" centerOfRotation="0 0 8" orientation="0 1 0 -0.2" fieldOfView="0.7"/>
    <Background DEF="blue_Background"/>
    <Transform DEF="fly_forward" translation="0 0 0" rotation="0 0 1 0">
	  <Inline url="model.x3d"></Inline>
    </Transform>
    <OrientationInterpolator DEF="n001" key="0.5 0.75 1.0" keyValue="0.0 0.0 1.0 0.000,0.0 0.0 1.0 0.700,0.0 0.0 1.0 1.400"/>
    <PositionInterpolator DEF="n000" key="0.0 1.0" keyValue="0.0 0.0 0.0,0.0 0.0 16.0"/>
    <TimeSensor DEF="master_time" cycleInterval="3" loop="true"/>
    <ROUTE fromField="value_changed" fromNode="n000" toField="translation" toNode="fly_forward"/>
    <ROUTE fromField="fraction_changed" fromNode="master_time" toField="set_fraction" toNode="n000"/>
    <ROUTE fromField="value_changed" fromNode="n001" toField="rotation" toNode="fly_forward"/>
    <ROUTE fromField="fraction_changed" fromNode="master_time" toField="set_fraction" toNode="n001"/>
  </Scene>
</X3D>

X3D Bell X-1 model [model.x3d]

This file is large (1.4MB and can be viewed as text)

JPEG texture [bell_x1_diffuse.jpg]

The original image is 1024x1024 pixels. It has been reduce for ease of display.

Bell X-1 Display in X3D