如何在X3D中显示坐标轴，使坐标轴始终位于视野的左下角？

问题描述 投票：0回答：1

我有一个 X3D 场景，我想在其中显示坐标轴，如本例所示：CooperativeAxesIndex 然而，我的场景相当大，我希望坐标轴始终在左下角可见，具有固定的大小，即使视点围绕大模型移动（在链接的示例中，ace 只是在原点和如果我移动相机，它们就会离开视野）。我可以考虑采取两种方法来做到这一点，但我都无法工作：

  1. 有第二个场景，我在其中显示 xyz 箭头。在该场景中，使相机与原点保持固定距离，但与主场景中相机的方向耦合。
  2. 随相机移动 xyz 箭头，使其始终与相机保持固定距离，并位于视野的左下角。 （这是首选解决方案，因为它不需要第二个场景，这对我有利，因为稍后它将如何嵌入到网站中。）

我的理解是，原则上，我可以使用 

ROUTE
节点做到这一点，但我一直无法使其工作。这是一种尝试（简化，仅显示 xyz 箭头之一和单个框）：

<html>

<head>
    <title>My first X3DOM page</title>
    <script type='text/javascript' src='http://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>

如果我围绕视图移动，我会看到视点的位置发生变化，但箭头的位置没有变化（在这个简单的示例中，我预计箭头会移动，使视点位于圆柱体内部。在实践中，一旦它起作用，我可以使用另一个变换节点来获取偏移量，以便使箭头位于相机前面，而不是围绕相机），所以显然 

ROUTE
不起作用。

我做错了什么？ 或者是否有另一种更简单的方法来始终在视图的左下角显示坐标轴？

x3d
1个回答
0
投票

我尝试使用 

Route
标签解决同样的问题，但我也无法弄清楚。根据 Chat GPT 的建议，我最终提出了这个解决方案，它使用 javascript 创建一个事件处理程序，侦听坐标区视口中的更改，然后根据框的视口更新坐标区视口的方向和位置。

您可以通过添加 

NavigationInfo
标签来防止用户单独操作轴场景，我也这样做了。

MWE：

<html>

<head>
  <script type='text/javascript' src='https://www.x3dom.org/download/x3dom.js'></script>
  <link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'>
  </link>
  <style>
    .mainScene {
      height: 300px;
      width: 300px;
      margin-left: 80px;
      margin-top: 80px;
    }

    .axesScene {
      height: 200px;
      width: 200px;
    }
  </style>
</head>

<body>
  <x3d class="mainScene">
    <scene>
      <viewpoint id="cubeViewpoint" position="0 0 5"></viewpoint>
      <shape>
        <appearance>
          <material diffuseColor="0.7 0.7 0.7"></material>
        </appearance>
        <box></box>
      </shape>
    </scene>
  </x3d>

  <x3d class="axesScene">
    <scene>
      <navigationinfo explorationmode="none"></navigationinfo>
      <viewpoint id="axesViewpoint" position="0 0 5"></viewpoint>
      <transform rotation="0 0 1 1.5708" translation="0.5 0 0">
        <!-- X Axis in Red -->
        <shape>
          <appearance>
            <material diffusecolor="1 0 0"></material>
          </appearance>
          <cylinder height="1" radius="0.035"></cylinder>
        </shape>
      </transform>
      <transform rotation="0 1 0 1.5708" translation="0 0.5 0">
        <!-- Y Axis in Green -->
        <shape>
          <appearance>
            <material diffusecolor="0 1 0"></material>
          </appearance>
          <cylinder height="1" radius="0.035"></cylinder>
        </shape>
      </transform>
      <transform rotation="1 0 0 1.5708" translation="0 0 0.5">
        <!-- Z Axis in Blue -->
        <shape>
          <appearance>
            <material diffusecolor="0 0 1"></material>
          </appearance>
          <cylinder height="1" radius="0.035"></cylinder>
        </shape>
      </transform>
    </scene>
  </x3d>
  <script>
    cubeVP = document.getElementById("cubeViewpoint");
    axesVP = document.getElementById("axesViewpoint");

    cubeVP.onviewpointChanged = function(event) {
      axesVP.orientation = event.orientation;
      axesVP.position = event.position;
    }
  </script>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.