我正在使用一些代码在 A 帧中获取多个动画，但出于某种原因，我的动画没有运行。只要我运行动画的一个单独代码片段，它就会运行良好，但是一旦我运行整个程序，它就不会运行。有谁知道我将如何解决这个问题？这是我的代码：
<!DOCTYPE html>
<html>
<head>
<script src="//aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v5.0.0/dist/aframe-extras.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v3.3.0/dist/aframe-physics-system.min.js"></script>
<script>
const EPS = 0.000001;
AFRAME.registerComponent('kinema-body', {
dependencies: ['velocity'],
/*******************************************************************
* Schema
*/
schema: {
mass: { default: 5 },
radius: { default: 1.3 },
linearDamping: { default: 0.05 },
enableSlopes: { default: true },
enableJumps: { default: false },
},
init: function () {
this.system = this.el.sceneEl.systems.physics;
this.system.addComponent(this);
const el = this.el,
data = this.data,
position = (new CANNON.Vec3()).copy(el.object3D.getWorldPosition(new THREE.Vector3()));
this.body = new CANNON.Body({
material: this.system.getMaterial('staticMaterial'),
position: position,
mass: data.mass,
linearDamping: data.linearDamping,
fixedRotation: true
});
this.body.addShape(
new CANNON.Sphere(data.radius),
new CANNON.Vec3(0, data.radius, 0)
);
this.body.el = this.el;
this.el.body = this.body;
this.system.addBody(this.body);
if (el.hasAttribute('wasd-controls')) {
console.warn('[kinema-body] Not compatible with wasd-controls, use movement-controls.');
}
},
remove: function () {
this.system.removeBody(this.body);
this.system.removeComponent(this);
delete this.el.body;
},
beforeStep: function (t, dt) {
if (!dt) return;
const el = this.el;
const data = this.data
const body = this.body;
if (!data.enableJumps) body.velocity.set(0, 0, 0);
body.position.copy(el.getAttribute('position'));
},
step: (function () {
const velocity = new THREE.Vector3(),
normalizedVelocity = new THREE.Vector3(),
currentSurfaceNormal = new THREE.Vector3(),
groundNormal = new THREE.Vector3();
return function (t, dt) {
if (!dt) return;
let body = this.body,
data = this.data,
didCollide = false,
height, groundHeight = -Infinity,
groundBody,
contacts = this.system.getContacts();
dt = Math.min(dt, this.system.data.maxInterval * 1000);
groundNormal.set(0, 0, 0);
velocity.copy(this.el.getAttribute('velocity'));
body.velocity.copy(velocity);
for (var i = 0, contact; contact = contacts[i]; i++) {
if (!contact.enabled) { continue; }
if (body.id === contact.bi.id) {
contact.ni.negate(currentSurfaceNormal);
} else if (body.id === contact.bj.id) {
currentSurfaceNormal.copy(contact.ni);
} else {
continue;
}
didCollide = body.velocity.dot(currentSurfaceNormal) < -EPS;
if (didCollide && currentSurfaceNormal.y <= 0.5) {
velocity.projectOnPlane(currentSurfaceNormal);
} else if (currentSurfaceNormal.y > 0.5) {
height = body.id === contact.bi.id
? Math.abs(contact.rj.y + contact.bj.position.y)
: Math.abs(contact.ri.y + contact.bi.position.y);
if (height > groundHeight) {
groundHeight = height;
groundNormal.copy(currentSurfaceNormal);
groundBody = body.id === contact.bi.id ? contact.bj : contact.bi;
}
}
}
normalizedVelocity.copy(velocity).normalize();
if (groundBody && (!data.enableJumps || normalizedVelocity.y < 0.5)) {
if (!data.enableSlopes) {
groundNormal.set(0, 1, 0);
} else if (groundNormal.y < 1 - EPS) {
groundNormal.copy(this.raycastToGround(groundBody, groundNormal));
}
velocity.projectOnPlane(groundNormal);
} else if (this.system.driver.world) {
velocity.add(this.system.driver.world.gravity.scale(dt * 4.0 / 1000));
}
body.velocity.copy(velocity);
this.el.setAttribute('velocity', body.velocity);
this.el.setAttribute('position', body.position);
};
}()),
raycastToGround: function (groundBody, groundNormal) {
let ray,
hitNormal,
vFrom = this.body.position,
vTo = this.body.position.clone();
ray = new CANNON.Ray(vFrom, vTo);
ray._updateDirection(); // TODO - Report bug.
ray.intersectBody(groundBody);
if (!ray.hasHit) return groundNormal;
// Compare ABS, in case we're projecting against the inside of the face.
hitNormal = ray.result.hitNormalWorld;
return Math.abs(hitNormal.y) > Math.abs(groundNormal.y) ? hitNormal : groundNormal;
}
});
</script>
<body>
<a-scene>
<a-entity kinema-body="radius: 0.8" movement-controls="fly: false" position="0 0.1 0" look-controls>
<a-entity camera position="0 1.6 0" > <a-cursor></a-cursor>
</a-entity>
</a-entity>
<a-plane static-body position="0 -.5 0" rotation="-90 0 0" width="800" height="1400" color="green"></a-plane>
<a-sky color="#4FC3F7"></a-sky>
<!--Stone staring spot-->
<!-- ASSETS -->
<!-- CAMERA -->
<a-sky id="bg" radius="100" src="https://cdn.aframe.io/a-painter/images/sky.jpg" theta-length="90"></a-sky>
<a-cylinder static-body id="ground" src="https://cdn.aframe.io/a-painter/images/floor.jpg" radius="6t2" height="0.1" position="0 0.2 0"></a-cylinder>
<a-sphere
color="red"
animation__position1="
property: position;
from: 0 0 0;
to: 0 0 -5;
dur: 5000;
easing: linear;
autoplay: true;"
animation__position2="
property: position;
from: 0 0 -5;
to: 5 0 -5;
dur: 5000;
easing: linear;
startEvents: animationcomplete__position1">
</a-sphere>
</a-scene>
</body>
</html>
</a-a-gltf-model>
有人知道我该如何解决这个问题吗？