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);
        }
    }

你可能感兴趣的:(Three.js笔记)