84 lines
3.3 KiB
HTML
84 lines
3.3 KiB
HTML
<html>
|
|
<head>
|
|
<title>A-Frame Click & Drag Component - Physics 2</title>
|
|
<script src="../build.js"></script>
|
|
</head>
|
|
<body>
|
|
<a-scene physics="debug: true; gravity: -20">
|
|
|
|
<a-sphere
|
|
click-drag
|
|
dynamic-body="mass: 10"
|
|
position="0 3 -1"
|
|
radius="1"
|
|
color="#EF2D5E"
|
|
>
|
|
</a-sphere>
|
|
|
|
|
|
<a-box dynamic-body="mass: 0.1" position="-2.8 0.6 -8" color="#EF2D5E"></a-box>
|
|
<a-box dynamic-body="mass: 0.1" position="-1.4 0.6 -8" color="#EF2D5E"></a-box>
|
|
<a-box dynamic-body="mass: 0.1" position="0 0.6 -8" color="#EF2D5E"></a-box>
|
|
<a-box dynamic-body="mass: 0.1" position="1.4 0.6 -8" color="#EF2D5E"></a-box>
|
|
<a-box dynamic-body="mass: 0.1" position="2.8 0.6 -8" color="#EF2D5E"></a-box>
|
|
|
|
<a-box dynamic-body="mass: 0.1" position="-2 1.7 -8" color="#EF2D5E"></a-box>
|
|
<a-box dynamic-body="mass: 0.1" position="-0.7 1.7 -8" color="#EF2D5E"></a-box>
|
|
<a-box dynamic-body="mass: 0.1" position="0.7 1.7 -8" color="#EF2D5E"></a-box>
|
|
<a-box dynamic-body="mass: 0.1" position="2 1.7 -8" color="#EF2D5E"></a-box>
|
|
|
|
<a-box dynamic-body="mass: 0.1" position="-1.4 2.8 -8" color="#EF2D5E"></a-box>
|
|
<a-box dynamic-body="mass: 0.1" position="0 2.8 -8" color="#EF2D5E"></a-box>
|
|
<a-box dynamic-body="mass: 0.1" position="1.4 2.8 -8" color="#EF2D5E"></a-box>
|
|
|
|
<a-box dynamic-body="mass: 0.1" position="-0.7 3.9 -8" color="#EF2D5E"></a-box>
|
|
<a-box dynamic-body="mass: 0.1" position="0.7 3.9 -8" color="#EF2D5E"></a-box>
|
|
|
|
<a-box dynamic-body="mass: 0.1" position="0 5 -8" color="#EF2D5E"></a-box>
|
|
|
|
|
|
<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" keyboard-controls="mode: fps"></a-camera>
|
|
</a-entity>
|
|
<script>
|
|
var draggable = document.querySelector('[click-drag]');
|
|
draggable.addEventListener('dragstart', function(dragInfo) {
|
|
draggable.components['dynamic-body'].pause();
|
|
});
|
|
draggable.addEventListener('dragend', function(dragInfo) {
|
|
|
|
// We're dealing with a very heavy ball (mass: 10), so we want to
|
|
// reduce the velocity a little
|
|
var velocityDamp = 0.5;
|
|
|
|
var camera = draggable.sceneEl.camera;
|
|
|
|
// The "up" vector of the camera
|
|
var rotation = camera.up.clone();
|
|
// crossed with the "forward" / direction vector of the camera
|
|
// gives us the 3rd orthogonal axis of the camera's rotation
|
|
rotation.cross(camera.getWorldDirection());
|
|
|
|
// A damped down velocity vector
|
|
var rotatedVelocity = new window.AFRAME.THREE.Vector3(
|
|
dragInfo.detail.velocity.x * velocityDamp,
|
|
dragInfo.detail.velocity.y * velocityDamp,
|
|
dragInfo.detail.velocity.z * velocityDamp
|
|
);
|
|
|
|
// Which we then rotate *into* the screen by 45 degrees
|
|
// This gives the feeling of "tossing" the ball
|
|
rotatedVelocity.applyAxisAngle(rotation, Math.PI / 8);
|
|
|
|
draggable.components['dynamic-body'].play();
|
|
draggable.body.velocity.set(rotatedVelocity.x, rotatedVelocity.y, rotatedVelocity.z);
|
|
});
|
|
</script>
|
|
</a-scene>
|
|
</body>
|
|
</html>
|