<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add/Remove Nodes example</title>
<link rel="stylesheet" type="text/css" href="./x3dom.css">
</head>
<body>
<h1>Add/Remove Nodes Example</h1>
<p>
simple example which shows how to add/remove nodes using a simple DOM appendChild()/removeChild() function
</p>
<x3d id="boxes" showstat="true" x="0px" y="0px" width="600px" height="300px">
<scene render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" pickmode="idBuf" dopickpass="true">
<viewpoint position="4.88104 4.59865 7.4181" orientation="-0.69017 0.723467 -0.0161809 0.735134"
fieldofview="0.785398" centerofrotation="0,0,0" znear="-1" zfar="-1"></viewpoint>
<background def="bgnd" transparency="0" skycolor="1 1 1" groundcolor="" groundangle="" skyangle="" backurl=""
bottomurl="" fronturl="" lefturl="" righturl="" topurl=""></background>
<transform id="root" translation="0 0 0" render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" center="0,0,0"
rotation="0,0,0,0" scale="1,1,1" scaleorientation="0,0,0,0">
<shape render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" ispickable="true">
<appearance sorttype="auto">
<material ambientintensity="0.2" diffusecolor="0.8,0.8,0.8" emissivecolor="0,0,0" shininess="0.2"
specularcolor="0,0,0"></material>
</appearance>
<box solid="true" ccw="true" usegeocache="true" lit="true" size="2,2,2"></box>
</shape>
<transform translation="1.5160652180202305 1.489243873860687 -2.648085524328053"
scale="1.2286848302464932 0.7494203578680754 1.357877661474049" render="true" bboxcenter="0,0,0"
bboxsize="-1,-1,-1" center="0,0,0" rotation="0,0,0,0" scaleorientation="0,0,0,0">
<shape render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" ispickable="true">
<appearance sorttype="auto">
<material ambientintensity="0.2" diffusecolor="0.8,0.8,0.8" emissivecolor="0,0,0" shininess="0.2"
specularcolor="0,0,0"></material>
</appearance>
<box solid="true" ccw="true" usegeocache="true" lit="true" size="2,2,2"></box>
</shape>
</transform>
</transform>
</scene>
<div class="x3dom-progress" style="display: none;"><strong>Loading: 0</strong><span style="width: 25%;"> </span>
</div>
</x3d>
<p>Dynamic childtree update</p>
<input type="button" value="Add Child" onclick="addNode();">
<input type="button" value="Remove Child" onclick="removeNode();">
<script type="text/javascript">
function addNode() {
x = Math.random() * 6 - 3;
y = Math.random() * 6 - 3;
z = Math.random() * 6 - 3;
s0 = Math.random() + 0.5;
s1 = Math.random() + 0.5;
s2 = Math.random() + 0.5;
var t = document.createElement('Transform');
t.setAttribute("translation", x + " " + y + " " + z);
t.setAttribute("scale", s0 + " " + s1 + " " + s2);
var s = document.createElement('Shape');
// Appearance Node
var app = document.createElement('Appearance');
// Material Node
var mat = document.createElement('Material');
app.appendChild(mat);
s.appendChild(app);
t.appendChild(s);
var b = document.createElement('Box');
s.appendChild(b);
var ot = document.getElementById('root');
ot.appendChild(t);
return false;
};
function removeNode() {
var ot = document.getElementById('root');
for (var i = 0; i < ot.childNodes.length; i++) {
// check if we have a real X3DOM Node; not just e.g. a Text-tag
if (ot.childNodes[i].nodeType === Node.ELEMENT_NODE) {
ot.removeChild(ot.childNodes[i]);
break;
}
}
return false;
};
</script>
<script type="text/javascript" src="./x3dom.js"></script>
</body>
</html>