I have an X3D scene, and I want to display coordinate axis in there, like in this example: https://x3dgraphics.com/examples/X3dForWebAuthors/Chapter03Grouping/CoordinateAxesIndex.html
However, my scene is quite big, and I want the coordinate axes to always be visible in the bottom left with a fixed size even as the viewpoint is moved around the big model (in the linked example, the aces are simply at the origin and if I move the camera around, they get out of the field of view). I can think go two ways of doing that, and I could get neither to work:
- Have a second scene where I display the xyz arrows. In that scene, keep the camera at the fixed distance from the origin, but couple to the orientation to the camera in the main scene.
- Move the xyz arrows with the camera, such that they are always at a fixed distance from the camera and located in the bottom left of the field of view. (This is the preferred solution because it does not require a second scene, which is beneficial for me due to how it’s going to be embedded in a website later.)
My understanding is that in principle, I can do that with the ROUTE node, but I have not been able to make it work. Here is one attempt (simplified, just showing one of the xyz arrows and a single box):
<html>
<head>
<title>My first X3DOM page</title>
<script type='text/javascript' src='https://www.x3dom.org/download/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'>
</link>
</head>
<body>
<x3d width='600px' height='400px'>
<scene>
<shape>
<appearance>
<material diffuseColor='1 0 0'></material>
</appearance>
<box></box>
</shape>
<Transform translation='-2 0 0' DEF="arrow">
<Collision DEF='DoNotCollideWithVisualizationWidget'>
<Group>
<!-- Vertical Y arrow and label -->
<Group DEF='ArrowGreen'>
<Shape>
<Appearance DEF='Green'>
<Material diffuseColor='0 1 0'></material>
</Appearance>
<Cylinder DEF='ArrowCylinder' radius='.025' top='false' />
</Shape>
<Transform translation='0 1 0'>
<Shape>
<Cone DEF='ArrowCone' bottomRadius='.05' height='.1' />
<Appearance USE='Green' />
</Shape>
</Transform>
</Group>
<Transform translation='0 1.08 0'>
<Billboard>
<Shape>
<Appearance DEF='LABEL_APPEARANCE'>
<Material diffuseColor='1 1 .3' emissiveColor='.33 .33 .1' />
</Appearance>
<Text string='"Y"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2' />
</Text>
</Shape>
</Billboard>
</Transform>
</Group>
</Collision>
</Transform>
<Viewpoint description='Overview' orientation='0 1 0 3.141592653589793' position='5 5 0'
viewAll='true' DEF='viewall' />
<ROUTE fromNode='viewall' fromField='position' toNode='arrow' toField='translation' />
</scene>
</x3d>
</body>
</html>
If I move around the view, I see that the position of the viewpoint changes, but the position of the arrow does not (in this simple example, I had expected the arrow to move such the viewpoint is inside the cylinder. In practice, I could use another transform node to get an offset from that once this works so make the arrow be in front of, not around the camera), so apparently the ROUTE does not work.
What am I doing wrong?
Or is there another, easier way to show the coordinate axes always in the bottom left of the view?