D3 Examples - x3dom in callback test

x3dom in callback test

This document contains two x3dom nodes from the x3dom "Hello World" example. The first instance is created at the top-level document. The second instance is created in a callback, and therefore requires a call to x3dom.reload() to render. (Thanks to windhof@yahoo.com for fixing the original example.)

xxxxxxxxxx
 
<!DOCTYPE html >
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>Hello World</title>
  <script type="text/javascript" src="https://x3dom.org/x3dom/dist/x3dom.js"></script>
  <link rel="stylesheet" type="text/css" href="https://www.x3dom.org/download/dev/x3dom.css"/>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.0.2.js"></script>
</head>
       
<body>
  <h1>Hello Callback</h1>
  <div id="div1" style="width:302px; height:302px; float:left; padding:1px; border:2px solid gray;"></div>
  <div id="div2" style="width:302px; height:302px; float:left; padding:1px; border:2px solid gray;"></div>
  <script>  
  function createX3d(divSelector)
  {
    $(divSelector).append(
      "<x3d width='300px' height='300px'>"
    + "  <scene>"
    + "    <viewpoint position='0 0 10' ></viewpoint>"
    + "      <shape>"
    + "         <appearance>"
    + "           <material diffuseColor='0.603 0.894 0.909' ></material>"
    + "         </appearance>"
    + "         <box DEF='box' ></box>"
    + "      </shape>"
    + "   </scene>"
    + "</x3d>")
  }
  createX3d('#div1')
  setTimeout( function() { createX3d('#div2'); x3dom.reload(); }, 100 );
  </script>
</body>
    