如何在A帧中使用检查点控件？
如何在A帧中使用检查点控件？
提问于 2020-03-26 03:46:03
我是A-Frame的新手，仍然在努力弄清楚所有的事情！我目前正在构建一个3D空间，并希望通过在地板上提供点，让他们点击并被运送到那个位置，为游客创造一种有指导的体验。我在网上找到了this code，它很完美，但我不能让它工作。这是我在Glitch上的项目的链接：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>有没有人能发现我哪里错了？
回答 2
Stack Overflow用户
发布于 2020-03-29 20:13:36
这不会回答这个问题，但应该能解决你的问题。
您可以用一个简单的动画系统替换检查点控件：
单击cylinder
- 将摄像机从当前位置移动到cylinder
它可以像这样实现：
// use a system to keep a global track if we are already moving
AFRAME.registerSystem('goto', {
init: function() {
this.isMoving = false
}
})
// this component will have the actual logic
AFRAME.registerComponent('goto', {
init: function() {
let camRig = document.querySelector('#rig')
// upon click - move the camera
this.el.addEventListener('click', e => {
// check if we are already moving
if (this.system.isMoving) return;
// lock other attempts to move
this.system.isMoving = true
// grab the positions
let targetPos = this.el.getAttribute("position")
let rigPos = camRig.getAttribute("position")
// set the animation attributes.
camRig.setAttribute("animation", {
"from": rigPos,
"to": AFRAME.utils.coordinates.stringify({x: targetPos.x, y: rigPos.y, z: targetPos.z}),
"dur": targetPos.distanceTo(rigPos) * 750
})
camRig.emit('go')
})
// when the animation is finished - update the "shared" variable
camRig.addEventListener('animationcomplete', e=> {
this.system.isMoving = false
})
}
})使用这样的设置：
<!-- Camera with locked movement --/>
<a-entity id="rig" animation="property: position; startEvents: go">
<a-camera look-controls wasd-controls-enabled="false"></a-camera>
<a-entity>
<!-- Cylinder node --/>
<a-cylinder goto></a-cylinder>您可以在this glitch中看到它的工作方式。
Stack Overflow用户
发布于 2021-03-24 19:58:05
更新：
我刚刚阅读了aframe-extra的当前源代码，似乎没有什么问题！事实上，在新版本中有一个向后不兼容的变化。而不是旧的语法：
检查点通用控件=“movementControls：
；”
现在应该使用这个新语法：
移动-控制=“控制:检查点；”
但请记住，由于version 3.2.7，movement offset是在所有3个XYZ轴上计算的，因此相机将移动到检查点的中心。如果您想保留高度(y)，那么只需在line 83上添加下面的代码
目标位置.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/aframe-extras@v6.1.1/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>这条线下面的信息是不再有效。
正如Piotr已经提到的，Aframe-Extra的新版本不知何故被破坏了！使用旧版本，一切都将再次正常工作。
下面是一个使用Aframe-extra版本3.2.7的工作示例。
页面完全加载后，单击屏幕锁定光标，然后将光标(小环)指向一个红色圆圈并单击。
我还提到了一些额外的选项，以防万一：
动画观众: teleport)
- animateSpeed: false(在第一和第三人称模式之间切换(隐藏鼠标)
- 模式：动画模式(另一个选项是10<>E230>(好...调整动画speed)
- wasd-controls="enabled：false;“(否则用户可以通过WASD/箭头键移动)
代码：
<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/aframe-extras@v3.2.7/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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60856290
复制相关文章
相似问题
腾讯云开发者
