Make camera follow height map terrain using raycaster - aframe

Question

I'm trying to make the camera follow the contours of a heightmap landscape.
I've added a raycaster that points down, but it is not reporting any changes in the intersection.
I've had to detach the raycaster from the camera, as the camera would rotate the raycaster.
Can anyone tell me what I'm doing wrong here?
How do I get the distance from the raycaster to the terrain?
Full code:
Live demo - the blue vertical line is the raycaster
<script>
// A custom follow the terrain component
//
// the idea is to use a raycaster pointing down to work out the distance between camera and the terrain
// and then adjust the camera's z value accordingly
AFRAME.registerComponent('collider-check', {
dependencies: ['raycaster'],
init: function () {
var myHeight = 2.0;
var cam = this.el.object3D;
this.el.addEventListener('raycaster-intersected', function (evt) {
// I've got the camera here and the intersection, so I should be able to adjust camera to match terrain?
var dist = evt.detail.intersection.distance;
// these values do not change :(
console.log('Raycaster (camera y, distance to terrain, terrain.y)', cam.position.y, dist, evt.detail.intersection.point.y);
});
}
});
// when we move the camera, we drag the raycaster object with us - it's not attached to the camera so it won't rotate the ray
AFRAME.registerComponent('moving', {
schema: { type: 'selector', default: '#theray'},
init: function () {
// this.data is the raycaster component
},
tick: function() {
// camera
var c = this.el.object3D.position;
// set raycaster position to match camera - have shifted it over a bit so we can see it
this.data.setAttribute('position', '' + (c.x - 2.0) + ' ' + (c.y - 2.0) + ' ' + c.z);
}
});
</script>
<a-scene>
<!-- place camera in the middle of our map -->
<a-camera position="6 0.2 6" rotation="0 90 0" moving>
<a-cursor color="#4CC3D9" fuse="true" fuse-timeout="100"></a-cursor>
</a-camera>
<!-- if I attach this raycaster to the camera, it will rotate with the camera - and that's not what we want -->
<a-entity collider-check id='theray' rotation="0 0 0" position="6 1 6" visible="true">
<!-- the aframe inspector barfs on this -->
<a-entity raycaster="objects:.walkonthis;direction:0 -1 0;showLine:true;origin:0 1 0" line="start:0 0 0;end:0 -5 0:color:red;opacity:1.0"></a-entity>
</a-entity>
<!-- the landscape -->
<a-entity heightgrid='xdimension: 12; zdimension: 10; yscale: 0.5; heights:
5 4 3 2 1 1 1 1 2 3 3 6
5 4 3 2 1 1 1 1 2 3 3 3
3 3 0 0 1 1 1 1 2 3 3 3
3 3 1 0 1 1 1 1 2 3 3 3
3 3 2 1 1 1 1 1 2 3 3 3
3 3 2 1 1 1 1 1 2 3 3 3
3 3 2 1 1 1 1 1 2 3 3 3
3 3 1 0 1 1 1 1 2 3 3 3
3 3 0 0 1 1 1 1 2 3 3 3
3 3 0 0 1 1 1 1 2 3 3 6
;
' material="color: #ccc" class='walkonthis'></a-entity>
</a-scene>