|
|
@@ -8,7 +8,7 @@ import {TextSprite} from './TextSprite.js'
|
|
|
import Sprite from './Sprite.js'
|
|
|
|
|
|
import DepthBasicMaterial from "../materials/DepthBasicMaterial.js";
|
|
|
-
|
|
|
+import CursorDeal from "../utils/CursorDeal.js";
|
|
|
|
|
|
|
|
|
const depthMatProp = { //为了防止拉远后因放大而一半嵌入墙。
|
|
|
@@ -26,7 +26,7 @@ const depthMatProp = { //为了防止拉远后因放大而一半嵌入墙。
|
|
|
const planeGeo = new THREE.PlaneBufferGeometry(1,1)
|
|
|
let texLoader = new THREE.TextureLoader()
|
|
|
|
|
|
-let lineMat
|
|
|
+let lineMat, dragPointMat
|
|
|
|
|
|
const defaultLineLength = 1
|
|
|
const defaultSpotScale = 0.35
|
|
|
@@ -52,13 +52,19 @@ class Tag extends THREE.Shim.FollowRootObject{
|
|
|
this.position.copy(o.position)
|
|
|
this.normal = o.normal != void 0 ? o.normal : new THREE.Vector3(0,0, 1)
|
|
|
|
|
|
- this.dragEnable = true
|
|
|
+
|
|
|
this.build(o)
|
|
|
this.bindEvent()
|
|
|
-
|
|
|
+ this.dragEnable = true
|
|
|
|
|
|
}
|
|
|
|
|
|
+ set dragEnable(state){
|
|
|
+ this.lineDragPoint.visible = state
|
|
|
+ }
|
|
|
+ get dragEnable(){
|
|
|
+ return this.lineDragPoint.visible
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
|
|
@@ -72,6 +78,7 @@ class Tag extends THREE.Shim.FollowRootObject{
|
|
|
this.spot = new THREE.Mesh(planeGeo, new DepthBasicMaterial(Object.assign({},depthMatProp,{
|
|
|
transparent:true,
|
|
|
})))
|
|
|
+ this.spot.name = 'spot'
|
|
|
this.spot.scale.set(defaultSpotScale,defaultSpotScale,defaultSpotScale)
|
|
|
this.spot.renderOrder = this.spot.pickOrder = Potree.config.renderOrders.tag.spot;
|
|
|
Potree.settings.isOfficial || this.changeMap(Potree.resourcePath+'/textures/spot_default.png')
|
|
|
@@ -102,7 +109,25 @@ class Tag extends THREE.Shim.FollowRootObject{
|
|
|
this.add(this.line)
|
|
|
viewer.tags.add(this)
|
|
|
|
|
|
-
|
|
|
+ if(!dragPointMat){
|
|
|
+ let map = texLoader.load(Potree.resourcePath+'/textures/whiteCircle.png',()=>{})
|
|
|
+ dragPointMat = {
|
|
|
+ default: new THREE.MeshBasicMaterial({
|
|
|
+ map, transparent:true, color:'#0fe', opacity:0, depthTest:false,
|
|
|
+ }),
|
|
|
+ hover: new THREE.MeshBasicMaterial({
|
|
|
+ map, transparent:true, color:'#0fe', opacity:0.4, depthTest:false,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.lineDragPoint = new THREE.Mesh(planeGeo, dragPointMat.default) //修改线高度时出现的小圆点
|
|
|
+ this.lineDragPoint.scale.set(0.15,0.15,0.15);
|
|
|
+ this.lineDragPoint.name = 'lineDragPoint'
|
|
|
+ this.lineDragPoint.renderOrder = this.lineDragPoint.pickOrder = Potree.config.renderOrders.tag.spot + 3;
|
|
|
+ group.add(this.lineDragPoint)
|
|
|
+
|
|
|
+
|
|
|
this.updatePose()
|
|
|
|
|
|
}
|
|
|
@@ -114,6 +139,12 @@ class Tag extends THREE.Shim.FollowRootObject{
|
|
|
let hoverState = {
|
|
|
line:0,spot:0,label:0
|
|
|
}
|
|
|
+ let grabbingObject
|
|
|
+ let setDragPointState = (state)=>{
|
|
|
+ this.lineDragPoint.material = state ? dragPointMat.hover : dragPointMat.default
|
|
|
+ this.spot.material.opacity = state ? 0.5 : 1
|
|
|
+ this.titleLabel.sprite.material.opacity = state ? 0.5 : 1
|
|
|
+ }
|
|
|
|
|
|
{
|
|
|
//因为只有有intersect时才能拖拽,所以写得比较麻烦
|
|
|
@@ -124,20 +155,21 @@ class Tag extends THREE.Shim.FollowRootObject{
|
|
|
cursor[name] = state
|
|
|
viewer.dispatchEvent({
|
|
|
type : "CursorChange", action, name
|
|
|
- })
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
- [this.line, this.spot].forEach(e=>e.addEventListener('mousemove',(e)=>{
|
|
|
- hoverState[e.target.name == 'tagLine' ? 'line' : 'spot'] = 1
|
|
|
- if(this.dragEnable && viewer.inputHandler.intersect){//能拖拽时
|
|
|
- setCursor('hoverGrab', 'add')
|
|
|
+
|
|
|
+ [this.line, this.spot, this.lineDragPoint].forEach(e=>e.addEventListener('mousemove',(e)=>{
|
|
|
+ hoverState[e.target.name] = 1
|
|
|
+ if(this.dragEnable && (viewer.inputHandler.intersect || hoverState['lineDragPoint'])){//能拖拽时
|
|
|
+ setCursor('hoverGrab', 'add')
|
|
|
}else{
|
|
|
setCursor('hoverGrab', 'remove')
|
|
|
- }
|
|
|
+ }
|
|
|
}));
|
|
|
- [this.line, this.spot].forEach(e=>e.addEventListener('mouseleave',(e)=>{
|
|
|
- hoverState[e.target.name == 'tagLine' ? 'line' : 'spot'] = 0
|
|
|
- if(!hoverState.line && !hoverState.spot){//都没hover才取消
|
|
|
+ [this.line, this.spot, this.lineDragPoint].forEach(e=>e.addEventListener('mouseleave',(e)=>{
|
|
|
+ hoverState[e.target.name] = 0
|
|
|
+ if(!Object.values(hoverState).some(e=>e)){//都没hover才取消
|
|
|
setCursor('hoverGrab', 'remove')
|
|
|
}
|
|
|
/* if(!hoverState.line && !hoverState.spot && !hoverState.label){
|
|
|
@@ -147,17 +179,25 @@ class Tag extends THREE.Shim.FollowRootObject{
|
|
|
|
|
|
|
|
|
|
|
|
- [this.line, this.spot].forEach(e=>e.addEventListener('drag',(e)=>{
|
|
|
- if(this.dragEnable && cursor.grabbing){
|
|
|
- let info = viewer.tagTool.getPoseByIntersect(e)
|
|
|
- info && this.changePos(info)
|
|
|
+ [this.line, this.spot, this.lineDragPoint].forEach(e=>e.addEventListener('drag',(e)=>{
|
|
|
+ if(this.dragEnable && cursor.grabbing){
|
|
|
+ if(e.target.name == 'lineDragPoint'){
|
|
|
+ this.dragLineLen(e)
|
|
|
+ }else{
|
|
|
+ let info = viewer.tagTool.getPoseByIntersect(e)
|
|
|
+ info && this.changePos(info)
|
|
|
+ }
|
|
|
}
|
|
|
}));
|
|
|
- [this.line, this.spot].forEach(e=>e.addEventListener('startDragging',(e)=>{
|
|
|
- this.dragEnable && viewer.inputHandler.intersect && setCursor('grabbing', 'add')
|
|
|
+ [this.line, this.spot, this.lineDragPoint].forEach(e=>e.addEventListener('startDragging',(e)=>{
|
|
|
+ this.dragEnable && (viewer.inputHandler.intersect || e.target.name == 'lineDragPoint') && setCursor('grabbing', 'add')
|
|
|
+ grabbingObject = e.target.name
|
|
|
+ grabbingObject == 'lineDragPoint' && setDragPointState(true)
|
|
|
}));
|
|
|
- [this.line, this.spot].forEach(e=>e.addEventListener('drop',(e)=>{
|
|
|
+ [this.line, this.spot, this.lineDragPoint].forEach(e=>e.addEventListener('drop',(e)=>{
|
|
|
this.dragEnable && setCursor('grabbing', 'remove')
|
|
|
+ grabbingObject = null
|
|
|
+ hoverState['lineDragPoint'] || setDragPointState(false)
|
|
|
}));
|
|
|
//拖拽线来移动。虽然理想方式是拟真,拖拽时不改变在线上的位置,使之平移,但仔细想想似乎办不到。因为墙面normal是不固定的,尤其在交界处难以确定。不知鼠标在空中的位置,即使是平行镜头移动也无法满足所有情况。matterport是加了底座,移动也是改变底座中心。
|
|
|
}
|
|
|
@@ -185,10 +225,25 @@ class Tag extends THREE.Shim.FollowRootObject{
|
|
|
this.titleLabel.sprite.addEventListener('spriteUpdated',()=>{
|
|
|
this.updateDepthParams()
|
|
|
})
|
|
|
+
|
|
|
+
|
|
|
+ //-----------set line length
|
|
|
+
|
|
|
+ // CursorDeal
|
|
|
+ this.lineDragPoint.addEventListener('mouseover',(e)=>{
|
|
|
+ setDragPointState(true)
|
|
|
+ })
|
|
|
+ this.lineDragPoint.addEventListener('mouseleave',(e)=>{
|
|
|
+ grabbingObject != 'lineDragPoint' && setDragPointState(false)
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
+
|
|
|
updateDepthParams(){//为了避免热点嵌入墙壁,实时根据其大小更新材质系数。 但是在倾斜的角度看由于遮挡距离很大肯定会嵌入的
|
|
|
let s = this.titleLabel.parent.scale.x
|
|
|
let names = ['clipDistance', 'occlusionDistance', 'startClipDis', 'startOcclusDis']
|
|
|
@@ -225,10 +280,27 @@ class Tag extends THREE.Shim.FollowRootObject{
|
|
|
}
|
|
|
|
|
|
changeLineLen(len){
|
|
|
- this.lineLength = len
|
|
|
+ this.lineLength = parseFloat(len)
|
|
|
this.updatePose()
|
|
|
}
|
|
|
|
|
|
+ dragLineLen(e){ //拖拽线的顶端修改线长度
|
|
|
+ let endPos = this.normal.clone().multiplyScalar(this.lineLength).applyMatrix4(this.matrixWorld)
|
|
|
+ let normal = this.normal.clone().applyQuaternion(this.getWorldQuaternion(new THREE.Quaternion))
|
|
|
+ const projected = endPos.clone().project(e.drag.dragViewport.camera);
|
|
|
+ projected.x = e.pointer.x
|
|
|
+ projected.y = e.pointer.y
|
|
|
+
|
|
|
+ const unprojected = projected.clone().unproject(e.drag.dragViewport.camera);
|
|
|
+ let moveVec = new THREE.Vector3().subVectors(unprojected, endPos);
|
|
|
+ moveVec = moveVec.projectOnVector(normal)
|
|
|
+
|
|
|
+
|
|
|
+ let newLength = Math.max(0, this.lineLength + moveVec.dot(normal) )
|
|
|
+ //console.log(moveVec,newLength)
|
|
|
+ this.changeLineLen(newLength)
|
|
|
+ this.dispatchEvent('dragLineLen')
|
|
|
+ }
|
|
|
|
|
|
|
|
|
changePos(info){//注:onMesh时在非平地上拖拽,热点旋转会一直变
|