<!DOCTYPE html>
<html>
<head>
<title>Examples • AMMO</title>
<meta name="description" content="Hello, WebVR! - A-Frame" />
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/MozillaReality/ammo.js@8bbc0ea/builds/ammo.wasm.js"></script>
<script src="./js2/aframe-physics-system.js"></script>
<link rel="stylesheet" href="./js2/styles.css">
<script>
AFRAME.registerComponent("bounce", {
init: function() {
this.direction = 1;
this.position = new THREE.Vector3();
this.position.copy(this.el.object3D.position);
setTimeout(() => {
this.ready = true;
}, 3000);
},
tick: function() {
if (!this.ready) return;
var position = this.el.object3D.position.y;
if (position <= 0) {
this.direction = 1;
} else if (position >= 5) {
this.direction = -1;
}
this.el.object3D.position.set(this.position.x, position + 0.05 * this.direction, this.position.z);
}
});
AFRAME.registerComponent("changescale", {
init: function() {
this.direction = 1;
setTimeout(() => {
this.ready = true;
}, 3000);
},
tick: function() {
if (!this.ready) return;
var scale = this.el.object3D.scale;
if (scale.x <= 0.05) {
this.direction = 1;
} else if (scale.x >= 1) {
this.direction = -1;
}
this.el.object3D.scale.set(
scale.x + this.direction * 0.01,
scale.y + this.direction * 0.01,
scale.z + this.direction * 0.01
);
}
});
</script>
</head>
<body>
<div class="text-overlay">
<p>Demonstration of many Ammo driver features in a single example.</p>
<p>The cone is a kinematic object, and the purple box has a constraint attaching it to the cone.</p>
</div>
<a class="code-link"
target="_blank"
href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/ammo/sandbox.html">
view code
</a>
<a-scene physics="driver: ammo; debug: true; gravity: -9.8; debugDrawMode: 1">
<a-camera near="0.001"></a-camera>
<a-box
position="-1 5 -5"
rotation="0 45 0"
color="#4CC3D9"
shadow
ammo-body
ammo-shape="type: box; halfExtents: 0.6 0.6 0.6; fit: manual;"
></a-box>
<a-box
id="target"
position="1 3.75 -4"
rotation="0 45 0"
color="purple"
shadow
ammo-body
ammo-shape="type: box;"
></a-box>
<a-sphere
position="0 10 -10"
radius="1.25"
color="#EF2D5E"
shadow
ammo-body
ammo-shape="type: sphere;"
></a-sphere>
<a-cone
position="-1 3.75 -4"
radius-bottom="1.25"
color="green"
shadow
bounce
ammo-body="type: kinematic; disableCollision: true;"
ammo-shape="type: cone;"
ammo-constraint="target: #target;"
></a-cone>
<a-torus
position="-1 3.75 -7"
radius="1.25"
scale="0.5 0.5 0.5"
color="red"
shadow
ammo-body
ammo-shape="type: capsule; cylinderAxis: z;"
changescale
></a-torus>
<a-torus-knot
position="0 3.75 -5"
radius="1.25"
scale="0.5 0.5 0.5"
color="blue"
shadow
ammo-body
ammo-shape
></a-torus-knot>
<a-cylinder
segments-height="1"
segments-radial="10"
position="1 4.0 -5"
radius="0.5"
height="1.5"
color="#FFC65D"
shadow
ammo-body
ammo-shape="type: cylinder"
></a-cylinder>
<a-plane
position="0 2 -4"
rotation="90 0 0"
width="1"
height="1"
color="#7BC8A4"
shadow
ammo-body="type: static; mass: 0;"
ammo-shape="type: box;"
></a-plane>
<a-torus-knot
position="0 0 -7"
radius="1.25"
scale="5 0.1 5"
rotation="0 90 0"
color="#7BC8A4"
shadow
ammo-body="type: static; mass: 0;"
ammo-shape="type: mesh;"
></a-torus-knot>
<!-- HACD and VHACD are slow
so just include one HACD example -->
<a-torus-knot
position="-2 1.5 -1"
rotation="0 90 90"
scale="0.5 0.5 0.5"
color="red"
shadow
ammo-body
ammo-shape="type: hacd;"
></a-torus-knot>
<!-- <a-torus-knot
position="2 1.5 -1"
rotation="0 90 90"
scale="0.5 0.5 0.5"
color="blue"
shadow
ammo-body
ammo-shape="type: vhacd;"
></a-torus-knot> -->
<a-sky color="#000000"></a-sky>
</a-scene>
</body>
</html>
使用変数
| ) { if -------( Function ) | |
| ) { this.direction = 1; setTimeout -------( Function ) | |
| ) { this.direction = 1; this.position = new THREE.Vector3 -------( Function ) | |
| body | |
| bottom | |
| class | |
| color | |
| constraint | |
| content | |
| direction | |
| height | |
| href | |
| id | |
| name | |
| near | |
| physics | |
| position | |
| radial | |
| radius | |
| ready | |
| rel | |
| rotation | |
| scale | |
| shape | |
| src | |
| target | |
| width |