|
@@ -1,4 +1,4 @@
|
|
-import { Matrix4, OrthographicCamera, Vector3 } from "three";
|
|
|
|
|
|
+import { Matrix3, Matrix4, OrthographicCamera, Vector2, Vector3 } from "three";
|
|
import {
|
|
import {
|
|
CameraQueryPlugin,
|
|
CameraQueryPlugin,
|
|
EditPoi,
|
|
EditPoi,
|
|
@@ -7,19 +7,19 @@ import {
|
|
HistoryPlugin,
|
|
HistoryPlugin,
|
|
Poi,
|
|
Poi,
|
|
PoiAttrib,
|
|
PoiAttrib,
|
|
- WholeLine,
|
|
|
|
addEntityAttrib,
|
|
addEntityAttrib,
|
|
register,
|
|
register,
|
|
} from "../../board";
|
|
} from "../../board";
|
|
import "./icon";
|
|
import "./icon";
|
|
import mitt from "mitt";
|
|
import mitt from "mitt";
|
|
-import { line, point, polygon } from "../../board/packages/whole-line/style";
|
|
|
|
|
|
+import { line, polygon } from "../../board/packages/whole-line/style";
|
|
|
|
|
|
export * from "../../board";
|
|
export * from "../../board";
|
|
-polygon.fill = point.stroke = point.fill = "rgba(0,0,0,0)";
|
|
|
|
|
|
+// point.fill =point.stroke =
|
|
|
|
+polygon.fill = "rgba(0,0,0,0)";
|
|
line.stroke = "#fff";
|
|
line.stroke = "#fff";
|
|
|
|
|
|
-const types = { rooms: WholeLine, pois: EditPoi };
|
|
|
|
|
|
+const types = { rooms: EditWholeLine, pois: EditPoi };
|
|
const initBoard = register(types, {
|
|
const initBoard = register(types, {
|
|
bound: new CameraQueryPlugin({ move: true, wheel: true }),
|
|
bound: new CameraQueryPlugin({ move: true, wheel: true }),
|
|
history: new HistoryPlugin(),
|
|
history: new HistoryPlugin(),
|
|
@@ -97,11 +97,66 @@ export const createBoard = (
|
|
// bus.emit("activePoi", activePoi as EditPoi);
|
|
// bus.emit("activePoi", activePoi as EditPoi);
|
|
// }
|
|
// }
|
|
});
|
|
});
|
|
|
|
+ let rotationZ = 0;
|
|
|
|
+ let centerR: Vector3;
|
|
|
|
+ let cameraR: OrthographicCamera;
|
|
|
|
+ const setMat = new Matrix3();
|
|
|
|
+ setMat.identity();
|
|
|
|
+
|
|
|
|
+ const rotateData = (data: any, mat: Matrix3) => {
|
|
|
|
+ data = { ...data };
|
|
|
|
+ // mat.invert();
|
|
|
|
+ const v = new Vector2();
|
|
|
|
+ data.rooms = data.rooms.map((room) => ({
|
|
|
|
+ ...room,
|
|
|
|
+ points: room.points.map((point) => {
|
|
|
|
+ v.set(point.x, point.y);
|
|
|
|
+ v.applyMatrix3(mat);
|
|
|
|
+ return {
|
|
|
|
+ ...point,
|
|
|
|
+ x: v.x,
|
|
|
|
+ y: v.y,
|
|
|
|
+ };
|
|
|
|
+ }),
|
|
|
|
+ }));
|
|
|
|
+ // {x: -1.0303030014038086, y: 2.282296130361026e-16, z: -3.7272729873657227}
|
|
|
|
+ // x
|
|
|
|
+ // 1.5097999572753906
|
|
|
|
+ // 2.042250156402588
|
|
|
|
+ data.pois = data.pois.map((poi) => {
|
|
|
|
+ v.set(poi.x, poi.y);
|
|
|
|
+ v.applyMatrix3(mat);
|
|
|
|
+ return {
|
|
|
|
+ ...poi,
|
|
|
|
+ x: v.x,
|
|
|
|
+ y: v.y,
|
|
|
|
+ };
|
|
|
|
+ });
|
|
|
|
+ return data;
|
|
|
|
+ };
|
|
|
|
|
|
// const prevMat:
|
|
// const prevMat:
|
|
- return {
|
|
|
|
|
|
+ const ret = {
|
|
...board,
|
|
...board,
|
|
bus,
|
|
bus,
|
|
|
|
+ setData(data, { angle, center } = { angle: 0, center: new Vector3() }) {
|
|
|
|
+ // console.log(angle, center);
|
|
|
|
+ // center.x = 1.5097999572753906;
|
|
|
|
+ // center.z = -2.042250156402588;
|
|
|
|
+ centerR = center;
|
|
|
|
+ rotationZ = -angle;
|
|
|
|
+ center = new Vector3(-center.x, center.y, -center.z);
|
|
|
|
+ setMat
|
|
|
|
+ .identity()
|
|
|
|
+ .multiply(new Matrix3().makeTranslation(-center.x, -center.z))
|
|
|
|
+ .multiply(new Matrix3().makeRotation(rotationZ))
|
|
|
|
+ .multiply(new Matrix3().makeTranslation(center.x, center.z));
|
|
|
|
+
|
|
|
|
+ return board.setData(rotateData(data, setMat));
|
|
|
|
+ },
|
|
|
|
+ getData() {
|
|
|
|
+ return rotateData(board.getData(), setMat.clone().invert());
|
|
|
|
+ },
|
|
blurPoi() {
|
|
blurPoi() {
|
|
if (activePoi) {
|
|
if (activePoi) {
|
|
activePoi.bus.emit("shapeStatusChange", {
|
|
activePoi.bus.emit("shapeStatusChange", {
|
|
@@ -118,7 +173,11 @@ export const createBoard = (
|
|
} as any);
|
|
} as any);
|
|
board.history.clear();
|
|
board.history.clear();
|
|
},
|
|
},
|
|
- setCamera(camera: OrthographicCamera) {
|
|
|
|
|
|
+ setCamera(camera: OrthographicCamera, center: Vector3) {
|
|
|
|
+ center = center || centerR;
|
|
|
|
+ cameraR = camera;
|
|
|
|
+ if (!board.bound.bound) return;
|
|
|
|
+
|
|
// // -1 - 1转到屏幕
|
|
// // -1 - 1转到屏幕
|
|
// const bound = board.bound.bound;
|
|
// const bound = board.bound.bound;
|
|
// const realWidth = bound[2] - bound[0];
|
|
// const realWidth = bound[2] - bound[0];
|
|
@@ -159,8 +218,11 @@ export const createBoard = (
|
|
.invert();
|
|
.invert();
|
|
|
|
|
|
const tStageMat = prevMat.clone().multiply(temp);
|
|
const tStageMat = prevMat.clone().multiply(temp);
|
|
|
|
+ rotationZ = board.bound.rotateZ = camera.rotation.z;
|
|
board.bound.setCameraMat(tStageMat.toArray());
|
|
board.bound.setCameraMat(tStageMat.toArray());
|
|
|
|
+ // board.tree.stage.position(camera.position);
|
|
|
|
|
|
|
|
+ // console.log(camera, center, MathUtils.radToDeg(rotationZ));
|
|
board.bound.bus.on("cameraChange", () => {
|
|
board.bound.bus.on("cameraChange", () => {
|
|
const cameraMat = board.bound.cameraMat
|
|
const cameraMat = board.bound.cameraMat
|
|
.clone()
|
|
.clone()
|
|
@@ -170,6 +232,8 @@ export const createBoard = (
|
|
|
|
|
|
cameraMat.decompose(camera.position, camera.quaternion, camera.scale);
|
|
cameraMat.decompose(camera.position, camera.quaternion, camera.scale);
|
|
});
|
|
});
|
|
|
|
+
|
|
|
|
+ // console.log(ret.getData());
|
|
},
|
|
},
|
|
showPois() {
|
|
showPois() {
|
|
if (!board.tree.entrys.pois) return;
|
|
if (!board.tree.entrys.pois) return;
|
|
@@ -193,6 +257,7 @@ export const createBoard = (
|
|
pois.forEach((poi) => poi.setShowLabel(false));
|
|
pois.forEach((poi) => poi.setShowLabel(false));
|
|
},
|
|
},
|
|
addPoi(type: string) {
|
|
addPoi(type: string) {
|
|
|
|
+ console.error(type);
|
|
if (!pois()) {
|
|
if (!pois()) {
|
|
const data = board.getData();
|
|
const data = board.getData();
|
|
data.pois = [];
|
|
data.pois = [];
|
|
@@ -219,9 +284,12 @@ export const createBoard = (
|
|
mount(dom: HTMLDivElement) {
|
|
mount(dom: HTMLDivElement) {
|
|
board.mount(dom);
|
|
board.mount(dom);
|
|
board.bound.setSize(dom.offsetWidth, dom.offsetHeight);
|
|
board.bound.setSize(dom.offsetWidth, dom.offsetHeight);
|
|
|
|
+ ret.setCamera(cameraR, centerR);
|
|
},
|
|
},
|
|
get room() {
|
|
get room() {
|
|
return getRoom();
|
|
return getRoom();
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
+
|
|
|
|
+ return ret;
|
|
};
|
|
};
|