File size: 1,684 Bytes
d2ce9b2 adf7ffb 2affc78 adf7ffb 2affc78 41150bb 2affc78 41150bb 2affc78 adf7ffb 0bd0040 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
// Registering a new component to move the paddle
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');
// Update paddle x position based on mouse x 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>
<!-- Creating bricks -->
<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>
|