本文介绍了在 AFrame 中使用按钮移动动态对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时送ChatGPT账号..我以前问过这个问题，但我没有以最好的方式问它.我正在尝试创建一个 plinko 风格的 aframe 世界，其中有一个球，单击时会将其位置重置为起始位置.我想要一个按钮来执行此操作，但单击球会起作用.这是我正在使用的 html:
I have asked this question before but I didn't ask it in the best way. I am trying to create a plinko-style aframe world with a ball that will have it's position reset to the starting position when clicked. I would like to have a button do this but clicking the ball will work. Here is the html I am working with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://unpkg/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.js"></script>
<script src="https://unpkg/aframe-template-component@3.x.x/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg/aframe-layout-component@4.x.x/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg/aframe-event-set-component@5.x.x/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg/aframe-proxy-event-component/dist/aframe-proxy-event-component.min.js"></script>
<script src="https://unpkg/aframe-debug-cursor-component/dist/aframe-debug-cursor-component.min.js"></script>
<script src="//cdn.rawgit/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
<script src="https://cdn.jsdelivr/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<title>Project ssdd</title>
</head>
<body>
<script src="/pball.js"></script>
<a-scene
class="fullscreen"
canvas=""
debug="true"
physics="debug: true"
background="color: #0d0d0d"
cursor="rayOrigin: mouse"
>
<a-entity id="camera" position="0 1.6 0">
<a-entity
id="camera"
look-controls=""
wasd-controls
kinematic-body
foo
velocity="0 0 0"
>
</a-entity>
</a-entity>
<a-entity
geometry="primitive: plane; height: 20; width: 20"
material="color: #009e2f"
static-body=""
rotation="-90 0 0"
></a-entity>
<a-entity
geometry="primitive: plane; height: 7; width: 20"
position="-10 3 0"
material="color: #828282"
velocity=""
static-body="sphereRadius: NaN"
rotation="0 90 0"
></a-entity>
<a-entity
geometry="primitive: plane; height: 7; width: 20"
position="0 3 -10"
material="color: #828282"
velocity=""
static-body="sphereRadius: NaN"
></a-entity>
<a-entity
geometry="primitive: plane; height: 7; width: 20"
position="0 3 10"
material="color: #828282"
velocity=""
static-body="sphereRadius: NaN"
rotation="0 180 0"
></a-entity>
<a-entity
geometry="primitive: plane; height: 7; width: 20"
position="10 3 0"
material="color: #828282"
velocity=""
static-body="sphereRadius: NaN"
rotation="0 -90 0"
></a-entity>
<a-entity></a-entity>
<a-entity
light="color: #ffffff; type: point; angle: 180; intensity: 0.5"
data-aframe-default-light=""
aframe-injected=""
position="0 5 0"
></a-entity>
<a-entity
geometry="primitive: box;"
velocity=""
dynamic-body="sphereRadius: NaN"
position="1 8 1"
rotation="0 0 0"
id="test"
material="color: #ff0000"
foo
></a-entity>
</a-scene>
</body>
</html>
这是我正在使用的 Javascript:
and here is the Javascript that I am working with:
AFRAME.registerComponent('foo', {
events: {
click: function(evt) {
// grab the current position
let pos = this.el.getAttribute("position");
// move upwards
this.el.setAttribute('position', { x: pos.x, y: pos.y + 0.25, z: pos.z });
}
}
});
推荐答案
您需要将物理引擎与更新的位置同步.dynamic-body 组件有一个 syncToPhysics() 函数:
You need to synchronize the physics engine with the updated position. The dynamic-body component has a syncToPhysics() function:
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.min.js"></script>
<script>
AFRAME.registerComponent("foo", {
init: function() {
this.el.addEventListener("click", e => {
// reset position
this.el.setAttribute("position", "0 2 -4")
// sync
this.elponents["dynamic-body"].syncToPhysics();
})
}
})
</script>
<a-scene physics cursor="rayOrigin: mouse">
<a-sphere position="0 1.25 -5" radius="0.25" color="#EF2D5E" dynamic-body foo></a-sphere>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" static-body></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>这篇关于在 AFrame 中使用按钮移动动态对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
更多推荐
[db:关键词]
发布评论