Future to the fantasy ★ ★
Titania
X3D Editor
Version
3.0

Display your scene with Cobweb in a Web Browser

Once you have created a scene with Titania you might want to publish it over the Internet that other people can view and play with your work. For that there is the nice plugin Cobweb. that enables you to create a HTML page where you can integrate your X3D scene. Cobweb is an easy to use JavaScript applet that uses WebGL and the HTML canvas element to display X3D content.

How to create a Cobweb HTML page

To display your X3D scene in a HTML page first save your scene as X3D XML Encoded file, i.e. create a file with the extension *.x3d.

The HTML page is quite easy to create, the HTML code below shows you the minimum requirements. The X3D scene is integrated into the HTML with the new X3D tag.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/create3000/cobweb/master/stable/1/1.22/cobweb.css"/>
      <script type="text/javascript" src="https://cdn.rawgit.com/create3000/cobweb/master/stable/1/1.22/cobweb.min.js"></script>
   <style>
X3D {
   width: 768px;
   height: 432px;
}

   </style>
  
</head>
   <body>
      <X3D url='  "dragon.x3d '>
         <p>Your browser may not support all features required by Cobweb!</p>
      </X3D>
   </body>
</html>

Here in this example the file »dragon.x3d« will be shown in the browser in fullscreen mode. Change the url field of the X3D tag to your own file.

 

Live example


The dragon above here on this page is included with a »iframe« tag. Additionally the viewpoint is animated using interpolators.