我想避免尝试使用重力，但如果需要的话，也没关系。我正在尝试制作一款类似堆垛机街机游戏的游戏，但在 Aframe 中。我找不到办法将盒子的位置设置得更低。我可能需要使用 Three.js，但我一般不太擅长 JS。
<!DOCTYPE html>
<html>
<head>
<title>Drop the Box</title>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<a-scene physics="gravity:-4.5">
<a-sky color="lightblue"></a-sky>
<a-plane position="0 -10 -10" width="20" height="20" rotation="-90 0 0"></a-plane>
<!-- Camera -->
<a-entity camera look-controls
wasd-controls
position="0 1.6 0"
constraint="collideConnected:true"
static-body
></a-entity>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
<a-box position="-10 0 -10" width="2" height="2" depth="2" color="red"
animation__1="
property:position;
from: -10 0 -10;
to: 10 0 -10;
loop: true;
dur: 2000;
dir: alternate;
pauseEvents: click;
"
animation__2="
property:position;
from: position;
to: position.x y-10 z;
startEvents:click;
"></a-box>
</a-scene>
</body>
</html>
我尝试使用Javascript，但我真的不知道如何开始。
我相信最简单的方法就是在单击时将框设置为动态体。我还更新了您正在使用的库。
<!DOCTYPE html>
<html>
<head>
<title>Drop the Box</title>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/aframe-physics-system.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent("dynamic-onclick", {
init: function () {
var boxEl = this.el;
// listen for the click event
boxEl.addEventListener("click", function () {
boxEl.setAttribute("dynamic-body", "");
});
},
});
</script>
<a-scene physics="debug: true;">
<a-sky color="lightblue"></a-sky>
<!-- Camera -->
<a-entity
camera
look-controls
wasd-controls
position="0 1.6 0"
constraint="collideConnected:true"
static-body
></a-entity>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
<!-- Floor -->
<a-plane
position="0 -10 -10"
width="20"
height="20"
rotation="-90 0 0"
static-body
></a-plane>
<!-- Immovable box -->
<a-box
position="0 0.5 -5"
width="3"
height="3"
depth="3"
color="red"
dynamic-onclick
animation__1="
property:position;
from: -10 0 -10;
to: 10 0 -10;
loop: true;
dur: 2000;
dir: alternate;
pauseEvents: click;"
></a-box>
</a-scene>
</body>
</html>当然还有很多其他方法可以做到这一点，如果你只是想特别堆叠盒子，即使不使用物理学。