Question

我试图让相机跟随高度地图的轮廓。

我添加了一个指向下方的raycaster，但它没有报告交叉点的任何变化。

我不得不将raycaster从相机上拆下来，因为相机会旋转raycaster。

谁能告诉我我在这里做错了什么？

如何获得从raycaster到地形的距离？

完整代码： 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>

使用raycaster使相机跟随高度地图地形

0 个答案: