Three.js 挑选对象的实质是从点击位置发射光芒
,但屏幕坐标系与webgl坐标系是差别的,而把屏幕的二维坐标转化为三维坐标
就是症结,做一步换算后交由Raycaster的setFromCamera要领即可。
所以思绪
以下:
1.猎取屏幕坐标(x, y)
2.换算至webgl坐标中的(x2,y2),此时长度仍为像素单元下的长度
3.由于webgl坐标轴的局限为(-1,1),做个比值,称为标准化
4.Raycaster.setFromCamera(mouse, camera)发射射线
5.Raycaster.intersectObjects猎取射得的一切对象,再按须要操纵
先对比下各坐标轴,再按代码剖析步骤
代码中使用了我封装的要领,threeConf对象包括three.js的基础组件,但不影响拾取对象的逻辑,拾取的代码于此
一、坐标轴
1.屏幕坐标轴
即我们的屏幕的二维坐标,矩形为我们的屏幕,左上角就是(0, 0),长度即是以px为单元
2.天下坐标系
即webgl中的坐标系,屏幕中间为(0, 0, z),第三个坐标为从屏幕指向我们的z轴。三个坐标的大小局限
为(-1,1),如图
这里实在另有个相机坐标系,由于还没有进修webgl或许opengl怕胡言乱语,我以为一篇很棒的blog贴于文末
然则我们完成挑选拾取功用时,但纯真从three.js角度来看能够不须要相干学问
二、代码思绪
悉数代码请看上方地点
1.坐标标准化
//1.猎取屏幕坐标(x, y)
//2.换算至webgl坐标中的(x2,y2),此时长度单元仍为像素
//3.由于webgl坐标轴的局限为(-1,1),做个比值,称为标准化
//这三步后化简的式子以下,这里我们three.js的窗口为全部浏览器
let rayRaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
function onMouseMove(event) {
mouse.x = (event.clientX/window.innerWidth) * 2 - 1;
mouse.y = 1 -(event.clientY/window.innerHeight) * 2 ;
}
window.addEventListener('mousemove', onMouseMove, false);
x1 = event.clientX,y1 = event.clientY,即点击位置
,换算历程以下(这里默许画布宽高为浏览器宽高)
依据式子带入x1与y1即可获得代码中雷同的式子
2.发射射线,猎取对象
这里截取射线代码
function render() {
//射线射出
rayRaster.setFromCamera(mouse, threeConf.camera);
//射线上的物体
let intersects = rayRaster.intersectObjects(threeConf.scene.children);
//选中另一物体的状况,仍为统一物体则不更新,这里我们只拿第一个物体
if(selectedObj !== intersects[0]){
selectedObj && selectedObj.object.material.color.set(0x87CEEB); //回复
intersects.length && intersects[0].object.material.color.set(0xff0000);
selectedObj = intersects[0];
document.body.style.cursor = "pointer";
}
//未选中物体状况
if(intersects[0] === undefined){
document.body.style.cursor = "auto";
}
threeConf.stats.update();
threeConf.renderer.render(threeConf.scene, threeConf.camera);
requestAnimationFrame(render);
}
即可
三、参考资料
OpenGL.坐标体系的引见与坐标变更的完成(此篇blog包括相机坐标轴)
https://blog.csdn.net/stringN…
ThreeJS中的点击与交互——Raycaster的用法
https://segmentfault.com/a/11…
Three.js Raycaster官方文档
https://threejs.org/docs/#api…