首先要关注THREE.Raycaster的属性,从three.js官网给出的例子[webgl_interactive_lines.html]可以得知此函数,可以控制线的精确度。
raycaster.params.Line.threshold = 0.05 ;
由于浏览器是一个2d
视口,而在里面显示three.js
的内容是3d
场景,所以,现在有一个问题就是如何将2d
视口的x
和y
坐标转换成three.js
场景中的3d
坐标。
然后要关注是否是全屏的canvas。
spriteClick: function (event) {
event.preventDefault();
// 鼠标转换三维坐标
// this.mouse.x = (event.clientX / document.getElementById("other").offsetWidth) * 2 - 1;
// this.mouse.y = -(event.clientY / document.getElementById("other").offsetHeight) * 2 + 1;
//this.mouse.x = ( event.offsetX / this.goldenContainer.width ) * 2 - 1;
//this.goldenContainer.width 当前画布的高
// this.mouse.y = - (event.offsetY / this.goldenContainer.height) * 2 + 1;
//this.goldenContainer.height 当前画布的宽
this.mouse.x = ((event.clientX - document.getElementById("deviceCanvas").getBoundingClientRect().left) / document.getElementById("deviceCanvas").offsetWidth) * 2 - 1;
this.mouse.y = -((event.clientY - document.getElementById("deviceCanvas").getBoundingClientRect().top) / document.getElementById("deviceCanvas").offsetHeight) * 2 + 1;
let standardVector = new THREE.Vector3(this.mouse.x, this.mouse.y, 1);// 标准设备坐标
// 标准设备坐标转世界坐标
let worldVector = standardVector.unproject(this.camera);
// 射线投射方向单位向量(worldVector坐标减相机位置坐标)
let ray = worldVector.sub(this.camera.position).normalize();
this.raycaster = new THREE.Raycaster(this.camera.position, ray);
// 设置要获取的相交对象(数组)
const objs = this.raycaster.intersectObjects(meshList, true);
if (objs.length > 0) {
// code......
}
},