[发明专利]基于three.js的网页端三维空间内部物体交互操作方法

权利要求书

1.基于three.js的网页端三维空间内部物体交互操作方法，其特征在于：包括以下步骤：

S1、给canvas标签绑定选取事件、移动事件和拖拽事件；

S2、在选取事件、移动事件和拖拽事件中加入射线拾取的判断，判断是否拾取到模型，若拾取到模型，进行下一步；若没有拾取到模型，则不响应；所述S1中选取事件包括：click事件、dblclick事件、mousedown事件、mouseup事件、mousemove事件、keydown事件或keyup事件；所述移动事件包括：mouseenter事件和mouseout事件；所述拖拽事件包括：dragstart事件、dragging事件和dragend事件；

S3、触发选取事件，根据选取事件响应机制进行响应，实现模型的选取；所述S3中选取事件响应机制为：触发拾取到的模型中任一模型的选取事件，其父类递归触发相应的事件；

S4、触发移动事件，根据移动事件响应机制进行响应，实现鼠标在模型上移动；所述S4中移动事件响应机制为：

S201、若拾取到的模型数组中没有元素，则判断oldSelected模型是否存在，若存在，则触发其mouseout事件，其父类也递归触发mouseout事件，并将oldSelected模型设为null模型；

若拾取到的模型数组中有元素，则将拾取到的第一个模型命名为newselected模型，将前一次拾取到的旧模型命名为oldSelected模型，进行下一步；

S202、根据两次拾取到的模型是否为同一模型判断鼠标是否在模型上移动；若判断鼠标在模型上移动，则根据鼠标移入/移出响应机制触发mouseenter事件和mouseout事件；

若判断鼠标没有在模型上移动，则不响应；

S5、触发拖拽事件，根据拖拽事件响应机制进行响应，实现模型的拖拽；所述S5中拖拽事件响应机制包括以下步骤：

S401、若拾取到的模型数组中有元素，则将拾取到的第一个模型命名为selected模型，进行下一步；

若拾取到的模型数组中没有元素，则排除该模型；

S402、判断selected模型是否触发过dragstart事件；若selected模型触发过dragstart事件，则触发selected模型及其所有子元素的dragging事件；

若selected模型未触发过dragstart事件，则触发selected模型及其所有子元素的dragstart事件，然后触发selected模型及其所有子元素的dragging事件；

S403、触发mouseup事件，触发selected模型和其所有子元素的dragend事件，最后将selected模型设为null模型。

2.如权利要求1所述的基于three.js的网页端三维空间内部物体交互操作方法，其特征在于：所述S2中判断是否拾取到模型数组包括以下步骤：

S101、通过getIntersectsFromEvent函数获取模型数组；

S102、判断模型数组中是否有元素，若有元素，则判定模型数组中的对象即为拾取到的多个模型，模型的排序按拾取到的先后排序；若没有元素，则判定为没有拾取到模型数组。

3.如权利要求1所述的基于three.js的网页端三维空间内部物体交互操作方法，其特征在于：所述S202中判断鼠标是否在模型上移动具体包括以下步骤：

将newselected模型的mouseenter事件和mouseout事件跟oldSelected模型做对比，判断newSelected模型是否等于oldSelected模型；

若等于，则说明前一次拾取与本次拾取到的模型是同一个模型，判断鼠标没有在模型上移动，则不响应；

若不等于，则判断鼠标在模型上移动。

4.如权利要求3所述的基于three.js的网页端三维空间内部物体交互操作方法，其特征在于：所述S202中鼠标移入/移出响应机制具体包括以下步骤：

S301、oldSelected模型和newSelected模型向上溯源到同一个父类，将该父类命名为CommonParent；

S302、oldSelected模型触发mouseout事件，其父类也递归触发mouseout事件，到CommonParent为止；newSelected模型触发mouseenter事件，其父类也递归触发mouseenter事件，到CommonParent为止；

S303、将oldSelected模型的值设为newSelected模型。