当目标在目标上方时,以三分法进行射线投射

时间:2018-10-05 06:58:30

标签: three.js raycasting

我对three.js相当陌生,并试图更好地了解射线投射。到目前为止,我已经在游戏中使用它来显示对象与页面上的另一个对象发生碰撞的情况,该对象可以正常工作。在我正在制作的游戏中,这是为了让英雄在撞到墙壁上时保持健康。

我现在正在尝试实现一个目标,当该目标悬停在某些对象上时,它将自动拍摄。但是,目标只会在物体穿过目标网格时才记录目标命中,而不是在射线穿过目标网格时记录。

对此进行更详细的说明,射线是从摄影机通过目标投射的,如果目标位于网格(存储为对象数组)上,那么我希望它触发功能。

在我的更新功能中,我有这个:

    var ray = new THREE.Raycaster();
    var crossHairClone = crossHair.position.clone();
    var coards = {};
    coards.x = crossHairClone.x
    coards.y = crossHairClone.y
    ray.setFromCamera(coards, camera);
    var collisionResults = ray.intersectObjects( collidableMeshList );
    if ( collisionResults.length > 0 ) {
        console.log('Target Hit!', collisionResults)
    }

仅在collidableMeshList实际接触目标网格时而不是在瞄准目标网格时才触发控制台日志。

我如何扩展射线以通过目标(我认为它已经在做),以便如果有任何东西击中射线,它将触发我的控制台日志。

编辑

我已经在游戏中添加了一个URL。游戏还有其他更广泛的问题,我目前的重点只是目标射线投射。

Game Link

1 个答案:

答案 0 :(得分:0)

非常感谢在此过程中一直为我提供帮助的每个人,但是我终于解决了问题,只是没有通过我期望的方式解决了。读完setFromCamera()函数后,它似乎主要用在鼠标围栏上,而在我看来,这并不是我想要的。我希望页面上的目标和射线能够穿过它。由于某种原因,我的雷是从整个场景的中心垂直向上拍摄。

最后,我尝试了一种不同的方法,直接设置光线的位置和方向,而不是依赖于从相机位置进行设置。

var vector = new THREE.Vector3(crossHair.position.x, crossHair.position.y, crossHair.position.z);
var targetRay = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var enemyHit = targetRay.intersectObject( enemy );

if ( enemyHit.length > 0 ) {
    console.log('Target Hit!', targetRay)
}

在有人回答比这个更好的方法或对我对setFromCamera()所说的话有任何更正的情况下,我会花一会儿再接受这个答案。