使用 AFrame 中的按钮移动动态 object
[英]Moving a Dynamic object with a button in AFrame
问题描述
我以前问过这个问题，但我没有以最好的方式问这个问题。 我正在尝试用一个球创建一个 plinko 风格的框架世界，当点击它时，它的 position 将重置为起始 position。 我想要一个按钮来执行此操作，但单击球会起作用。 这是我正在使用的 html：
<!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.com/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.js"></script>
<script src="https://unpkg.com/aframe-template-component@3.x.x/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg.com/aframe-layout-component@4.x.x/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@5.x.x/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-proxy-event-component/dist/aframe-proxy-event-component.min.js"></script>
<script src="https://unpkg.com/aframe-debug-cursor-component/dist/aframe-debug-cursor-component.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
<script src="https://cdn.jsdelivr.net/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：
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 });
}
}
});
1 个解决方案
解决方案1
0 已采纳 2021-02-09 08:02:18
您需要将物理引擎与更新的 position 同步。 dynamic-body组件有一个syncToPhysics() function：
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/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.el.components["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 动态 Canvas 作为纹理
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.