Future to the fantasy ★ ★
X3D Editor

Cobweb 3.2

WebGL X3D Browser

Something special, something more!


A full standard compliant VRML browser!

XHTML DOM Integration

Andreas Plesch is writing a nice plug-in for HTML DOM integration. This enables JavaScript authors to use X3D content as if it would be HTML. cobweb_dom links the X3D DOM nodes to the X3D scene graph and thereby allows for control of the X3D scene using regular DOM manipulation methods. The »cobweb_dom.js« script must be included after Cobweb, then HTML DOM integration is enabled.


The complete documentation can be found at https://github.com/andreasplesch/cobweb_dom.


How use the Plug-In with Cobweb

The page must be an HTML or XHTML page and saved with the extension .html or .xhtml, additionally the »cobweb_dom.js« script must be included after the Cobweb script, then XHTML DOM integration is available. The »moveHouse« function in the example below demonstrates how to use regular DOM manipulation methods to control the behavior of the X3D content.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
      <title>XHTML DOM access for Cobweb</title>
      <meta charset="utf-8"/>
      <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/create3000/cobweb/master/stable/3/3.2/cobweb.css"/>
      <script type="text/javascript" src="https://cdn.rawgit.com/create3000/cobweb/master/stable/3/3.2/cobweb.min.js"></script>
      <script type="text/javascript" src="https://cdn.rawgit.com/andreasplesch/cobweb_dom/master/release/cobweb_dom.0.8.js"></script>
X3DCanvas {
   width: 768px;
   height: 432px;

       <X3D profile='Full' version='3.2'>
           <Viewpoint position='-2 1 -15' orientation='0 1 0 3.14' description='start'></Viewpoint>
           <NavigationInfo type='"FLY", "ANY"'></NavigationInfo-->
           <Inline DEF="ExampleWorld" url='"https://cdn.rawgit.com/create3000/Library/master/Examples/Mushrooms/index.x3d"' />
Your browser may not support all features required by Cobweb!</p>

      <button onclick="moveHouse ()">HTML Button to Move House</button>

      <script type="text/javascript">
function moveHouse ()
   var RANGE = 5;

      houseTransform = document .querySelector ("[DEF='pilzhaus']"); // Unique DEF inside inlined inlines.
      position       = houseTransform .getAttribute ("translation") .split (" "); // Poor man's parse.
      x              = 1.0 * position [0] + RANGE * (Math .random () - 0.5);
      y              = 1.0 * position [1];
      z              = 1.0 * position [2] + RANGE * (Math .random () - 0.5);

   houseTransform .setAttribute ("translation", x + " " + y + " " + z);