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会获取到射线所接触到的模型的所有点,并可获取到距离该点的距离,相交点,点所在的模型,则课根据用途进行后续操作

你可能感兴趣的:(threejs,javascript,three.js)