109 THREE.JS 判断一个点是否处于一个立方体内

今天不知道是群里的哪个大佬起的头,是山椒大佬还是谁,说起判断一个点是否处于在一个立方体内。
然后我想了一下,就写一个案例吧,懒得看直接查看案例接下来说一下实现逻辑:
首先:将立方体的包围盒更新出来:

box.geometry.computeBoundingBox(); //更新几何体的包围盒

然后更新立方体的世界矩阵:

box.updateMatrixWorld();

获取到点的世界坐标系下面的位置:

var position = sphere.getWorldPosition(new THREE.Vector3());

接下来,到重点了,立方体的几何体的包围盒是处于在它的局部坐标系下面的,所以我们要获取到当前位置点在局部坐标系下的位置。当前是通过位置点的世界坐标系乘以立方体的世界转换矩阵生成的逆转矩阵获取到:

var localPosition = position.applyMatrix4(new THREE.Matrix4().getInverse(box.matrixWorld));

这样包围盒和点位置都处于一个坐标系下面,我们可以通过包围盒的containsPoint事件直接判断一下是否处于在包围盒内即可:

var localPosition = position.applyMatrix4(new THREE.Matrix4().getInverse(box.matrixWorld));

最后付上重要代码:

    //每帧额外的运算
    function render() {
        box.rotation.y += 0.005;

        sphere.position.x = 2 + Math.sin(+new Date/2000)*2;

        //首先更新盒子的世界矩阵
        box.updateMatrixWorld();

        //获取到点的世界坐标
        var position = sphere.getWorldPosition(new THREE.Vector3());

        //使用包围盒去判断位置
        //获取到在局部坐标系下的位置点
        var localPosition = position.applyMatrix4(new THREE.Matrix4().getInverse(box.matrixWorld));
        //判断一下,如果在盒子内变成红色
        if(box.geometry.boundingBox.containsPoint(localPosition)){
            sphere.material.color.set(0xff0000);
        }
        else{
            sphere.material.color.set(0xffffff);
        }
    }
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值