Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
treesconifer.html 4.58 KB
Newer Older
Athanasios's avatar
Add missing tutorials  
Athanasios committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 
<html>

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

<body>
  <h1> Trees Conifer </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 3 0'>
                <Transform id="crown-s" scale='1 3.5 1'>
                  <Shape>
                    <Appearance>
                      <Material diffuseColor='0 1 0'></Material>
                    </Appearance>
                    <Cone id="geometryCrown" height="1.0" radius="2.0" subdivision="8"></Cone>
                  </Shape>
                </Transform>
              </Transform>
            </transform>
          </Scene>
        </X3D>
      </td>
      <td width="50%" align="left" valign="top" scope="col">
        <img src="img/Abb-Nadelbaum.png" alt="Abb-Nadelbaum" width="259" height="399"
          class="alignnone size-full wp-image-260" /><br>
Mandic's avatar
Update treesconifer.html - translated to english    
Mandic committed
44
45
46
47
48 
        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>
Athanasios's avatar
Add missing tutorials  
Athanasios committed
49
50
51
52
53 
        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>
Mandic's avatar
Update treesconifer.html - translated to english    
Mandic committed
54 
          Approximation trunk</b><br>
Athanasios's avatar
Add missing tutorials  
Athanasios committed
55
56 
        subdivision: 4 <input type="range" id="subdivTrunk" min="4" max="64" step="1" value="32"
          onchange="changeSubDivisionTrunk()" />64<br>
Mandic's avatar
Update treesconifer.html - translated to english    
Mandic committed
57 
        <b>Approximation crone</b><br>
Athanasios's avatar
Add missing tutorials  
Athanasios committed
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109 
        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 " + ht + " 0");
      scaleCrown.setAttribute("scale", "1 " + (h - ht) / 2 + " 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 changeSubDivisionCrown() {
      var crown = document.getElementById("geometryCrown");
      var subdiv = document.getElementById("subdivCrown").value;
      crown.setAttribute("subdivision", subdiv);
    }
  </script>
</body>
Mandic's avatar
Update treesconifer.html - translated to english    
Mandic committed
110 
</html>

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal