42 lines
1.2 KiB
HTML
42 lines
1.2 KiB
HTML
<html>
|
|
<head>
|
|
<title>A-Frame Click & Drag Component - Events</title>
|
|
<script src="../build.js"></script>
|
|
</head>
|
|
<body>
|
|
<a-scene physics="debug: true">
|
|
|
|
<a-sphere
|
|
click-drag
|
|
dynamic-body="mass: 20"
|
|
position="0 3 -1"
|
|
radius="1.25"
|
|
color="#EF2D5E"
|
|
>
|
|
</a-sphere>
|
|
|
|
<a-plane static-body rotation="-90 0 0" width="200" height="200" color="#7BC8A4"></a-plane>
|
|
|
|
<a-sky color="#ECECEC"></a-sky>
|
|
|
|
<a-entity position="0 0 3.8">
|
|
<a-camera look-controls-enabled="false"></a-camera>
|
|
</a-entity>
|
|
<script>
|
|
var draggable = document.querySelector('[click-drag]');
|
|
draggable.addEventListener('dragstart', function(dragInfo) {
|
|
draggable.pause();
|
|
});
|
|
draggable.addEventListener('dragend', function(dragInfo) {
|
|
var x = dragInfo.detail.velocity.x;
|
|
var y = dragInfo.detail.velocity.y;
|
|
var z = dragInfo.detail.velocity.z;
|
|
|
|
draggable.play();
|
|
draggable.body.velocity.set(x, y, z);
|
|
console.log('drag end', dragInfo.detail.velocity);
|
|
});
|
|
</script>
|
|
</a-scene>
|
|
</body>
|
|
</html>
|