|
@@ -6,11 +6,13 @@ import { getLinePoints } from "@/core/components/line/attach-server";
|
|
import {
|
|
import {
|
|
BufferGeometry,
|
|
BufferGeometry,
|
|
Color,
|
|
Color,
|
|
- DoubleSide,
|
|
|
|
ExtrudeGeometry,
|
|
ExtrudeGeometry,
|
|
|
|
+ FrontSide,
|
|
Group,
|
|
Group,
|
|
Mesh,
|
|
Mesh,
|
|
|
|
+ MeshPhongMaterial,
|
|
Shape,
|
|
Shape,
|
|
|
|
+ Vector2,
|
|
} from "three";
|
|
} from "three";
|
|
import { computed, onUnmounted, Ref, ref, watch, watchEffect } from "vue";
|
|
import { computed, onUnmounted, Ref, ref, watch, watchEffect } from "vue";
|
|
import { useDrawHook, useRender, useStageProps, useTree } from "../../hook/use-stage";
|
|
import { useDrawHook, useRender, useStageProps, useTree } from "../../hook/use-stage";
|
|
@@ -20,7 +22,6 @@ import {
|
|
useGetExtendPolygon,
|
|
useGetExtendPolygon,
|
|
} from "@/core/components/line/renderer/wall/view";
|
|
} from "@/core/components/line/renderer/wall/view";
|
|
import { BufferGeometryUtils } from "three/examples/jsm/Addons.js";
|
|
import { BufferGeometryUtils } from "three/examples/jsm/Addons.js";
|
|
-import { StablePhongMaterial } from "./material";
|
|
|
|
|
|
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
line: LineDataLine;
|
|
line: LineDataLine;
|
|
@@ -34,7 +35,7 @@ const gd = useDrawHook(() => useGetDiffLineIconPolygons(props.line, points));
|
|
const polygons = computed(() => gd.diff(polygon.value));
|
|
const polygons = computed(() => gd.diff(polygon.value));
|
|
const wallGeo = ref() as Ref<BufferGeometry>;
|
|
const wallGeo = ref() as Ref<BufferGeometry>;
|
|
const skirtingGeo = ref() as Ref<BufferGeometry>;
|
|
const skirtingGeo = ref() as Ref<BufferGeometry>;
|
|
-const skirtingHeight = 20
|
|
|
|
|
|
+const skirtingHeight = 20;
|
|
const sProps = useStageProps();
|
|
const sProps = useStageProps();
|
|
|
|
|
|
watch(
|
|
watch(
|
|
@@ -42,72 +43,103 @@ watch(
|
|
debounce(() => {
|
|
debounce(() => {
|
|
wallGeo.value && wallGeo.value.dispose();
|
|
wallGeo.value && wallGeo.value.dispose();
|
|
skirtingGeo.value && skirtingGeo.value.dispose();
|
|
skirtingGeo.value && skirtingGeo.value.dispose();
|
|
|
|
+
|
|
const polyGeos = polygons.value.map((poly) => {
|
|
const polyGeos = polygons.value.map((poly) => {
|
|
- const shape = new Shape();
|
|
|
|
- shape.moveTo(poly[0].x, poly[0].y);
|
|
|
|
- for (let i = 1; i < poly.length; i++) {
|
|
|
|
- shape.lineTo(poly[i].x, poly[i].y);
|
|
|
|
- }
|
|
|
|
- shape.lineTo(poly[poly.length - 1].x, poly[poly.length - 1].y);
|
|
|
|
- const wallGeo = new ExtrudeGeometry(shape, {
|
|
|
|
- depth: sProps.value.height,
|
|
|
|
|
|
+ const wallShape = new Shape();
|
|
|
|
+ const center = new Vector2();
|
|
|
|
+ const vs = poly.map((p, ndx) => {
|
|
|
|
+ if (ndx === 0) {
|
|
|
|
+ wallShape.moveTo(p.x, p.y);
|
|
|
|
+ } else {
|
|
|
|
+ wallShape.lineTo(p.x, p.y);
|
|
|
|
+ }
|
|
|
|
+ const v = new Vector2(p.x, p.y);
|
|
|
|
+ center.add(v);
|
|
|
|
+ return v;
|
|
|
|
+ });
|
|
|
|
+ wallShape.closePath();
|
|
|
|
+ center.divideScalar(vs.length);
|
|
|
|
+
|
|
|
|
+ const skirtingShape = new Shape();
|
|
|
|
+ vs.forEach((v, ndx) => {
|
|
|
|
+ const p = v.clone().sub(center).multiplyScalar(1.1).add(center);
|
|
|
|
+ if (ndx === 0) {
|
|
|
|
+ skirtingShape.moveTo(p.x, p.y);
|
|
|
|
+ } else {
|
|
|
|
+ skirtingShape.lineTo(p.x, p.y);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ skirtingShape.closePath();
|
|
|
|
+
|
|
|
|
+ const wallGeo = new ExtrudeGeometry(wallShape, {
|
|
|
|
+ depth: sProps.value.height - skirtingHeight,
|
|
bevelEnabled: false,
|
|
bevelEnabled: false,
|
|
steps: 1,
|
|
steps: 1,
|
|
});
|
|
});
|
|
- const skirtingGeo = new ExtrudeGeometry(shape, {
|
|
|
|
|
|
+ const skirtingGeo = new ExtrudeGeometry(skirtingShape, {
|
|
depth: skirtingHeight,
|
|
depth: skirtingHeight,
|
|
bevelEnabled: false,
|
|
bevelEnabled: false,
|
|
steps: 1,
|
|
steps: 1,
|
|
});
|
|
});
|
|
- return {wall: wallGeo, skirting: skirtingGeo};
|
|
|
|
|
|
+ return { wall: wallGeo, skirting: skirtingGeo };
|
|
});
|
|
});
|
|
|
|
|
|
- wallGeo.value = BufferGeometryUtils.mergeGeometries(polyGeos.map(item => item.wall));
|
|
|
|
|
|
+ wallGeo.value = BufferGeometryUtils.mergeGeometries(
|
|
|
|
+ polyGeos.map((item) => item.wall)
|
|
|
|
+ );
|
|
wallGeo.value.rotateX(Math.PI / 2).translate(0, sProps.value.height, 0);
|
|
wallGeo.value.rotateX(Math.PI / 2).translate(0, sProps.value.height, 0);
|
|
|
|
|
|
- skirtingGeo.value = BufferGeometryUtils.mergeGeometries(polyGeos.map(item => item.skirting));
|
|
|
|
|
|
+ skirtingGeo.value = BufferGeometryUtils.mergeGeometries(
|
|
|
|
+ polyGeos.map((item) => item.skirting)
|
|
|
|
+ );
|
|
skirtingGeo.value.rotateX(Math.PI / 2).translate(0, skirtingHeight, 0);
|
|
skirtingGeo.value.rotateX(Math.PI / 2).translate(0, skirtingHeight, 0);
|
|
|
|
|
|
polyGeos.forEach((geo) => {
|
|
polyGeos.forEach((geo) => {
|
|
- geo.wall.dispose()
|
|
|
|
- geo.skirting.dispose()
|
|
|
|
|
|
+ geo.wall.dispose();
|
|
|
|
+ geo.skirting.dispose();
|
|
});
|
|
});
|
|
}),
|
|
}),
|
|
{ immediate: true }
|
|
{ immediate: true }
|
|
);
|
|
);
|
|
|
|
|
|
-const material = new StablePhongMaterial({ side: DoubleSide });
|
|
|
|
-material.uniforms.objectId.value = props.data.lines.indexOf(props.line);
|
|
|
|
-
|
|
|
|
const render = useRender();
|
|
const render = useRender();
|
|
-watchEffect(() => {
|
|
|
|
- // material.color = new Color(props.line.stroke);
|
|
|
|
- material.color = new Color(0xffffff);
|
|
|
|
- render();
|
|
|
|
-});
|
|
|
|
|
|
|
|
const group = new Group();
|
|
const group = new Group();
|
|
-const mesh = new Mesh(undefined, material);
|
|
|
|
-mesh.castShadow = true;
|
|
|
|
-mesh.receiveShadow = true;
|
|
|
|
|
|
+const wall = new Mesh(
|
|
|
|
+ undefined,
|
|
|
|
+ new MeshPhongMaterial({ side: FrontSide, color: 0xffffff })
|
|
|
|
+);
|
|
|
|
+wall.castShadow = true;
|
|
|
|
+wall.receiveShadow = true;
|
|
|
|
+
|
|
|
|
+const skirting = new Mesh(
|
|
|
|
+ undefined,
|
|
|
|
+ new MeshPhongMaterial({ side: FrontSide, color: 0xff0000 })
|
|
|
|
+);
|
|
|
|
+
|
|
watchEffect(() => {
|
|
watchEffect(() => {
|
|
- mesh.geometry = wallGeo.value;
|
|
|
|
|
|
+ wall.geometry = wallGeo.value;
|
|
|
|
+ skirting.geometry = skirtingGeo.value;
|
|
render();
|
|
render();
|
|
});
|
|
});
|
|
|
|
|
|
-onUnmounted(() => {
|
|
|
|
- material.dispose();
|
|
|
|
- mesh.geometry?.dispose();
|
|
|
|
-});
|
|
|
|
-
|
|
|
|
watchEffect(() => {
|
|
watchEffect(() => {
|
|
if (wallGeo.value) {
|
|
if (wallGeo.value) {
|
|
- group.add(mesh);
|
|
|
|
|
|
+ group.add(wall);
|
|
|
|
+ group.add(skirting);
|
|
} else {
|
|
} else {
|
|
- group.remove(mesh);
|
|
|
|
|
|
+ group.remove(wall);
|
|
|
|
+ group.remove(skirting);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
+onUnmounted(() => {
|
|
|
|
+ wall.material.dispose();
|
|
|
|
+ wall.geometry?.dispose();
|
|
|
|
+ skirting.material.dispose();
|
|
|
|
+ skirting.geometry?.dispose();
|
|
|
|
+});
|
|
|
|
+
|
|
const tree = useTree();
|
|
const tree = useTree();
|
|
tree.value = group;
|
|
tree.value = group;
|
|
</script>
|
|
</script>
|