@realsee/dnalogel 2.0.0-alpha.26 → 2.0.0-alpha.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/CSS3DRenderPlugin/Plugin.d.ts +49 -0
- package/dist/CSS3DRenderPlugin/index.d.ts +3 -48
- package/dist/CameraMovementPlugin/CameraMovementPlugin.d.ts +7 -0
- package/dist/CameraMovementPlugin/index.d.ts +4 -6
- package/dist/CameraMovementPlugin/index.js +12 -12
- package/dist/ModelChassisCompassPlugin/Plugin.d.ts +19 -0
- package/dist/ModelChassisCompassPlugin/index.d.ts +3 -18
- package/dist/ModelEntryDoorGuidePlugin/Plugin.d.ts +26 -0
- package/dist/ModelEntryDoorGuidePlugin/index.d.ts +3 -25
- package/dist/ModelEntryDoorGuidePlugin/index.js +0 -5
- package/dist/ModelItemLabelPlugin/ModelItemLabelPlugin.d.ts +4 -0
- package/dist/ModelItemLabelPlugin/index.d.ts +8 -3
- package/dist/ModelItemLabelPlugin/index.js +13 -7
- package/dist/ModelTVVideoPlugin/Plugin.d.ts +4 -0
- package/dist/ModelTVVideoPlugin/index.d.ts +4 -3
- package/dist/ModelTVVideoPlugin/index.js +3 -3
- package/dist/ModelViewPlugin/Plugin.d.ts +17 -0
- package/dist/ModelViewPlugin/index.d.ts +3 -16
- package/dist/PanoCompassPlugin/Plugin.d.ts +47 -0
- package/dist/PanoCompassPlugin/index.d.ts +4 -47
- package/dist/PanoCompassPlugin/index.js +5 -4
- package/dist/PanoMeasurePlugin/index.d.ts +1 -1
- package/dist/PanoMeasurePlugin/index.js +4 -1
- package/dist/PanoRulerPlugin/Plugin.d.ts +31 -0
- package/dist/PanoRulerPlugin/index.d.ts +4 -30
- package/dist/PanoRulerPlugin/index.js +0 -5
- package/dist/PanoSpatialTagPlugin/Plugin.d.ts +33 -0
- package/dist/PanoSpatialTagPlugin/index.d.ts +4 -32
- package/dist/PanoSpatialTagPlugin/index.js +23 -21
- package/dist/_index.d.ts +30 -0
- package/dist/floorplan/index.d.ts +6 -0
- package/dist/index.d.ts +15 -30
- package/dist/index.es.js +149 -22
- package/dist/index.js +177 -43
- package/dist/index.umd.js +180 -47
- package/docs/assets/search.js +1 -1
- package/docs/classes/ModelRoomLabelController.html +5 -8
- package/docs/classes/PanoFloorplanRadarPluginController.html +3 -0
- package/docs/enums/CameraMovementEffect.html +3 -0
- package/docs/enums/DIRECTION.html +1 -0
- package/docs/enums/DISPLAY_STRATEGY_TYPE.html +1 -0
- package/docs/enums/FLOOR_PLAN_ATTACHED_TO.html +1 -1
- package/docs/enums/ModelFloorplanErrorType.html +1 -1
- package/docs/enums/Rotation.html +3 -0
- package/docs/index.html +2 -2
- package/docs/interfaces/CSS3DRenderPluginExportType.html +4 -0
- package/docs/interfaces/CameraMovementPluginExportType.html +17 -0
- package/docs/interfaces/FloorplanBounding.html +10 -0
- package/docs/interfaces/FloorplanData.html +3 -0
- package/docs/interfaces/FloorplanEntrance.html +15 -0
- package/docs/interfaces/FloorplanExtraObject.html +7 -0
- package/docs/interfaces/FloorplanExtraObject3D.html +3 -0
- package/docs/interfaces/FloorplanFloorData.html +3 -0
- package/docs/interfaces/FloorplanImagePosition.html +3 -0
- package/docs/interfaces/FloorplanObserver.html +5 -0
- package/docs/interfaces/FloorplanOutlineItem.html +3 -0
- package/docs/interfaces/FloorplanPosition.html +3 -0
- package/docs/interfaces/FloorplanRoomItem.html +17 -0
- package/docs/interfaces/FloorplanRoomLabelItem.html +7 -0
- package/docs/interfaces/FloorplanServerBounding.html +10 -0
- package/docs/interfaces/FloorplanServerComputedData.html +1 -0
- package/docs/interfaces/FloorplanServerData.html +3 -0
- package/docs/interfaces/FloorplanServerEntrance.html +15 -0
- package/docs/interfaces/FloorplanServerFloorData.html +3 -0
- package/docs/interfaces/FloorplanServerImagePosition.html +3 -0
- package/docs/interfaces/FloorplanServerObserver.html +5 -0
- package/docs/interfaces/FloorplanServerOutlineItem.html +3 -0
- package/docs/interfaces/FloorplanServerPosition.html +3 -0
- package/docs/interfaces/FloorplanServerRoomItem.html +20 -0
- package/docs/interfaces/FloorplanServerRoomLabelItem.html +7 -0
- package/docs/interfaces/LineJson.html +1 -1
- package/docs/interfaces/ModelChassisCompassPluginData.html +1 -1
- package/docs/interfaces/ModelChassisCompassPluginExportType.html +1 -1
- package/docs/interfaces/ModelChassisCompassPluginParameterType.html +1 -1
- package/docs/interfaces/ModelEntryDoorGuidePluginData.html +1 -1
- package/docs/interfaces/ModelEntryDoorGuidePluginExportType.html +1 -1
- package/docs/interfaces/ModelFloorplanParameterType.html +1 -1
- package/docs/interfaces/ModelFloorplanViewEvent.html +3 -3
- package/docs/interfaces/ModelItemLabelPluginData.html +1 -1
- package/docs/interfaces/ModelItemLabelPluginExportReturnsType.html +1 -1
- package/docs/interfaces/ModelItemLabelPluginParametersType.html +1 -1
- package/docs/interfaces/ModelRoomLabelPluginData.html +1 -1
- package/docs/interfaces/ModelTVVideoPluginData.html +1 -1
- package/docs/interfaces/ModelTVVideoPluginExportType.html +1 -1
- package/docs/interfaces/ModelTVVideoPluginParameterType.html +1 -1
- package/docs/interfaces/ModelViewPluginExportType.html +1 -0
- package/docs/interfaces/PanoCompassPluginData.html +1 -1
- package/docs/interfaces/PanoCompassPluginParameterType.html +1 -1
- package/docs/interfaces/PanoCursorRaycasterPluginExportType.html +6 -6
- package/docs/interfaces/PanoCursorRaycasterPluginParameterType.html +1 -0
- package/docs/interfaces/PanoFloorplanRadarPluginControllerParameter.html +1 -0
- package/docs/interfaces/PanoRulerPluginExportType.html +1 -1
- package/docs/interfaces/PanoRulerPluginOptions.html +1 -1
- package/docs/interfaces/PanoRulerPluginParameterType.html +1 -1
- package/docs/interfaces/PanoSpatialTagPluginContentEvent.html +1 -0
- package/docs/interfaces/PanoSpatialTagPluginContentReplacement.html +1 -0
- package/docs/interfaces/PanoSpatialTagPluginData.html +1 -1
- package/docs/interfaces/PanoSpatialTagPluginDataElement.html +1 -0
- package/docs/interfaces/PanoSpatialTagPluginExportType.html +1 -1
- package/docs/interfaces/PanoSpatialTagPluginOriginElement.html +1 -0
- package/docs/interfaces/PanoSpatialTagPluginParameterType.html +1 -1
- package/docs/interfaces/PanoSpatialTagPluginPointElement.html +1 -0
- package/docs/interfaces/PanoSpatialTagPluginTagElement.html +1 -0
- package/docs/interfaces/Point.html +1 -0
- package/docs/interfaces/PointJson.html +1 -1
- package/docs/interfaces/Room.html +1 -0
- package/docs/interfaces/RoomInfo.html +1 -0
- package/docs/interfaces/RoomLabel.html +7 -7
- package/docs/interfaces/RoomRules.html +1 -0
- package/docs/interfaces/Rooms.html +1 -0
- package/docs/interfaces/TopviewFloorplanPluginParameterType.html +10 -10
- package/docs/modules.html +28 -12
- package/libs/CSS3DRenderPlugin/Plugin.d.ts +49 -0
- package/libs/CSS3DRenderPlugin/Plugin.js +182 -0
- package/libs/CSS3DRenderPlugin/index.d.ts +3 -48
- package/libs/CSS3DRenderPlugin/index.js +2 -181
- package/libs/CameraMovementPlugin/CameraMovementPlugin.d.ts +7 -0
- package/libs/CameraMovementPlugin/CameraMovementPlugin.js +159 -0
- package/libs/CameraMovementPlugin/index.d.ts +4 -6
- package/libs/CameraMovementPlugin/index.js +3 -158
- package/libs/ModelChassisCompassPlugin/Plugin.d.ts +19 -0
- package/libs/ModelChassisCompassPlugin/Plugin.js +75 -0
- package/libs/ModelChassisCompassPlugin/index.d.ts +3 -18
- package/libs/ModelChassisCompassPlugin/index.js +2 -74
- package/libs/ModelEntryDoorGuidePlugin/Plugin.d.ts +26 -0
- package/libs/ModelEntryDoorGuidePlugin/Plugin.js +140 -0
- package/libs/ModelEntryDoorGuidePlugin/index.d.ts +3 -25
- package/libs/ModelEntryDoorGuidePlugin/index.js +2 -139
- package/libs/ModelItemLabelPlugin/ModelItemLabelPlugin.d.ts +4 -0
- package/libs/ModelItemLabelPlugin/ModelItemLabelPlugin.js +120 -0
- package/libs/ModelItemLabelPlugin/index.d.ts +8 -3
- package/libs/ModelItemLabelPlugin/index.js +7 -119
- package/libs/ModelTVVideoPlugin/Plugin.d.ts +4 -0
- package/libs/ModelTVVideoPlugin/Plugin.js +254 -0
- package/libs/ModelTVVideoPlugin/index.d.ts +4 -3
- package/libs/ModelTVVideoPlugin/index.js +3 -253
- package/libs/ModelViewPlugin/Plugin.d.ts +17 -0
- package/libs/ModelViewPlugin/Plugin.js +160 -0
- package/libs/ModelViewPlugin/index.d.ts +3 -16
- package/libs/ModelViewPlugin/index.js +2 -159
- package/libs/PanoCompassPlugin/Plugin.d.ts +47 -0
- package/libs/PanoCompassPlugin/Plugin.js +249 -0
- package/libs/PanoCompassPlugin/index.d.ts +4 -47
- package/libs/PanoCompassPlugin/index.js +3 -249
- package/libs/PanoMeasurePlugin/index.d.ts +1 -1
- package/libs/PanoMeasurePlugin/index.js +1 -1
- package/libs/PanoRulerPlugin/Plugin.d.ts +31 -0
- package/libs/PanoRulerPlugin/Plugin.js +402 -0
- package/libs/PanoRulerPlugin/index.d.ts +4 -30
- package/libs/PanoRulerPlugin/index.js +2 -401
- package/libs/PanoSpatialTagPlugin/Plugin.d.ts +33 -0
- package/libs/PanoSpatialTagPlugin/Plugin.js +415 -0
- package/libs/PanoSpatialTagPlugin/index.d.ts +4 -32
- package/libs/PanoSpatialTagPlugin/index.js +4 -412
- package/libs/_index.d.ts +30 -0
- package/libs/_index.js +18 -0
- package/libs/floorplan/index.d.ts +6 -0
- package/libs/floorplan/index.js +7 -0
- package/libs/index.d.ts +15 -30
- package/libs/index.js +25 -17
- package/package.json +5 -4
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import { getRoomInfoInstance } from './getRoomInfoInstance';
|
|
3
|
+
import { loadTexture } from '../shared-utils/three/loadTexture';
|
|
4
|
+
import CSS3DRenderPlugin from '../CSS3DRenderPlugin';
|
|
5
|
+
import { tweenProgress } from '../shared-utils/animationFrame/BetterTween';
|
|
6
|
+
export const PanoCompassPlugin = function (five, config) {
|
|
7
|
+
return new PanoCompassController(five, config);
|
|
8
|
+
};
|
|
9
|
+
export default PanoCompassPlugin;
|
|
10
|
+
class PanoCompassController {
|
|
11
|
+
constructor(five, config) {
|
|
12
|
+
Object.defineProperty(this, "five", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
configurable: true,
|
|
15
|
+
writable: true,
|
|
16
|
+
value: void 0
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(this, "data", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
configurable: true,
|
|
21
|
+
writable: true,
|
|
22
|
+
value: void 0
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(this, "config", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
configurable: true,
|
|
27
|
+
writable: true,
|
|
28
|
+
value: void 0
|
|
29
|
+
});
|
|
30
|
+
Object.defineProperty(this, "group", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
configurable: true,
|
|
33
|
+
writable: true,
|
|
34
|
+
value: new THREE.Group()
|
|
35
|
+
});
|
|
36
|
+
Object.defineProperty(this, "modelLoaded", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
configurable: true,
|
|
39
|
+
writable: true,
|
|
40
|
+
value: false
|
|
41
|
+
});
|
|
42
|
+
Object.defineProperty(this, "roomInfoInstance", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
configurable: true,
|
|
45
|
+
writable: true,
|
|
46
|
+
value: void 0
|
|
47
|
+
});
|
|
48
|
+
Object.defineProperty(this, "roomInfoWrapperInstance", {
|
|
49
|
+
enumerable: true,
|
|
50
|
+
configurable: true,
|
|
51
|
+
writable: true,
|
|
52
|
+
value: void 0
|
|
53
|
+
});
|
|
54
|
+
Object.defineProperty(this, "compassMeshTween", {
|
|
55
|
+
enumerable: true,
|
|
56
|
+
configurable: true,
|
|
57
|
+
writable: true,
|
|
58
|
+
value: void 0
|
|
59
|
+
});
|
|
60
|
+
Object.defineProperty(this, "compassMesh", {
|
|
61
|
+
enumerable: true,
|
|
62
|
+
configurable: true,
|
|
63
|
+
writable: true,
|
|
64
|
+
value: void 0
|
|
65
|
+
});
|
|
66
|
+
Object.defineProperty(this, "entryDoorMesh", {
|
|
67
|
+
enumerable: true,
|
|
68
|
+
configurable: true,
|
|
69
|
+
writable: true,
|
|
70
|
+
value: void 0
|
|
71
|
+
});
|
|
72
|
+
Object.defineProperty(this, "dispose", {
|
|
73
|
+
enumerable: true,
|
|
74
|
+
configurable: true,
|
|
75
|
+
writable: true,
|
|
76
|
+
value: () => {
|
|
77
|
+
var _a, _b, _c, _d;
|
|
78
|
+
this.five.scene.remove(this.group);
|
|
79
|
+
this.group.remove(...this.group.children);
|
|
80
|
+
(_b = (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.map) === null || _b === void 0 ? void 0 : _b.dispose();
|
|
81
|
+
(_d = (_c = this.entryDoorMesh) === null || _c === void 0 ? void 0 : _c.material.map) === null || _d === void 0 ? void 0 : _d.dispose();
|
|
82
|
+
this.five.off('panoArrived', this.onFivePanoArrived);
|
|
83
|
+
this.five.off('panoWillArrive', this.onFivePanoWillArrive);
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
Object.defineProperty(this, "onFiveFistPanoLoaded", {
|
|
87
|
+
enumerable: true,
|
|
88
|
+
configurable: true,
|
|
89
|
+
writable: true,
|
|
90
|
+
value: () => {
|
|
91
|
+
this.modelLoaded = true;
|
|
92
|
+
if (this.data)
|
|
93
|
+
this.init();
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
Object.defineProperty(this, "onFivePanoWillArrive", {
|
|
97
|
+
enumerable: true,
|
|
98
|
+
configurable: true,
|
|
99
|
+
writable: true,
|
|
100
|
+
value: (panoIndex) => {
|
|
101
|
+
var _a, _b;
|
|
102
|
+
if (panoIndex === this.five.panoIndex)
|
|
103
|
+
return;
|
|
104
|
+
(_a = this.compassMeshTween) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
105
|
+
(_b = this.compassMesh) === null || _b === void 0 ? void 0 : _b.material.setValues({ opacity: 0 });
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
Object.defineProperty(this, "onFivePanoArrived", {
|
|
109
|
+
enumerable: true,
|
|
110
|
+
configurable: true,
|
|
111
|
+
writable: true,
|
|
112
|
+
value: (panoIndex) => {
|
|
113
|
+
var _a, _b, _c, _d;
|
|
114
|
+
// ======== fix compass position ========
|
|
115
|
+
const standingPosition = this.five.work.observers[panoIndex].standingPosition;
|
|
116
|
+
if (this.compassMesh) {
|
|
117
|
+
// 指南针上移 0.01m,防止与地板重合
|
|
118
|
+
this.compassMesh.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
|
|
119
|
+
if (this.compassMesh.material.opacity !== 0)
|
|
120
|
+
return;
|
|
121
|
+
(_a = this.compassMeshTween) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
122
|
+
this.compassMeshTween = tweenProgress(1000)
|
|
123
|
+
.onUpdate(({ progress }) => {
|
|
124
|
+
var _a;
|
|
125
|
+
(_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.setValues({ opacity: progress });
|
|
126
|
+
this.five.needsRender = true;
|
|
127
|
+
})
|
|
128
|
+
.play();
|
|
129
|
+
}
|
|
130
|
+
// ======== fix entry door label position and rotation ========
|
|
131
|
+
if (this.entryDoorMesh) {
|
|
132
|
+
const entryDoorPosition = new THREE.Vector3(this.data.entrance.position.x, this.data.entrance.position.y, this.data.entrance.position.z);
|
|
133
|
+
const panoToEntryDoorVector = entryDoorPosition
|
|
134
|
+
.clone()
|
|
135
|
+
.setY(standingPosition.y)
|
|
136
|
+
.sub(standingPosition)
|
|
137
|
+
.normalize();
|
|
138
|
+
const compassEntryDoorPosition = standingPosition
|
|
139
|
+
.clone()
|
|
140
|
+
.add(panoToEntryDoorVector.clone().multiplyScalar(0.7))
|
|
141
|
+
.setY(standingPosition.y + 0.01);
|
|
142
|
+
this.entryDoorMesh.rotation.z = new THREE.Vector3(0, 0, -1).angleTo(panoToEntryDoorVector);
|
|
143
|
+
this.entryDoorMesh.position.copy(compassEntryDoorPosition);
|
|
144
|
+
// 不是客厅时,隐藏入户门指引
|
|
145
|
+
((_b = this.data) === null || _b === void 0 ? void 0 : _b.room_observers[panoIndex].room.type) === 1
|
|
146
|
+
? (_c = this.entryDoorMesh) === null || _c === void 0 ? void 0 : _c.material.setValues({ opacity: 1 })
|
|
147
|
+
: (_d = this.entryDoorMesh) === null || _d === void 0 ? void 0 : _d.material.setValues({ opacity: 0 });
|
|
148
|
+
}
|
|
149
|
+
// ======== fix room info ========
|
|
150
|
+
if (this.roomInfoInstance && this.roomInfoWrapperInstance) {
|
|
151
|
+
this.roomInfoWrapperInstance.css3DObject.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
|
|
152
|
+
this.roomInfoInstance.setRoom(this.data.room_observers[panoIndex].room);
|
|
153
|
+
}
|
|
154
|
+
this.five.needsRender = true;
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
Object.defineProperty(this, "onFiveCameraDirectionUpdate", {
|
|
158
|
+
enumerable: true,
|
|
159
|
+
configurable: true,
|
|
160
|
+
writable: true,
|
|
161
|
+
value: ({ longitude, latitude, }) => {
|
|
162
|
+
var _a, _b;
|
|
163
|
+
if (!this.roomInfoWrapperInstance)
|
|
164
|
+
return;
|
|
165
|
+
this.roomInfoWrapperInstance.css3DObject.rotation.z = longitude;
|
|
166
|
+
latitude > 0.66 && this.five.getCurrentState().mode === 'Panorama'
|
|
167
|
+
? (_a = this.roomInfoInstance) === null || _a === void 0 ? void 0 : _a.show()
|
|
168
|
+
: (_b = this.roomInfoInstance) === null || _b === void 0 ? void 0 : _b.hide();
|
|
169
|
+
}
|
|
170
|
+
});
|
|
171
|
+
this.five = five;
|
|
172
|
+
this.config = config;
|
|
173
|
+
this.five.scene.add(this.group);
|
|
174
|
+
five.once('dispose', this.dispose);
|
|
175
|
+
five.once('modelLoaded', this.onFiveFistPanoLoaded);
|
|
176
|
+
this.five.on('panoArrived', this.onFivePanoArrived);
|
|
177
|
+
this.five.on('panoWillArrive', this.onFivePanoWillArrive);
|
|
178
|
+
this.five.on('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
|
|
179
|
+
}
|
|
180
|
+
load(data) {
|
|
181
|
+
this.data = data;
|
|
182
|
+
if (this.modelLoaded)
|
|
183
|
+
this.init();
|
|
184
|
+
}
|
|
185
|
+
async init() {
|
|
186
|
+
if (!this.data || !this.modelLoaded)
|
|
187
|
+
return;
|
|
188
|
+
const northRad = this.data.north_rad;
|
|
189
|
+
if (northRad != null) {
|
|
190
|
+
this.compassMesh = await this.loadCompassMesh();
|
|
191
|
+
this.compassMesh.rotateX(-Math.PI / 2);
|
|
192
|
+
this.compassMesh.rotateZ(northRad - Math.PI / 2);
|
|
193
|
+
this.group.add(this.compassMesh);
|
|
194
|
+
}
|
|
195
|
+
if (this.data.entrance != null) {
|
|
196
|
+
this.entryDoorMesh = await this.loadEntryDoorMesh();
|
|
197
|
+
this.roomInfoWrapperInstance = this.loadRoomInfo();
|
|
198
|
+
this.roomInfoInstance = getRoomInfoInstance();
|
|
199
|
+
this.entryDoorMesh.rotateX(-Math.PI / 2);
|
|
200
|
+
if (this.roomInfoWrapperInstance)
|
|
201
|
+
this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
|
|
202
|
+
this.group.add(this.entryDoorMesh);
|
|
203
|
+
}
|
|
204
|
+
this.onFivePanoArrived(this.five.panoIndex || 0);
|
|
205
|
+
this.five.needsRender = true;
|
|
206
|
+
}
|
|
207
|
+
async loadCompassMesh() {
|
|
208
|
+
var _a;
|
|
209
|
+
const compassImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.compassImageUrl) ||
|
|
210
|
+
'//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png';
|
|
211
|
+
const compassTexture = await loadTexture(compassImageUrl);
|
|
212
|
+
const compassGeometry = new THREE.CircleGeometry(0.7, 32);
|
|
213
|
+
const compassMaterial = new THREE.MeshBasicMaterial({
|
|
214
|
+
map: compassTexture,
|
|
215
|
+
transparent: true,
|
|
216
|
+
opacity: 0,
|
|
217
|
+
depthTest: false,
|
|
218
|
+
});
|
|
219
|
+
const compassMesh = new THREE.Mesh(compassGeometry, compassMaterial);
|
|
220
|
+
compassMesh.name = 'pano-compass-mesh';
|
|
221
|
+
return compassMesh;
|
|
222
|
+
}
|
|
223
|
+
async loadEntryDoorMesh() {
|
|
224
|
+
var _a;
|
|
225
|
+
const entryDoorImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.entryDoorImageUrl) ||
|
|
226
|
+
'//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png';
|
|
227
|
+
const entryDoorTexture = await loadTexture(entryDoorImageUrl);
|
|
228
|
+
const entryDoorGeometry = new THREE.PlaneGeometry(0.2, 0.16);
|
|
229
|
+
const entryDoorMaterial = new THREE.MeshBasicMaterial({
|
|
230
|
+
map: entryDoorTexture,
|
|
231
|
+
transparent: true,
|
|
232
|
+
opacity: 0.8,
|
|
233
|
+
depthTest: false,
|
|
234
|
+
});
|
|
235
|
+
const entryDoorMesh = new THREE.Mesh(entryDoorGeometry, entryDoorMaterial);
|
|
236
|
+
entryDoorMesh.name = 'pano-compass-entry-door';
|
|
237
|
+
return entryDoorMesh;
|
|
238
|
+
}
|
|
239
|
+
loadRoomInfo() {
|
|
240
|
+
const points = [
|
|
241
|
+
new THREE.Vector3(-0.7, 0, -0.7),
|
|
242
|
+
new THREE.Vector3(0.7, 0, -0.7),
|
|
243
|
+
new THREE.Vector3(0.7, 0, 0.7),
|
|
244
|
+
new THREE.Vector3(-0.7, 0, 0.7),
|
|
245
|
+
];
|
|
246
|
+
const roomInfo = CSS3DRenderPlugin(this.five).create3DDomContainer(points);
|
|
247
|
+
return roomInfo;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
@@ -1,51 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
entryDoorImageUrl?: string;
|
|
6
|
-
}
|
|
7
|
-
export interface PanoCompassPluginData {
|
|
8
|
-
north_rad: null | number;
|
|
9
|
-
entrance: null | undefined | {
|
|
10
|
-
position: {
|
|
11
|
-
x: number;
|
|
12
|
-
y: number;
|
|
13
|
-
z: number;
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
room_observers: undefined | {
|
|
17
|
-
index: number;
|
|
18
|
-
floor_index: number;
|
|
19
|
-
room: FloorplanServerRoomItem;
|
|
20
|
-
}[];
|
|
21
|
-
}
|
|
22
|
-
export declare type PanoCompassPluginExportType = PanoCompassController;
|
|
1
|
+
import PanoCompassPlugin from './Plugin';
|
|
2
|
+
export { PanoCompassPlugin };
|
|
3
|
+
export default PanoCompassPlugin;
|
|
4
|
+
export type { PanoCompassPluginParameterType, PanoCompassPluginData, PanoCompassPluginExportType } from './Plugin';
|
|
23
5
|
export declare const panoCompassPluginServerParams: {
|
|
24
6
|
name: string;
|
|
25
7
|
version: number;
|
|
26
8
|
};
|
|
27
|
-
export declare const PanoCompassPlugin: FivePlugin<PanoCompassPluginParameterType | undefined, PanoCompassController>;
|
|
28
|
-
export default PanoCompassPlugin;
|
|
29
|
-
declare class PanoCompassController {
|
|
30
|
-
five: Five;
|
|
31
|
-
data?: PanoCompassPluginData;
|
|
32
|
-
config?: PanoCompassPluginParameterType;
|
|
33
|
-
private group;
|
|
34
|
-
private modelLoaded;
|
|
35
|
-
private roomInfoInstance?;
|
|
36
|
-
private roomInfoWrapperInstance?;
|
|
37
|
-
private compassMeshTween?;
|
|
38
|
-
private compassMesh?;
|
|
39
|
-
private entryDoorMesh?;
|
|
40
|
-
constructor(five: Five, config?: PanoCompassPluginParameterType);
|
|
41
|
-
load(data: PanoCompassPluginData): void;
|
|
42
|
-
dispose: () => void;
|
|
43
|
-
private onFiveFistPanoLoaded;
|
|
44
|
-
private init;
|
|
45
|
-
private loadCompassMesh;
|
|
46
|
-
private loadEntryDoorMesh;
|
|
47
|
-
private loadRoomInfo;
|
|
48
|
-
private onFivePanoWillArrive;
|
|
49
|
-
private onFivePanoArrived;
|
|
50
|
-
private onFiveCameraDirectionUpdate;
|
|
51
|
-
}
|
|
@@ -1,253 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import CSS3DRenderPlugin from '../CSS3DRenderPlugin';
|
|
5
|
-
import { tweenProgress } from '../shared-utils/animationFrame/BetterTween';
|
|
1
|
+
import PanoCompassPlugin from './Plugin';
|
|
2
|
+
export { PanoCompassPlugin };
|
|
3
|
+
export default PanoCompassPlugin;
|
|
6
4
|
export const panoCompassPluginServerParams = {
|
|
7
5
|
name: 'PanoCompassPlugin',
|
|
8
6
|
version: 0,
|
|
9
7
|
};
|
|
10
|
-
export const PanoCompassPlugin = function (five, config) {
|
|
11
|
-
return new PanoCompassController(five, config);
|
|
12
|
-
};
|
|
13
|
-
export default PanoCompassPlugin;
|
|
14
|
-
class PanoCompassController {
|
|
15
|
-
constructor(five, config) {
|
|
16
|
-
Object.defineProperty(this, "five", {
|
|
17
|
-
enumerable: true,
|
|
18
|
-
configurable: true,
|
|
19
|
-
writable: true,
|
|
20
|
-
value: void 0
|
|
21
|
-
});
|
|
22
|
-
Object.defineProperty(this, "data", {
|
|
23
|
-
enumerable: true,
|
|
24
|
-
configurable: true,
|
|
25
|
-
writable: true,
|
|
26
|
-
value: void 0
|
|
27
|
-
});
|
|
28
|
-
Object.defineProperty(this, "config", {
|
|
29
|
-
enumerable: true,
|
|
30
|
-
configurable: true,
|
|
31
|
-
writable: true,
|
|
32
|
-
value: void 0
|
|
33
|
-
});
|
|
34
|
-
Object.defineProperty(this, "group", {
|
|
35
|
-
enumerable: true,
|
|
36
|
-
configurable: true,
|
|
37
|
-
writable: true,
|
|
38
|
-
value: new THREE.Group()
|
|
39
|
-
});
|
|
40
|
-
Object.defineProperty(this, "modelLoaded", {
|
|
41
|
-
enumerable: true,
|
|
42
|
-
configurable: true,
|
|
43
|
-
writable: true,
|
|
44
|
-
value: false
|
|
45
|
-
});
|
|
46
|
-
Object.defineProperty(this, "roomInfoInstance", {
|
|
47
|
-
enumerable: true,
|
|
48
|
-
configurable: true,
|
|
49
|
-
writable: true,
|
|
50
|
-
value: void 0
|
|
51
|
-
});
|
|
52
|
-
Object.defineProperty(this, "roomInfoWrapperInstance", {
|
|
53
|
-
enumerable: true,
|
|
54
|
-
configurable: true,
|
|
55
|
-
writable: true,
|
|
56
|
-
value: void 0
|
|
57
|
-
});
|
|
58
|
-
Object.defineProperty(this, "compassMeshTween", {
|
|
59
|
-
enumerable: true,
|
|
60
|
-
configurable: true,
|
|
61
|
-
writable: true,
|
|
62
|
-
value: void 0
|
|
63
|
-
});
|
|
64
|
-
Object.defineProperty(this, "compassMesh", {
|
|
65
|
-
enumerable: true,
|
|
66
|
-
configurable: true,
|
|
67
|
-
writable: true,
|
|
68
|
-
value: void 0
|
|
69
|
-
});
|
|
70
|
-
Object.defineProperty(this, "entryDoorMesh", {
|
|
71
|
-
enumerable: true,
|
|
72
|
-
configurable: true,
|
|
73
|
-
writable: true,
|
|
74
|
-
value: void 0
|
|
75
|
-
});
|
|
76
|
-
Object.defineProperty(this, "dispose", {
|
|
77
|
-
enumerable: true,
|
|
78
|
-
configurable: true,
|
|
79
|
-
writable: true,
|
|
80
|
-
value: () => {
|
|
81
|
-
var _a, _b, _c, _d;
|
|
82
|
-
this.five.scene.remove(this.group);
|
|
83
|
-
this.group.remove(...this.group.children);
|
|
84
|
-
(_b = (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.map) === null || _b === void 0 ? void 0 : _b.dispose();
|
|
85
|
-
(_d = (_c = this.entryDoorMesh) === null || _c === void 0 ? void 0 : _c.material.map) === null || _d === void 0 ? void 0 : _d.dispose();
|
|
86
|
-
this.five.off('panoArrived', this.onFivePanoArrived);
|
|
87
|
-
this.five.off('panoWillArrive', this.onFivePanoWillArrive);
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
Object.defineProperty(this, "onFiveFistPanoLoaded", {
|
|
91
|
-
enumerable: true,
|
|
92
|
-
configurable: true,
|
|
93
|
-
writable: true,
|
|
94
|
-
value: () => {
|
|
95
|
-
this.modelLoaded = true;
|
|
96
|
-
if (this.data)
|
|
97
|
-
this.init();
|
|
98
|
-
}
|
|
99
|
-
});
|
|
100
|
-
Object.defineProperty(this, "onFivePanoWillArrive", {
|
|
101
|
-
enumerable: true,
|
|
102
|
-
configurable: true,
|
|
103
|
-
writable: true,
|
|
104
|
-
value: (panoIndex) => {
|
|
105
|
-
var _a, _b;
|
|
106
|
-
if (panoIndex === this.five.panoIndex)
|
|
107
|
-
return;
|
|
108
|
-
(_a = this.compassMeshTween) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
109
|
-
(_b = this.compassMesh) === null || _b === void 0 ? void 0 : _b.material.setValues({ opacity: 0 });
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
Object.defineProperty(this, "onFivePanoArrived", {
|
|
113
|
-
enumerable: true,
|
|
114
|
-
configurable: true,
|
|
115
|
-
writable: true,
|
|
116
|
-
value: (panoIndex) => {
|
|
117
|
-
var _a, _b, _c, _d;
|
|
118
|
-
// ======== fix compass position ========
|
|
119
|
-
const standingPosition = this.five.work.observers[panoIndex].standingPosition;
|
|
120
|
-
if (this.compassMesh) {
|
|
121
|
-
// 指南针上移 0.01m,防止与地板重合
|
|
122
|
-
this.compassMesh.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
|
|
123
|
-
if (this.compassMesh.material.opacity !== 0)
|
|
124
|
-
return;
|
|
125
|
-
(_a = this.compassMeshTween) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
126
|
-
this.compassMeshTween = tweenProgress(1000)
|
|
127
|
-
.onUpdate(({ progress }) => {
|
|
128
|
-
var _a;
|
|
129
|
-
(_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.setValues({ opacity: progress });
|
|
130
|
-
this.five.needsRender = true;
|
|
131
|
-
})
|
|
132
|
-
.play();
|
|
133
|
-
}
|
|
134
|
-
// ======== fix entry door label position and rotation ========
|
|
135
|
-
if (this.entryDoorMesh) {
|
|
136
|
-
const entryDoorPosition = new THREE.Vector3(this.data.entrance.position.x, this.data.entrance.position.y, this.data.entrance.position.z);
|
|
137
|
-
const panoToEntryDoorVector = entryDoorPosition
|
|
138
|
-
.clone()
|
|
139
|
-
.setY(standingPosition.y)
|
|
140
|
-
.sub(standingPosition)
|
|
141
|
-
.normalize();
|
|
142
|
-
const compassEntryDoorPosition = standingPosition
|
|
143
|
-
.clone()
|
|
144
|
-
.add(panoToEntryDoorVector.clone().multiplyScalar(0.7))
|
|
145
|
-
.setY(standingPosition.y + 0.01);
|
|
146
|
-
this.entryDoorMesh.rotation.z = new THREE.Vector3(0, 0, -1).angleTo(panoToEntryDoorVector);
|
|
147
|
-
this.entryDoorMesh.position.copy(compassEntryDoorPosition);
|
|
148
|
-
// 不是客厅时,隐藏入户门指引
|
|
149
|
-
((_b = this.data) === null || _b === void 0 ? void 0 : _b.room_observers[panoIndex].room.type) === 1
|
|
150
|
-
? (_c = this.entryDoorMesh) === null || _c === void 0 ? void 0 : _c.material.setValues({ opacity: 1 })
|
|
151
|
-
: (_d = this.entryDoorMesh) === null || _d === void 0 ? void 0 : _d.material.setValues({ opacity: 0 });
|
|
152
|
-
}
|
|
153
|
-
// ======== fix room info ========
|
|
154
|
-
if (this.roomInfoInstance && this.roomInfoWrapperInstance) {
|
|
155
|
-
this.roomInfoWrapperInstance.css3DObject.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
|
|
156
|
-
this.roomInfoInstance.setRoom(this.data.room_observers[panoIndex].room);
|
|
157
|
-
}
|
|
158
|
-
this.five.needsRender = true;
|
|
159
|
-
}
|
|
160
|
-
});
|
|
161
|
-
Object.defineProperty(this, "onFiveCameraDirectionUpdate", {
|
|
162
|
-
enumerable: true,
|
|
163
|
-
configurable: true,
|
|
164
|
-
writable: true,
|
|
165
|
-
value: ({ longitude, latitude, }) => {
|
|
166
|
-
var _a, _b;
|
|
167
|
-
if (!this.roomInfoWrapperInstance)
|
|
168
|
-
return;
|
|
169
|
-
this.roomInfoWrapperInstance.css3DObject.rotation.z = longitude;
|
|
170
|
-
latitude > 0.66 && this.five.getCurrentState().mode === 'Panorama'
|
|
171
|
-
? (_a = this.roomInfoInstance) === null || _a === void 0 ? void 0 : _a.show()
|
|
172
|
-
: (_b = this.roomInfoInstance) === null || _b === void 0 ? void 0 : _b.hide();
|
|
173
|
-
}
|
|
174
|
-
});
|
|
175
|
-
this.five = five;
|
|
176
|
-
this.config = config;
|
|
177
|
-
this.five.scene.add(this.group);
|
|
178
|
-
five.once('dispose', this.dispose);
|
|
179
|
-
five.once('modelLoaded', this.onFiveFistPanoLoaded);
|
|
180
|
-
this.five.on('panoArrived', this.onFivePanoArrived);
|
|
181
|
-
this.five.on('panoWillArrive', this.onFivePanoWillArrive);
|
|
182
|
-
this.five.on('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
|
|
183
|
-
}
|
|
184
|
-
load(data) {
|
|
185
|
-
this.data = data;
|
|
186
|
-
if (this.modelLoaded)
|
|
187
|
-
this.init();
|
|
188
|
-
}
|
|
189
|
-
async init() {
|
|
190
|
-
if (!this.data || !this.modelLoaded)
|
|
191
|
-
return;
|
|
192
|
-
const northRad = this.data.north_rad;
|
|
193
|
-
if (northRad != null) {
|
|
194
|
-
this.compassMesh = await this.loadCompassMesh();
|
|
195
|
-
this.compassMesh.rotateX(-Math.PI / 2);
|
|
196
|
-
this.compassMesh.rotateZ(northRad - Math.PI / 2);
|
|
197
|
-
this.group.add(this.compassMesh);
|
|
198
|
-
}
|
|
199
|
-
if (this.data.entrance != null) {
|
|
200
|
-
this.entryDoorMesh = await this.loadEntryDoorMesh();
|
|
201
|
-
this.roomInfoWrapperInstance = this.loadRoomInfo();
|
|
202
|
-
this.roomInfoInstance = getRoomInfoInstance();
|
|
203
|
-
this.entryDoorMesh.rotateX(-Math.PI / 2);
|
|
204
|
-
if (this.roomInfoWrapperInstance)
|
|
205
|
-
this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
|
|
206
|
-
this.group.add(this.entryDoorMesh);
|
|
207
|
-
}
|
|
208
|
-
this.onFivePanoArrived(this.five.panoIndex || 0);
|
|
209
|
-
this.five.needsRender = true;
|
|
210
|
-
}
|
|
211
|
-
async loadCompassMesh() {
|
|
212
|
-
var _a;
|
|
213
|
-
const compassImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.compassImageUrl) ||
|
|
214
|
-
'//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png';
|
|
215
|
-
const compassTexture = await loadTexture(compassImageUrl);
|
|
216
|
-
const compassGeometry = new THREE.CircleGeometry(0.7, 32);
|
|
217
|
-
const compassMaterial = new THREE.MeshBasicMaterial({
|
|
218
|
-
map: compassTexture,
|
|
219
|
-
transparent: true,
|
|
220
|
-
opacity: 0,
|
|
221
|
-
depthTest: false,
|
|
222
|
-
});
|
|
223
|
-
const compassMesh = new THREE.Mesh(compassGeometry, compassMaterial);
|
|
224
|
-
compassMesh.name = 'pano-compass-mesh';
|
|
225
|
-
return compassMesh;
|
|
226
|
-
}
|
|
227
|
-
async loadEntryDoorMesh() {
|
|
228
|
-
var _a;
|
|
229
|
-
const entryDoorImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.entryDoorImageUrl) ||
|
|
230
|
-
'//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png';
|
|
231
|
-
const entryDoorTexture = await loadTexture(entryDoorImageUrl);
|
|
232
|
-
const entryDoorGeometry = new THREE.PlaneGeometry(0.2, 0.16);
|
|
233
|
-
const entryDoorMaterial = new THREE.MeshBasicMaterial({
|
|
234
|
-
map: entryDoorTexture,
|
|
235
|
-
transparent: true,
|
|
236
|
-
opacity: 0.8,
|
|
237
|
-
depthTest: false,
|
|
238
|
-
});
|
|
239
|
-
const entryDoorMesh = new THREE.Mesh(entryDoorGeometry, entryDoorMaterial);
|
|
240
|
-
entryDoorMesh.name = 'pano-compass-entry-door';
|
|
241
|
-
return entryDoorMesh;
|
|
242
|
-
}
|
|
243
|
-
loadRoomInfo() {
|
|
244
|
-
const points = [
|
|
245
|
-
new THREE.Vector3(-0.7, 0, -0.7),
|
|
246
|
-
new THREE.Vector3(0.7, 0, -0.7),
|
|
247
|
-
new THREE.Vector3(0.7, 0, 0.7),
|
|
248
|
-
new THREE.Vector3(-0.7, 0, 0.7),
|
|
249
|
-
];
|
|
250
|
-
const roomInfo = CSS3DRenderPlugin(this.five).create3DDomContainer(points);
|
|
251
|
-
return roomInfo;
|
|
252
|
-
}
|
|
253
|
-
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { FivePlugin } from '@realsee/five';
|
|
2
2
|
import MeasureController, { MeasurePluginParameter } from './Controller';
|
|
3
|
-
declare const PanoMeasurePlugin: FivePlugin<MeasurePluginParameter, PluginReturns>;
|
|
3
|
+
export declare const PanoMeasurePlugin: FivePlugin<MeasurePluginParameter, PluginReturns>;
|
|
4
4
|
export default PanoMeasurePlugin;
|
|
5
5
|
export declare type PluginReturns = MeasureController;
|
|
6
6
|
export type { PluginEvent } from './typings/event.type';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import MeasureController from './Controller';
|
|
2
|
-
const PanoMeasurePlugin = function PanoMeasurePlugin(five, params) {
|
|
2
|
+
export const PanoMeasurePlugin = function PanoMeasurePlugin(five, params) {
|
|
3
3
|
return new MeasureController(five, params);
|
|
4
4
|
};
|
|
5
5
|
export default PanoMeasurePlugin;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { FivePlugin } from '@realsee/five';
|
|
2
|
+
import type { RoomInfo, RoomRules } from './typings';
|
|
3
|
+
export interface PanoRulerPluginOptions {
|
|
4
|
+
distanceText?: (distance: number) => string;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
interface PanoRulerPluginPluginState {
|
|
8
|
+
enable: boolean;
|
|
9
|
+
loaded: boolean;
|
|
10
|
+
options: PanoRulerPluginOptions;
|
|
11
|
+
}
|
|
12
|
+
export interface PanoRulerPluginParameterType {
|
|
13
|
+
roomInfo?: RoomInfo;
|
|
14
|
+
roomRules?: RoomRules;
|
|
15
|
+
options?: PanoRulerPluginOptions;
|
|
16
|
+
}
|
|
17
|
+
export interface PanoRulerPluginExportType {
|
|
18
|
+
enable: () => void;
|
|
19
|
+
disable: () => void;
|
|
20
|
+
load: (roomInfo?: RoomInfo, roomRules?: RoomRules, options?: PanoRulerPluginOptions) => Promise<boolean>;
|
|
21
|
+
state: PanoRulerPluginPluginState;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* 全景标尺插件
|
|
25
|
+
*/
|
|
26
|
+
export declare const PanoRulerPlugin: FivePlugin<PanoRulerPluginParameterType, PanoRulerPluginExportType>;
|
|
27
|
+
export declare const panoRulerPluginServerParams: {
|
|
28
|
+
name: string;
|
|
29
|
+
version: number;
|
|
30
|
+
};
|
|
31
|
+
export default PanoRulerPlugin;
|