three.js 射线拾取

最新推荐文章于 2024-03-13 15:41:49 发布

城永

最新推荐文章于 2024-03-13 15:41:49 发布

阅读量334

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_47133092/article/details/125158615

版权

//射线拾取不准确解决

 function choose(event) {

        var Sx = event.clientX;
        var Sy = event.clientY;

        let x = ((event.clientX - mainCanvas.getBoundingClientRect().left) / mainCanvas.offsetWidth) * 2 - 1;
        let y = -((event.clientY - mainCanvas.getBoundingClientRect().top) / mainCanvas.offsetHeight) * 2 + 1;

        var raycaster = new THREE.Raycaster();

        raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
        

        var intersects = raycaster.intersectObjects(granaryArr);

        if (intersects[0] == undefined) {
            return
        }

        if (intersects[0].object.name == '机械手1') {

            popups.style.display = 'block'
            peishui_popups.style.display = 'none'

            $('.popups_title').text('1号机械手')
        }


    }

    addEventListener('click', function () {
        choose(event) //执行射线拾取的代码
    });