addnode.html

<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);