WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js点击选中多个模型

开发Web3D应用有时候需要通过鼠标连续点击选中多个三维模型或者说几何体,对于这个问题也比较简单,如果你有这个疑问,首先说明你应该了解如何通过Threejs的射线对象选中一个模型,如果你不了解可以去学习一下。

文章:Three.js鼠标单击选中一个三维模型

在一个三维场景中,通过鼠标单击选中一个三维模型对象,可以通过JavaScript代码设置单选和多选两种模式。默认情况下设置为单选模式,比如鼠标单击选中一个模型颜色变化,鼠标继续单击其它模型,如果选中了一个模型,原来选中的模型就变为未选中状态。

对多选模式,可以通过UI菜单设置,也可以通过键盘Ctrl键配合鼠标单击进入多选模式。对于多选模式实现,可以在代码中创建一个数组对象,每当单击选中一个三维模型,就插入数组中,凡是数组中的三维模型全部显示一种变化的颜色。

//声明一个变量记录Ctrl是否按下的状态
var CtrlBool = false;//初始状态未按下
function CtrlDown(event) {
  // 判断Ctrl按键是否按下
  if(event.ctrlKey){
    CtrlBool=true
  }
}
function CtrlUp(event) {
  // 判断Ctrl按键是否是抬起了
  if(event.ctrlKey){
    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].object.material.transparent = true;
  intersects[0].object.material.opacity = 0.6;
}
...
}

组合键:http://www.cnblogs.com/xiaoheimiaoer/p/4716191.html

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com