treesdeciduous.html

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title> Trees Deciduous </title>
  <link rel="stylesheet" type="text/css" href="x3dom.css">
  </link>
</head>

<body>
  <h1> Trees Deciduous </h1>
  <table width="100%" height="85%" border="0">
    <tr>
      <td width="50%" align="center" valign="top" scope="col">
        <X3D id="shapedata" width="600px" height="600px">
          <Scene>
            <background transparency='0' skyColor='1 1 1'> </background>
            <transform id="root" translation="0 0 0">
              <Transform id="trunk" translation='0 1.5 0'>
                <Shape>
                  <Appearance>
                    <Material diffuseColor='0.5 0.5 0.5'></Material>
                  </Appearance>
                  <Cylinder id="geometryTrunk" radius="0.2" height="3"></Cylinder>
                </Shape>
              </Transform>
              <Transform id="crown" translation='0 6.5 0'>
                <Transform id="crown-s" scale='1 1.75 1'>
                  <Shape>
                    <Appearance>
                      <Material diffuseColor='0 1 0'></Material>
                    </Appearance>
                    <Sphere id="geometryCrown" radius="2.0" subdivision="8,8"></Sphere>
                  </Shape>
                </Transform>
              </Transform>
            </transform>
          </Scene>
        </X3D>
      </td>
      <td width="50%" align="left" valign="top" scope="col">
        <img src="img/Abb-Laubbaum.png" alt="Abb-Laubbaum" width="259" height="398"
          class="alignnone size-full wp-image-252" /><br>
        Tree parameter:<br>
        Total height h= <input type="text" id="h" name="h" size="5" value="10" /> m<br>
        Height trunk ht= <input type="text" id="ht" name="ht" size="5" value="3" /> m<br>
        Crown diameter dc= <input type="text" id="dc" name="Crown diameter" size="5" value="4" /> m<br>
        Trunk diameter dt=<input type="text" id="dt" name="Trunk diameter" size="5" value="0.4" /> m<br>
        Position:
        <input type="text" id="pos_x" name="pos_x" size="5" value="0" />
        <input type="text" id="pos_y" name="pos_y" size="5" value="0" />
        <input type="text" id="pos_z" name="pos_z" size="5" value="0" /><br>
        <input type="button" value="DrawTree" onclick="drawTree()" /><br>
        <b>Approximation trunk</b><br>
        subdivision: 4 <input type="range" id="subdivTrunk" min="4" max="64" step="1" value="32"
          onchange="changeSubDivisionTrunk()" />64<br>
        <b>Approximation crown</b><br>
        subdivision: 4 <input type="range" id="subdivCrown" min="4" max="64" step="1" value="8"
          onchange="changeSubDivisionCrown()" />64
      </td>
    </tr>
  </table>
  <script type="text/javascript" src="x3dom.js"></script>
  <script type="text/javascript">
    function drawTree() {
      // read input parameter
      var h = document.getElementById("h").value;
      var ht = document.getElementById("ht").value;
      var dc = document.getElementById("dc").value;
      var dt = document.getElementById("dt").value;
      var x = document.getElementById("pos_x").value;
      var y = document.getElementById("pos_y").value;
      var z = document.getElementById("pos_z").value;

      // get X3D nodes
      var transformTree = document.getElementById('root');
      var transformTrunk = document.getElementById('trunk');
      var geometryTrunk = document.getElementById('geometryTrunk');
      var transformCrown = document.getElementById('crown');
      var scaleCrown = document.getElementById('crown-s');
      var geometryCrown = document.getElementById('geometryCrown');

      // map input parameter to X3D model
      // trunk
      transformTrunk.setAttribute("translation", "0 " + ht / 2 + " 0");
      geometryTrunk.setAttribute("radius", " " + dt / 2);
      geometryTrunk.setAttribute("height", ht);
      // crown
      transformCrown.setAttribute("translation", "0 " + (h / 2 + ht / 2) + " 0");
      scaleCrown.setAttribute("scale", "1 " + (h - ht) / dc + " 1");
      geometryCrown.setAttribute("radius", dc / 2);
      // position
      transformTree.setAttribute("translation", x + " " + y + " " + z);
    }

    function changeSubDivisionTrunk() {
      var trunk = document.getElementById("geometryTrunk");
      var subdiv = document.getElementById("subdivTrunk").value;
      trunk.setAttribute("subdivision", subdiv);
    }

    function changeSubDivisionTrunk() {
      var trunk = document.getElementById("geometryTrunk");
      var subdiv = document.getElementById("subdivTrunk").value;
      trunk.setAttribute("subdivision", subdiv);
    }

    function changeSubDivisionCrown() {
      var crown = document.getElementById("geometryCrown");
      var subdiv = document.getElementById("subdivCrown").value;
      crown.setAttribute("subdivision", subdiv + "," + subdiv);
    }
  </script>
</body>

</html>