threejs学习（八）-- raycaster拾取物体

threejs中可以通过raycaster来拾取与射线相交的物体；

具体的概念可以搜搜其他博客看看

mouseClick: function() {
			// 添加鼠标点击事件
            document.addEventListener( 'click', this.spriteClick, false );
           	// 初始化射线
			this.raycaster = new THREE.Raycaster();
			// 初始化鼠标二维向量
			this.mouse = new THREE.Vector2();
        },
        spriteClick: function(event) {
            // 鼠标转换三维坐标
            // 在threejs中,三维空间是-1到1的一个取值范围,所以这里转化的鼠标向量是转化成threejs中的向量
            this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
            // 设置射线发出相机，以及鼠标点击的位置
            this.raycaster.setFromCamera( this.mouse, this.camera );
            // 设置要获取的相交对象（数组）
            // 会从cameraSprites数组中寻找所有raycaster相交的对象,返回成数组
            const objs = this.raycaster.intersectObjects(cameraSprites);
            if (objs.length > 0) {
            	// 相交对象的object属性才是原模型对象
                alert("点击了摄像头sprite, 当前相交对象名称为：" +objs[0].object.name);

            }
        },

附:
射线鼠标坐标转化的坑
https://blog.csdn.net/u013090676/article/details/77188088
raycaster介绍:
https://www.cnblogs.com/lst619247/p/9071233.html