aframe - Make camera follow height map terrain using raycaster -
i'm trying make camera follow contours of heightmap landscape.
i've added raycaster points down, not reporting changes in intersection.
i've had detach raycaster camera, camera rotate raycaster.
can tell me i'm doing wrong here?
how distance raycaster terrain?
full code: live demo - blue vertical line raycaster
<script> // custom follow terrain component // // idea use raycaster pointing down work out distance between camera , terrain // , adjust 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 camera here , intersection, should able adjust camera match terrain? var dist = evt.detail.intersection.distance; // these values not change :( console.log('raycaster (camera y, distance terrain, terrain.y)', cam.position.y, dist, evt.detail.intersection.point.y); }); } }); // when move camera, drag raycaster object - it's not attached camera won't rotate ray aframe.registercomponent('moving', { schema: { type: 'selector', default: '#theray'}, init: function () { // this.data raycaster component }, tick: function() { // camera var c = this.el.object3d.position; // set raycaster position match camera - have shifted on bit can see this.data.setattribute('position', '' + (c.x - 2.0) + ' ' + (c.y - 2.0) + ' ' + c.z); } }); </script> <a-scene> <!-- place camera in 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 attach raycaster camera, rotate camera - , that's not want --> <a-entity collider-check id='theray' rotation="0 0 0" position="6 1 6" visible="true"> <!-- aframe inspector barfs on --> <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> <!-- 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>
Comments
Post a Comment