threejs点击事件

实际原理为获取相机和鼠标点击时的位置,发出一条射线实现的

需要用到的变量除camera外:

    //获取鼠标坐标
    var mouse=new THREE.Vector2();
    var raycaster=new THREE.Raycaster();

初始化中实现对点击事件的监听:

        //点击模型
        window.addEventListener('click',onmodelclick);

使用的函数:

    //获取在射线上的接触点
    function onmodelclick(event){
        mouse.x=(event.clientX/window.innerWidth)*2-1;
        mouse.y=-(event.clientY/window.innerHeight)*2+1;

        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster.intersectObjects(scene.children);
        console.log(intersects);
    }

作用:console.log会获取到射线所接触到的模型的所有点,并可获取到距离该点的距离,相交点,点所在的模型,则课根据用途进行后续操作

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值