|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> |
|
|
<script> |
|
|
|
|
|
AFRAME.registerComponent('follow-mouse', { |
|
|
schema: { |
|
|
speed: {type: 'number', default: 1} |
|
|
}, |
|
|
|
|
|
tick: function() { |
|
|
var paddle = this.el; |
|
|
var rect = paddle.sceneEl.canvas.getBoundingClientRect(); |
|
|
var pos = paddle.getAttribute('position'); |
|
|
|
|
|
|
|
|
pos.x += ((this.data.x - rect.width / 2) / rect.width - pos.x) * this.data.speed; |
|
|
|
|
|
paddle.setAttribute('position', pos); |
|
|
}, |
|
|
|
|
|
events: { |
|
|
mousemove: function (evt) { |
|
|
this.data.x = evt.clientX; |
|
|
} |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<a-scene background="color: #ECECEC"> |
|
|
<a-entity id="camera" position="0 1.6 3"> |
|
|
<a-camera></a-camera> |
|
|
</a-entity> |
|
|
|
|
|
<a-box id="paddle" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow follow-mouse="speed: 0.1"></a-box> |
|
|
<a-sphere id="ball" position="0 1.25 -5" radius="0.25" color="#EF2D5E" shadow></a-sphere> |
|
|
|
|
|
|
|
|
<a-box id="brick1" position="-1 0.5 -6" rotation="0 0 0" color="#7BC8A4" shadow></a-box> |
|
|
<a-box id="brick2" position="0 0.5 -6" rotation="0 0 0" color="#7BC8A4" shadow></a-box> |
|
|
<a-box id="brick3" position="1 0.5 -6" rotation="0 0 0" color="#7BC8A4" shadow></a-box> |
|
|
</a-scene> |
|
|
</body> |
|
|
</html> |
|
|
|
