Three.js点击选中多个模型
Three.js点击选中多个模型
开发Web3D应⽤有时候需要通过⿏标连续点击选中多个三维模型或者说⼏何体，对于这个问题也⽐较简单，如果你有这个疑问，⾸先说明你应该了解如何通过Threejs的射线对象选中⼀个模型，如果你不了解可以去学习⼀下。
⽂章：
在⼀个三维场景中，通过⿏标单击选中⼀个三维模型对象，可以通过JavaScript代码设置单选和多选两种模式。默认情况下设置为单选模式，⽐如⿏标单击选中⼀个模型颜⾊变化，⿏标继续单击其它模型，如果选中了⼀个模型，原来选中的模型就变为未选中状态。
对多选模式，可以通过UI菜单设置，也可以通过键盘Ctrl键配合⿏标单击进⼊多选模式。对于多选模式实现，可以在代码中创建⼀个数组对象，每当单击选中⼀个三维模型，就插⼊数组中，凡是数组中的三维模型全部显⽰⼀种变化的颜⾊。
//声明⼀个变量记录Ctrl是否按下的状态
var CtrlBool =false;//初始状态未按下
function CtrlDown(event){
// 判断Ctrl按键是否按下
lKey){
CtrlBool=true
}
}
function CtrlUp(event){
// 判断Ctrl按键是否是抬起了
javascript说明lKey){
CtrlBool=false
}
}
addEventListener('keyup', CtrlUp);// 键盘抬起事件
addEventListener('keydown', CtrlDown);// 键盘按下事件
addEventListener('click', choose);// 监听窗⼝⿏标单击事件
//声明⼀个数组变量，⽤来存放选中的所有模型对象
var chooseArr =[];
function choose(event){
...
// 判断Ctrl按键是否处于按下状态
if(CtrlBool){
// 选中的模型对象插⼊chooseArr数组中
chooseArr.push(intersects[0].object)
intersects[0].ansparent =true;
intersects[0].object.material.opacity =0.6;
}
...
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。