<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<p>I'm trying to put a reference coordinate system (x, y, z) arrows
onto my scene, such that they are always visible at e.g. the
bottom left corner.</p>
<p>I found
<a class="moz-txt-link-freetext" href="https://www.web3d.org/x3d/content/examples/Basic/DistributedInteractiveSimulation/CoordinateAxesX3dDISIndex.html">https://www.web3d.org/x3d/content/examples/Basic/DistributedInteractiveSimulation/CoordinateAxesX3dDISIndex.html</a>
which makes the x,y,z arrows and then it promises "<font size="+1">See
CoordinateAxesExample for use as an Inline coordinate-system
reference frame.". That seems to be pretty close to what I'm
looking for. Unfortunately, I can't locate the CoordinateAxis
example; it's not in the list of examples for this chapter
(<a class="moz-txt-link-freetext" href="https://www.web3d.org/x3d/content/examples/Basic/DistributedInteractiveSimulation/index.html">https://www.web3d.org/x3d/content/examples/Basic/DistributedInteractiveSimulation/index.html</a>).</font></p>
<p><font size="+1">Can you point me to that example or a different
setup that might give me what I need?</font></p>
<p><font size="+1"><br>
</font></p>
<p><font size="+1">The closest I've found is the ViewFrustrum
example, as in "features get moved relative to the viewpoint"
but in that case, the coordinates of the lines are re-calculated
at every step, while my case seems simpler and I'm hoping that
it can done with just ROUTE to set the origin of a TRANSFORM
node, which contains the x,y,z arrows, relative to the viewpoint
coordinates. However, I've not been able to figure that out yet
- maybe I'm not connecting to the right properties (see code
example below). </font>I see the arrow, but it's not moving
when I'm moving the camera, so it's going out of view when I look
elsewhere. Instead, I would have expected it to always sit right
on top of the camera. (In the end, I obviously want it to be at
some constant distance from the camera, but if I can't figure out
how to connect the location of the arrow to the location of the
camera at all, then I don't have to worry about those details
yet.)</p>
<p>Thanks for any advice,<br>
</p>
<p>Moritz<br>
</p>
<div
style="color: #3b3b3b;background-color: #ffffff;font-family: Menlo, Monaco, 'Courier New', monospace;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;"><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Transform</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">translation</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'-2 0 0'</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">DEF</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">"arrow"</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Collision</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">DEF</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'DoNotCollideWithVisualizationWidget'</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Group</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #008000;"><!-- Vertical Y arrow and label --></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Group</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">DEF</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'ArrowGreen'</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Shape</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Appearance</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">DEF</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'Green'</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Material</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">diffuseColor</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'0 1 0'</span><span
style="color: #800000;">></</span><span
style="color: #cd3131;">material</span><span style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"></</span><span style="color: #cd3131;">Appearance</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Cylinder</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">DEF</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'ArrowCylinder'</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">radius</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'.025'</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">top</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'false'</span><span
style="color: #800000;"> /></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"></</span><span style="color: #cd3131;">Shape</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Transform</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">translation</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'0 1 0'</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Shape</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Cone</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">DEF</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'ArrowCone'</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">bottomRadius</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'.05'</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">height</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'.1'</span><span
style="color: #800000;"> /></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Appearance</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">USE</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'Green'</span><span
style="color: #800000;"> /></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"></</span><span style="color: #cd3131;">Shape</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"></</span><span style="color: #cd3131;">Transform</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"></</span><span style="color: #cd3131;">Group</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"></</span><span style="color: #cd3131;">Group</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"></</span><span style="color: #cd3131;">Collision</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"></</span><span style="color: #cd3131;">Transform</span><span
style="color: #800000;">></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">Viewpoint</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">description</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'Overview'</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">orientation</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'0 1 0 3.141592653589793'</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">position</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'5 5 0'</span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #e50000;">viewAll</span><span style="color: #3b3b3b;">=</span><span
style="color: #0000ff;">'true'</span><span style="color: #3b3b3b;"> </span><span
style="color: #e50000;">DEF</span><span style="color: #3b3b3b;">=</span><span
style="color: #0000ff;">'viewall'</span><span
style="color: #800000;"> /></span></div><div><span
style="color: #3b3b3b;"> </span><span
style="color: #800000;"><</span><span style="color: #cd3131;">ROUTE</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">fromNode</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'viewall'</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">fromField</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'position'</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">toNode</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'arrow'</span><span
style="color: #3b3b3b;"> </span><span style="color: #e50000;">toField</span><span
style="color: #3b3b3b;">=</span><span style="color: #0000ff;">'translation'</span><span
style="color: #800000;"> /></span></div></div>
<p></p>
</body>
</html>