<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Physics Sample (with Movement - Final)</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.2.0/dist/aframe-extras.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
<script>
AFRAME.registerComponent('laser-grab', {
init: function () {
this.grabbedEl = null;
this.originalBodyData = {};
this.el.addEventListener('triggerdown', this.onTriggerDown.bind(this));
this.el.addEventListener('triggerup', this.onTriggerUp.bind(this));
},
onTriggerDown: function () {
if (this.grabbedEl) { return; }
const intersectedEls = this.el.components.raycaster.intersectedEls;
if (!intersectedEls.length) { return; }
const targetEl = intersectedEls[0];
if (targetEl.hasAttribute('dynamic-body')) {
this.grabbedEl = targetEl;
this.originalBodyData = this.grabbedEl.getAttribute('dynamic-body');
this.grabbedEl.removeAttribute('dynamic-body');
this.el.object3D.attach(this.grabbedEl.object3D);
}
},
onTriggerUp: function () {
if (!this.grabbedEl) { return; }
const sceneEl = this.el.sceneEl;
sceneEl.object3D.attach(this.grabbedEl.object3D);
// ★ 物理属性を設定する直前に、オブジェクトの回転をリセット
this.grabbedEl.object3D.rotation.set(0, 0, 0);
this.grabbedEl.setAttribute('dynamic-body', this.originalBodyData);
this.grabbedEl = null;
}
});
</script>
</head>
<body>
<a-scene background="color: #25a" physics="debug: true; gravity: -9.8;">
<a-light type="ambient" color="#888"></a-light>
<a-light type="point" intensity="0.5" position="2 4 4"></a-light>
<a-entity id="rig" position="0 0 4" movement-controls="fly: false;">
<a-entity id="camera" camera position="0 1.6 0" look-controls></a-entity>
<a-entity id="left-hand" oculus-touch-controls="hand: left"></a-entity>
<a-entity id="right-hand"
oculus-touch-controls="hand: right"
laser-controls="hand: right"
raycaster="objects: [dynamic-body]"
laser-grab>
</a-entity>
</a-entity>
<a-box id="table"
position="0 0.5 -1"
width="2" height="0.2" depth="1.5"
color="gray"
static-body="shape: box; halfExtents: 1 0.1 0.75;">
</a-box>
<a-box id="falling-box"
position="0 3 -1"
width="0.5" height="0.5" depth="0.5"
color="green"
dynamic-body="shape: box; mass: 2; halfExtents: 0.25 0.25 0.25;">
</a-box>
<a-box id="orange-box" position="0.5 2 -0.5" width="0.4" height="0.4" depth="0.4" color="orange" dynamic-body="shape: box; mass: 2; halfExtents: 0.2 0.2 0.2;"></a-box>
<a-box id="purple-box" position="-0.5 2 -1.5" width="0.3" height="0.3" depth="0.3" color="purple" dynamic-body="shape: box; mass: 2; halfExtents: 0.15 0.15 0.15;"></a-box>
<a-box id="ground"
position="0 -0.05 0"
width="20" height="0.1" depth="20"
color="#484848"
static-body="shape: box; halfExtents: 10 0.05 10;">
</a-box>
</a-scene>
</body>
</html>
使用変数
| -------( Function ) | |
| background | |
| body | |
| charset | |
| color | |
| content | |
| controls | |
| depth | |
| equiv | |
| grabbedEl | |
| height | |
| id | |
| intensity | |
| intersectedEls | |
| originalBodyData | |
| physics | |
| position | |
| raycaster | |
| sceneEl | |
| src | |
| targetEl | |
| type | |
| width |