1

It might sound stupid question but I am looking a way to give ID to each side of x3dom object, lets say cube so that i can create different attributes for each individual face. The only method that I have seen so far is "def" function. It would be really helpful if anyone can provide a simple sample for a cube. Thanking you in advance.

user1879084
  • 41
  • 4

1 Answers1

0

def is for defining a shape for reuse you can def an object and then reuse it in a scene. useful for say making a forest of similar trees. an example on x3dom site is here just take a look at the source.

http://x3dom.org/x3dom/example/x3dom_defUse.xhtml

if you are using just a x3d Box defining every side isnt possible as its a primitive shape, def or id on the box wouldnt be able to effect a single face

if you used indexed triangle sets each one of them could be assigned an id that way

more on them here

http://x3dgraphics.com/examples/X3dForWebAuthors/Chapter13-GeometryTrianglesQuadrilaterals/_pages/page03.html

for how to use css ids

http://x3dom.org/docs/dev/tutorial/styling.html

here is a simple example using both the getelement by tag and by id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://x3dom.org/x3dom/example/x3dom.css"></link>
<script type="text/javascript" src = "http://x3dom.org/x3dom/example/x3dom.js"></script>
</head>
<body>
<X3D width="500px" height="400px" showLog='true' showStat="true">
<Scene DEF='scene' >
<Shape >
<Box onclick="toggleRendering();" onmouseover="toggleRendering2();" onmouseout="toggleRendering3();" />        
<Appearance><Material id="themat" diffuseColor='0 1 0' /></Appearance>
</Shape>
</Scene>
</X3D>
<script>
var flag = true;

function toggleRendering()
{
flag = !flag;

var aMat = document.getElementById("themat");

if (flag) aMat.diffuseColor = "1 0 0";
else aMat.diffuseColor = "0 0 1";

return false;
}

function toggleRendering2()
{
var mat = document.getElementsByTagName("Material");
var aMat = mat[0];

aMat.diffuseColor = "1 1 1";

return false;
}

function toggleRendering3()
{
var mat = document.getElementsByTagName("Material");
var aMat = mat[0];

aMat.diffuseColor = "0 0 0";

return false;
}
</script>

</body>
</html>
drfrog
  • 347
  • 2
  • 9
  • the example code does not work. The color does not change because x3dom does change the attribute (diffusecolor) but not update the scene. – daniel Oct 04 '13 at 16:18