如何在 A-Frame 中使用检查点控件?

2024-01-08

我是 A 型框架的新手,仍在努力弄清楚一切!我目前正在构建一个 3D 空间,并希望通过在地板上提供点供游客点击并传送到该位置来为游客创建引导体验。我发现这段代码 https://codepen.io/shaunix/pen/bgBbMj?editors=1000在线这是完美的,但我无法让它工作。 这是我的 Glitch 项目的链接:https://glitch.com/~museum-exhibit-demo https://glitch.com/~museum-exhibit-demo

这是我的相机的代码:

<a-entity position="1.8 -1.1 3" rotation="0 90 0" id="pov">
        <a-camera universal-controls="movementControls: checkpoint" checkpoint-controls="mode: animate">
      <a-entity cursor position="0 0 -1" geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.015;" material="color: #CCC; shader: flat;"> </a-entity>
          </a-camera>
    </a-entity>

这是气缸的代码:

<a-cylinder checkpoint radius="0.1.5" height="0.01" position="-0.164 0.111 2.363"  color="#39BB82"></a-cylinder>

谁能发现我哪里出错了?


UPDATE:

我刚刚阅读了当前的来源额外的框架 https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.js似乎什么都没有损坏!事实上,新版本中存在向后不兼容的更改。而不是旧语法:

通用控制=“运动控制:检查点;”

现在应该使用这个新语法:

运动控制=“控制:检查点;”

但请记住,自从版本3.2.7 https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v3.2.7/dist/aframe-extras.js, the 运动偏移 https://github.com/n5ro/aframe-extras/blob/afcebe83edfe9bcbda0dcf055ff399f34d8f2a5f/src/controls/checkpoint-controls.js#L83是在所有 3 个 XYZ 轴上计算的,因此相机将移动到检查点的中心。如果你想保留高度(y),那么只需在上面添加下面的代码line 83 https://github.com/n5ro/aframe-extras/blob/afcebe83edfe9bcbda0dcf055ff399f34d8f2a5f/src/controls/checkpoint-controls.js#L83:

目标位置.y = 位置.y;

这是一个完整的工作示例:

<html>
  <head>
    <meta charset="utf-8">
    <title>Checkpoint Control with AFrame 1.2.0</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected] /cdn-cgi/l/email-protection/dist/aframe-extras.min.js"></script>
  </head>
  <body>
    <a-scene stats>

      <!-- CAMERA -->
      <a-entity position="0 0 0" id="pov">
        <a-camera camera="active: true; spectator: false;" look-controls="pointerLockEnabled:true" movement-controls="controls: checkpoint;" checkpoint-controls="mode: animate; animateSpeed: 10" wasd-controls="enabled: false;" position="0 1.6 22">
          <a-cursor></a-cursor>
        </a-camera>
      </a-entity>

      <!-- CHECKPOINTS -->
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 20" color="#FF0000"></a-cylinder>
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 16" color="#FF0000"></a-cylinder>
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 12" color="#FF0000"></a-cylinder>
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 8" color="#FF0000"></a-cylinder>

    </a-scene>
  </body>
</html>

该行下面的信息是not不再有效。


正如 Piotr 已经提到的,新版本的 Aframe-Extra 不知何故被破坏了! 使用旧版本一切都会恢复正常。

以下是 Aframe-extra 版本 3.2.7 的工作示例。

页面完全加载后,单击屏幕以锁定光标,然后将光标(小环)指向红色圆圈并单击。

我还指出了一些额外的选项,以防万一:

  • 观众:false (第一人称视角和第三人称视角切换)
  • 指针锁启用:true (隐藏鼠标)
  • mode: animate (另一个选项是传送)
  • 动画速度:10 (嗯...调整动画速度)
  • wasd-controls=“启用:false;" (否则用户可以通过 WASD/箭头键移动)

Code:

<html>
  <head>
    <meta charset="utf-8">
    <title>Checkpoint Control with AFrame 1.2.0</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected] /cdn-cgi/l/email-protection/dist/aframe-extras.min.js"></script>
  </head>
  <body>
    <a-scene stats>

      <!-- CAMERA -->
      <a-entity position="0 0 0" id="pov">
        <a-camera camera="active: true; spectator: false;" look-controls="pointerLockEnabled:true" universal-controls="movementControls: checkpoint;" checkpoint-controls="mode: animate; animateSpeed: 10" wasd-controls="enabled: false;" position="0 1.6 22">
          <a-cursor></a-cursor>
        </a-camera>
      </a-entity>

      <!-- CHECKPOINTS -->
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 20" color="#FF0000"></a-cylinder>
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 16" color="#FF0000"></a-cylinder>
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 12" color="#FF0000"></a-cylinder>
      <a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 8" color="#FF0000"></a-cylinder>

    </a-scene>
  </body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 A-Frame 中使用检查点控件? 的相关文章

  • 如何动态更改 GLTF 模型的纹理?

    在我的场景中 我加载了一个 gltf 模型 它渲染得很好 它有一个 png 纹理 渲染在 3D 模型的表面上 是否可以通过编程方式交换纹理 我正在使用 aframe a asset item 和 a entity 来加载 gltf 资产 O
  • A-Frame .obj 模型显示但已损坏

    这里是框架的初学者 已经完成了教程场景 现在正在设置我的第一个使用 obj 模型 使用远程服务器 感觉这是重要的信息 我看到过有关模型未显示的问题 但我的模型显示已损坏 我不知道从哪里开始修复它 This is how it looks i
  • 如何从 aframe 中的 3D 对象获取边界框信息?

    我正在开发一个 aframe 项目 该项目涉及将未知大小的 3D 对象加载到我的场景中 当然 在将对象放入场景之前 我希望将其大小调整到一定的大小 例如固定高度 但是如何从对象的边界框中提取宽度 高度和深度等信息呢 您需要在此处使用 A F
  • AFRAME 屏幕到世界位置

    我正在尝试通过 Aframe 将鼠标位置转换为三中的世界坐标 使用类似的东西 let mouse new three Vector2 let camera document querySelector camera let rect doc
  • 编写 A 型框架的测试规范

    我对 VR 完全陌生 正在 AFrame 中为一个班级项目开发 VR 太空射击游戏 想知道 AFrame 中是否有 TDD 的任何文档 标准 有人能指出我正确的方向吗 几乎完全使用 A 框架组件构建您的应用程序 https aframe i
  • 设置带有 a-frame 的加载动画

    我正在使用框架加载全景照片 示例代码如下 加载照片时会显示白屏 并持续几秒钟 这会造成糟糕的用户体验 我想在加载照片时添加加载动画 但找不到任何有用的指南 有人可以帮忙吗
  • 使用帧检测标记的增强现实视频播放

    我想在使用网络摄像头检测到标记 HIRO 时播放视频 当我删除它时 它应该暂停 当检测到标记时 视频应该使用 A 框架播放 我已经编写了代码 但它不起作用 谁能帮我 我尝试了所有可能的方法 但它不起作用 所以任何人都可以发布代码或发送示例
  • Networked-aframe 为新用户分配不同的位置

    我在使用 networked aframe 设置的多人 A Frame 环境中遇到问题 我希望连接的前三个用户有不同的生成位置 并且任何其他用户在第三个位置生成 但我无法让它工作 这是我到目前为止在 Html 中所拥有的内容
  • 如何将 JSON 数据加载到 A-Frame 组件中?

    将自定义 JSON 文件作为数据加载到 A 框架组件中的最佳方法是什么 例如 JSON 文件可能包含点的坐标 我想将文件作为资产加载并在组件中使用解析后的 json 对象 coordinates x 0 y 1 z 2 You can 在架
  • 如何传递对 aframe 组件的引用?

    我正在编写一个自定义 aframe 组件来渲染基于很长的对象数组的网格 Aframe 文档仅将数组列为输入类型 您可以在其中传递属性 它将被解析为数组attributename 1 2 3 我想从外部将 JavaScript 引用传递到组件
  • 如何管理A-Frame使用的内存?

    我正在构建一个 Web 应用程序 它将 360 度图像加载到天空基元中 我在用着aframe react 总共有20 张360度的图片 只有一张img里面的资产a assets 一旦用户切换场景反应就会改变src资产的img并且场景将重新渲
  • 如何使用角度参数指定框架对象的位置?

    我试图使用角度 版本 4 组件中设置的值来指定 aframe 对象的位置
  • a-frame vr如何拖放资产/元素洞察图片?

    我正在尝试框架 但找不到任何有关如何拖放元素的信息 并且已经寻找了几个小时 有人熟悉a frame吗 谢谢 到目前为止 这就是我的代码
  • 带有 envmap 的 Aframe gltf-model 演示

    在aframe中加载GLTF 模型非常方便 但没有发现包含envmap纹理的案例 我希望官方能提供与三位官方相同的案例 pmremGenerator fromEquirectangular texture 函数用于使gltf模型产生真实的反
  • 如何使用 onmouseover 事件控制 aframe 中的 .gtlf2 网格动画?

    我正在尝试控制 开始 停止 鼠标悬停时的 gtlf 动画 我找到了一个很好的例子 但它依赖于 json 格式的模型 例子 https rexraptor08 github io animation controls https rexrap
  • 支持 WebVR,但突然找不到 VRDisplays

    当我使用 A frame 开发 webVr 内容时 web vr 可能使用夜间浏览器 由 firefox 提供支持 与 oculus rift 一起工作 然后 1 天后我重新启动计算机 然后在夜间浏览器中无法使用 Web VR 体验 由我或
  • 将 A 框架与 Three.js 相结合

    我想知道 是否可以将 Three js 元素添加到 A 框架场景中 假设 A frame 是基于 Three js 构建的 并且 three Version 0 74 0 登录到你的控制台这不应该是一件奇怪的事情 对吧 我在我的 A 框架场
  • A-Frame:如何在 _blank 页面中打开动态创建的 a-link

    这是 A 型框架特有的 我正在从 javascript 代码创建一个 a link var alinkEl document createElement a link alinkEl setAttribute href http www f
  • 无法分配给对象“#”的只读属性“detachedCallback”

    我安装了A Frame https github com aframevr aframe by npm install aframe save 当我使用时 import aframe or use require aframe import
  • 如何在 A-Frame 中从内存中释放纹理?

    我想知道如何从特定场景中不再需要的资源中释放内存 目前 在场景中卸载资源后 我们的资源纹理仍保留在内存中

随机推荐