我是 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(使用前将#替换为@)