mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-17 04:35:23 +00:00
remove unuse components
This commit is contained in:
Qiuxia Fan
parent
9c7911874f
commit
fe288647d6
@ -1,29 +0,0 @@
|
||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
contributor license agreements. See the NOTICE file distributed with
|
||||
this work for additional information regarding copyright ownership.
|
||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
(the "License"); you may not use this file except in compliance with
|
||||
the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="Infrastructure">
|
||||
<InfrastructureMap />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import InfrastructureMap from "./InfrastructureMap.vue";
|
||||
</script>
|
||||
<style scoped>
|
||||
.Infrastructure {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,338 +0,0 @@
|
||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
contributor license agreements. See the NOTICE file distributed with
|
||||
this work for additional information regarding copyright ownership.
|
||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
(the "License"); you may not use this file except in compliance with
|
||||
the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="infrastructure-box">
|
||||
<div ref="mapRef" class="map"></div>
|
||||
<div class="info-box" v-show="showInfo">
|
||||
{{ NodeTypes[type] }} Information
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as THREE from "three";
|
||||
import fac from "three-orbit-controls";
|
||||
import { Line2 } from "three/examples/jsm/lines/Line2";
|
||||
import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
|
||||
import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
|
||||
import { HexagonCreateParams } from "@/types/infrastructure";
|
||||
import HexagonPillar from "./geometry/hexagon-pillar";
|
||||
import { Layout } from "./geometry/hexagon-layout";
|
||||
import { NodeTypes } from "./data";
|
||||
|
||||
const animateCallbacks: Array<() => void> = [];
|
||||
const showInfo = ref<boolean>(false);
|
||||
const objSelected = ref<any>(null);
|
||||
const meshColors = ref([0xa1cffb, 0x333333, 0x333840, 0x999999]); //[0xa489b2, 0xf2bfd0, 0xf0eaea, 0xef6775, 0xfbc580];
|
||||
const type = ref<number>(0);
|
||||
const width = ref<number>(1920);
|
||||
const height = ref<number>(900);
|
||||
const mapRef = ref<HTMLDivElement | null>(null);
|
||||
let lineObj: any;
|
||||
let scene: any;
|
||||
let camera: any;
|
||||
let raycaster: any;
|
||||
let pointer: any;
|
||||
|
||||
onMounted(() => {
|
||||
if (mapRef.value) {
|
||||
init(mapRef.value);
|
||||
}
|
||||
window.addEventListener("click", onMouseClick, false);
|
||||
animate();
|
||||
});
|
||||
|
||||
function init(dom: HTMLDivElement): void {
|
||||
width.value = dom.offsetWidth;
|
||||
height.value = dom.offsetHeight + 74;
|
||||
camera = new THREE.PerspectiveCamera(
|
||||
45,
|
||||
width.value / height.value,
|
||||
1,
|
||||
10000
|
||||
);
|
||||
camera.position.set(0, 30, 140);
|
||||
scene = new THREE.Scene();
|
||||
let light = new THREE.DirectionalLight(0xffffff, 0.8);
|
||||
light.position.set(4, 10, 4);
|
||||
|
||||
scene.add(light);
|
||||
scene.add(new THREE.AmbientLight(0x404040));
|
||||
scene.background = new THREE.Color(0x333840);
|
||||
const renderer = new THREE.WebGLRenderer({
|
||||
antialias: true,
|
||||
alpha: true,
|
||||
});
|
||||
renderer.setSize(width.value, height.value);
|
||||
dom.appendChild(renderer.domElement);
|
||||
|
||||
const window = Window as any;
|
||||
const OrbitControls = fac(THREE);
|
||||
window.controls = new OrbitControls(camera, renderer.domElement);
|
||||
window.controls.enableZoom = true;
|
||||
window.controls.enablePan = true;
|
||||
|
||||
const helper = new THREE.GridHelper(10000, 40, 0x04002c, 0x04002c);
|
||||
helper.position.y = -1000;
|
||||
// this.scene.add(helper);
|
||||
// const axis = new THREE.AxesHelper(15000);
|
||||
// this.scene.add(axis);
|
||||
// add mesh
|
||||
createInfrastructure();
|
||||
|
||||
raycaster = new THREE.Raycaster();
|
||||
pointer = new THREE.Vector2();
|
||||
animateCallbacks.push(() => {
|
||||
renderer.render(scene, camera);
|
||||
});
|
||||
}
|
||||
|
||||
function createInfrastructure() {
|
||||
//layer mesh
|
||||
const l = {
|
||||
hexagonParam: [27, 0.04, 5, 0.04, 0],
|
||||
count: 1,
|
||||
radius: 28, // layout hexagons radius
|
||||
};
|
||||
const [originVectors] = createHexagonLine(l, [0, 0, 0], 0);
|
||||
// group mesh
|
||||
const g: HexagonCreateParams = {
|
||||
hexagonParam: [8, 0.04, 5, 0.04, 0.01],
|
||||
count: 1,
|
||||
radius: 8.5,
|
||||
};
|
||||
const [gVecs] = createPillarMesh(g, originVectors, 1);
|
||||
// service mesh
|
||||
const s: HexagonCreateParams = {
|
||||
hexagonParam: [2, 0.04, 5, 0.04, 0.2],
|
||||
count: 1,
|
||||
radius: 2.2,
|
||||
};
|
||||
const [sVecs] = createPillarMesh(s, gVecs, 2);
|
||||
|
||||
// instance mesh
|
||||
const i: HexagonCreateParams = {
|
||||
hexagonParam: [0.2, 0.04, 5, 0.04, 0.3],
|
||||
count: 2,
|
||||
radius: 0.3,
|
||||
};
|
||||
createPillarMesh(i, sVecs, 3);
|
||||
}
|
||||
|
||||
function createHexagonLine(
|
||||
p: HexagonCreateParams,
|
||||
originVectors: number[],
|
||||
type: number
|
||||
) {
|
||||
lineObj = new THREE.Object3D();
|
||||
const centers: number[] = [];
|
||||
const geo = HexagonPillar.getVertices(false, ...p.hexagonParam);
|
||||
|
||||
for (let i = 0; i < originVectors.length / 3; i++) {
|
||||
const c = [originVectors[3 * i], originVectors[3 * i + 2]];
|
||||
const [origins] = hexGrid(p.count, p.radius, c);
|
||||
centers.push(...origins);
|
||||
}
|
||||
for (let c = 0; c < centers.length / 3; c++) {
|
||||
const vertices = [];
|
||||
for (let v = 0; v < geo.vertices.length; v++) {
|
||||
vertices.push(
|
||||
centers[3 * c] + geo.vertices[v].x,
|
||||
centers[3 * c + 1] + geo.vertices[v].y,
|
||||
centers[3 * c + 2] + geo.vertices[v].z
|
||||
);
|
||||
}
|
||||
const geometry = new LineGeometry().setPositions(vertices);
|
||||
geometry.setAttribute(
|
||||
"id",
|
||||
new THREE.BufferAttribute(new Int8Array([type]), 1)
|
||||
);
|
||||
const material = new LineMaterial({
|
||||
color: meshColors.value[type],
|
||||
linewidth: 1,
|
||||
// opacity: 0.2,
|
||||
dashed: false,
|
||||
});
|
||||
material.resolution.set(width.value, height.value);
|
||||
const line = new Line2(geometry, material);
|
||||
line.computeLineDistances();
|
||||
lineObj.add(line);
|
||||
}
|
||||
scene.add(lineObj);
|
||||
return [centers];
|
||||
}
|
||||
|
||||
function createPillarMesh(
|
||||
p: HexagonCreateParams,
|
||||
originVectors: number[],
|
||||
type: number
|
||||
) {
|
||||
const centers: number[] = [];
|
||||
const geo = HexagonPillar.get(false, ...p.hexagonParam);
|
||||
|
||||
for (let i = 0; i < originVectors.length / 3; i++) {
|
||||
const c = [originVectors[3 * i], originVectors[3 * i + 2]];
|
||||
const [origins] = hexGrid(p.count, p.radius, c);
|
||||
centers.push(...origins);
|
||||
}
|
||||
const hMat = new THREE.MeshStandardMaterial({
|
||||
side: THREE.DoubleSide,
|
||||
transparent: true,
|
||||
});
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
geometry.setIndex(geo.indices);
|
||||
geometry.setAttribute(
|
||||
"position",
|
||||
new THREE.BufferAttribute(new Float32Array(geo.vertices), 3)
|
||||
);
|
||||
geometry.setAttribute(
|
||||
"normal",
|
||||
new THREE.BufferAttribute(new Float32Array(geo.normals), 3)
|
||||
);
|
||||
geometry.setAttribute(
|
||||
"type",
|
||||
new THREE.BufferAttribute(new Int8Array([type]), 1)
|
||||
);
|
||||
const mesh = new THREE.InstancedMesh(geometry, hMat, centers.length / 3);
|
||||
for (let c = 0; c < centers.length / 3; c++) {
|
||||
const matrix = new THREE.Matrix4();
|
||||
const color = new THREE.Color();
|
||||
color.setHex(meshColors.value[type]);
|
||||
for (let j = 0; j < geo.vertices.length / 3; j++) {
|
||||
matrix.setPosition(
|
||||
geo.vertices[3 * j] + centers[3 * c],
|
||||
geo.vertices[3 * j + 1] + centers[3 * c + 1],
|
||||
geo.vertices[3 * j + 2] + centers[3 * c + 2]
|
||||
);
|
||||
}
|
||||
mesh.setMatrixAt(c, matrix);
|
||||
mesh.setColorAt(c, color);
|
||||
}
|
||||
mesh.instanceMatrix.needsUpdate = true;
|
||||
scene.add(mesh);
|
||||
|
||||
return [centers];
|
||||
}
|
||||
|
||||
function hexGrid(n = 1, radius = 1, origin = [0, 0]) {
|
||||
let x, y, yn, p;
|
||||
const gLayout = new Layout(radius, origin);
|
||||
// const coord = [];
|
||||
const pos = [];
|
||||
// x = -1; n = 1.5
|
||||
for (x = -n; x <= n; x++) {
|
||||
y = Math.max(-n, -x - n); // 0
|
||||
yn = Math.min(n, -x + n); // 1
|
||||
// y = 0 yn = 1
|
||||
for (y; y <= yn; y++) {
|
||||
p = gLayout.axialToPixel(x, y);
|
||||
pos.push(p[0], 0, p[1]);
|
||||
// coord.push(x, y);
|
||||
}
|
||||
}
|
||||
return [pos];
|
||||
}
|
||||
|
||||
function onMouseClick(event: MouseEvent) {
|
||||
pointer.x = ((event.clientX - 210) / width.value) * 2 - 1;
|
||||
pointer.y = -((event.clientY - 0) / height.value) * 2 + 1;
|
||||
raycaster.setFromCamera(pointer, camera);
|
||||
let meshes = scene.children.filter((d: any) => d instanceof THREE.Mesh);
|
||||
meshes = [...meshes, ...lineObj.children];
|
||||
const intersects = raycaster.intersectObjects(meshes, true);
|
||||
const intersect = intersects[0];
|
||||
|
||||
if (objSelected.value) {
|
||||
for (const m of meshes) {
|
||||
if (m instanceof Line2) {
|
||||
m.material.color.setHex(meshColors.value[0]);
|
||||
m.material.needsUpdate = true;
|
||||
} else {
|
||||
const mType = m.geometry.getAttribute("type").array[0];
|
||||
m.setColorAt(
|
||||
objSelected.value.instanceId,
|
||||
new THREE.Color(meshColors.value[mType])
|
||||
);
|
||||
m.instanceColor.needsUpdate = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (intersect) {
|
||||
showInfo.value = true;
|
||||
if (intersect.object instanceof Line2) {
|
||||
intersect.object.material.color.setHex(0x73b3b9);
|
||||
objSelected.value = intersect;
|
||||
type.value = 0;
|
||||
intersect.object.material.needsUpdate = true;
|
||||
} else {
|
||||
intersect.object.setColorAt(
|
||||
intersect.instanceId,
|
||||
new THREE.Color(0x73b3b9)
|
||||
);
|
||||
intersect.object.instanceColor.needsUpdate = true;
|
||||
objSelected.value = intersect;
|
||||
type.value =
|
||||
objSelected.value.object.geometry.getAttribute("type").array[0];
|
||||
}
|
||||
} else {
|
||||
if (objSelected.value) {
|
||||
for (const m of meshes) {
|
||||
if (m instanceof Line2) {
|
||||
m.material.color.setHex(meshColors.value[0]);
|
||||
m.material.needsUpdate = true;
|
||||
} else {
|
||||
const mType = m.geometry.getAttribute("type").array[0];
|
||||
m.setColorAt(
|
||||
objSelected.value.instanceId,
|
||||
new THREE.Color(meshColors.value[mType])
|
||||
);
|
||||
m.instanceColor.needsUpdate = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
objSelected.value = null;
|
||||
type.value = NaN;
|
||||
showInfo.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function animate(): void {
|
||||
animateCallbacks.forEach((fn) => fn());
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.info-box {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
height: 700px;
|
||||
width: 300px;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
}
|
||||
.infrastructure-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,23 +0,0 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export const NodeTypes = [
|
||||
"Layer",
|
||||
"Group",
|
||||
"Service",
|
||||
"Service Instance",
|
||||
"endpoint",
|
||||
];
|
||||
@ -1,144 +0,0 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
class Orientation {
|
||||
public f0 = 0;
|
||||
public f1 = 0;
|
||||
public f2 = 0;
|
||||
public f3 = 0;
|
||||
public b0? = 0;
|
||||
public b1? = 0;
|
||||
public b2? = 0;
|
||||
public b3? = 0;
|
||||
public start_angle? = 0;
|
||||
constructor(
|
||||
f0: number,
|
||||
f1: number,
|
||||
f2: number,
|
||||
f3: number,
|
||||
b0: number,
|
||||
b1: number,
|
||||
b2: number,
|
||||
b3: number,
|
||||
start_angle: number
|
||||
) {
|
||||
this.f0 = f0;
|
||||
this.f1 = f1;
|
||||
this.f2 = f2;
|
||||
this.f3 = f3;
|
||||
this.b0 = b0;
|
||||
this.b1 = b1;
|
||||
this.b2 = b2;
|
||||
this.b3 = b3;
|
||||
this.start_angle = start_angle;
|
||||
}
|
||||
}
|
||||
|
||||
const SQRT3 = Math.sqrt(3.0);
|
||||
class Layout {
|
||||
static Pointy = new Orientation(
|
||||
SQRT3,
|
||||
SQRT3 / 2.0,
|
||||
0.0,
|
||||
3.0 / 2.0,
|
||||
SQRT3 / 3.0,
|
||||
-1.0 / 3.0,
|
||||
0.0,
|
||||
2.0 / 3.0,
|
||||
0.5
|
||||
);
|
||||
static Flat = new Orientation(
|
||||
3.0 / 2.0,
|
||||
0.0,
|
||||
SQRT3 / 2.0,
|
||||
SQRT3,
|
||||
2.0 / 3.0,
|
||||
0.0,
|
||||
-1.0 / 3.0,
|
||||
SQRT3 / 3.0,
|
||||
0.0
|
||||
);
|
||||
|
||||
static spacing(radius: number, isPointy = false): number[] {
|
||||
return isPointy
|
||||
? [SQRT3 * radius, 2 * radius * (3 / 4)]
|
||||
: [2 * radius * (3 / 4), SQRT3 * radius];
|
||||
}
|
||||
|
||||
private radius = 1;
|
||||
private orientation: Orientation = { f0: 0, f1: 0, f2: 0, f3: 0 };
|
||||
private origin = [0, 0];
|
||||
|
||||
constructor(radius: number, origin = [0, 0], orientation?: Orientation) {
|
||||
this.radius = radius; //Layout.spacing( radius, ( orientation === Layout.Pointy ) );
|
||||
this.orientation = orientation || Layout.Flat;
|
||||
this.origin = origin;
|
||||
}
|
||||
|
||||
// Same as HexToPixel, Except it takes raw coords instead of hex object.
|
||||
axialToPixel(ax: number, ay: number): number[] {
|
||||
const M = this.orientation;
|
||||
const x = (M.f0 * ax + M.f1 * ay) * this.radius;
|
||||
const y = (M.f2 * ax + M.f3 * ay) * this.radius;
|
||||
|
||||
return [x + this.origin[0], y + this.origin[1]];
|
||||
}
|
||||
|
||||
hexToPixel(h: { x: number; y: number }): number[] {
|
||||
const M = this.orientation;
|
||||
const x = (M.f0 * h.x + M.f1 * h.y) * this.radius;
|
||||
const y = (M.f2 * h.x + M.f3 * h.y) * this.radius;
|
||||
|
||||
return [x + this.origin[0], y + this.origin[1]];
|
||||
}
|
||||
}
|
||||
|
||||
class Hex extends Int16Array {
|
||||
constructor(x: number, y: number, z = null) {
|
||||
super(3);
|
||||
this.xyz(x, y, z);
|
||||
}
|
||||
|
||||
xyz(x: number, y: number, z: number | null = null): Hex {
|
||||
if (z == null) z = -x - y;
|
||||
if (x + y + z != 0) {
|
||||
console.log("Bad Axial Coordinate : : q %d r %d s %d", x, y, z);
|
||||
}
|
||||
|
||||
this[0] = x;
|
||||
this[1] = y;
|
||||
this[2] = z;
|
||||
return this;
|
||||
}
|
||||
|
||||
get x(): number {
|
||||
return this[0];
|
||||
}
|
||||
get y(): number {
|
||||
return this[1];
|
||||
}
|
||||
get z(): number {
|
||||
return this[2];
|
||||
}
|
||||
|
||||
get len(): number {
|
||||
return Math.floor(
|
||||
(Math.abs(this[0]) + Math.abs(this[1]) + Math.abs(this[2])) / 2
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export { Hex, Orientation, Layout };
|
||||
@ -1,281 +0,0 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import Vec3 from "@/utils/vec3";
|
||||
import Vec2 from "@/utils/vec2";
|
||||
|
||||
class HexagonPillar {
|
||||
static get(
|
||||
pointyUp = true,
|
||||
radius = 0.5,
|
||||
cornerScale = 0.2,
|
||||
cornerDiv = 3,
|
||||
capSize = 0.2,
|
||||
offsetHeight = 0.5
|
||||
): {
|
||||
vertices: number[];
|
||||
indices: number[];
|
||||
texcoord: number[];
|
||||
normals: number[];
|
||||
} {
|
||||
const rtn: {
|
||||
vertices: number[];
|
||||
indices: number[];
|
||||
texcoord: number[];
|
||||
normals: number[];
|
||||
} = {
|
||||
vertices: [],
|
||||
indices: [],
|
||||
texcoord: [],
|
||||
normals: [],
|
||||
};
|
||||
|
||||
let poly = createPolygon(radius, 6, pointyUp ? (30 * Math.PI) / 180 : 0); // Create Base Shape
|
||||
poly = polyBevel(poly, cornerScale, cornerDiv); // Round the Shape Corners
|
||||
// Base Layer
|
||||
toVec3(rtn, poly);
|
||||
const vertCnt = rtn.vertices.length / 3;
|
||||
// Starting layer for Cap.
|
||||
toVec3(rtn, poly, [0, offsetHeight, 0]);
|
||||
|
||||
// Extra Layers for Bevel
|
||||
polyCapBevel(rtn, poly, cornerDiv, capSize, [0, offsetHeight, 0]);
|
||||
const idxTip = rtn.vertices.length;
|
||||
|
||||
// Cap Center Point
|
||||
rtn.vertices.push(0, capSize + offsetHeight, 0);
|
||||
rtn.normals.push(0, 1, 0);
|
||||
|
||||
// Indices
|
||||
const idx = idxTip / 3;
|
||||
gridIndicesCol(rtn.indices, vertCnt, 2 + cornerDiv, 0, true, true);
|
||||
fanIndices(rtn.indices, idx, idx - vertCnt, idx - 1, true);
|
||||
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
return rtn;
|
||||
}
|
||||
static getVertices(pointyUp = true, radius = 0.5): { vertices: Vec3[] } {
|
||||
const rtn = {
|
||||
vertices: [],
|
||||
normals: [],
|
||||
};
|
||||
|
||||
const poly = createPolygon(radius, 6, pointyUp ? (30 * Math.PI) / 180 : 0); // Create Base Shape
|
||||
toVec3(rtn, poly);
|
||||
const vertices: any[] = [];
|
||||
for (let i = 0; i < rtn.vertices.length / 3; i++) {
|
||||
vertices.push(
|
||||
new Vec3(
|
||||
rtn.vertices[i * 3],
|
||||
rtn.vertices[i * 3 + 1],
|
||||
rtn.vertices[i * 3 + 2]
|
||||
)
|
||||
);
|
||||
}
|
||||
vertices.push(new Vec3(rtn.vertices[0], rtn.vertices[1], rtn.vertices[2]));
|
||||
return { vertices };
|
||||
}
|
||||
}
|
||||
// Create the basic 2d polygon shape
|
||||
function createPolygon(radius: number, sides = 6, offset = 0) {
|
||||
const poly: number[] = [];
|
||||
let i, rad;
|
||||
for (i = 0; i < sides; i++) {
|
||||
rad = Math.PI * 2 * (i / sides);
|
||||
poly.push(Math.cos(rad + offset) * radius, Math.sin(rad + offset) * radius);
|
||||
}
|
||||
return poly;
|
||||
}
|
||||
// Bevel the corners of polygon
|
||||
function polyBevel(poly: number[], cornerScale = 0.2, cornerDiv = 3) {
|
||||
const polyOut: number[] = [];
|
||||
const len = poly.length / 2;
|
||||
const a = new Vec2(); // 3 Points that forms a Polygon Corner
|
||||
const b = new Vec2();
|
||||
const c = new Vec2();
|
||||
|
||||
const va = new Vec2(); // Min/Max Points of the corner to bevel
|
||||
const vb = new Vec2();
|
||||
|
||||
const norma = new Vec2(); // Inward Normals of the Corner Edges
|
||||
const normb = new Vec2();
|
||||
const pivot = new Vec2(); // Pivot point to create curved points
|
||||
// eslint-disable-next-line
|
||||
const v = new Vec2() as any;
|
||||
let ii, i, j, k, radius;
|
||||
for (j = 0; j < len; j++) {
|
||||
i = mod(j - 1, len); // Previous Point
|
||||
k = mod(j + 1, len); // Next Point
|
||||
|
||||
a.fromBuf(poly, i * 2); // Get the Point Positions out of flat buffer
|
||||
b.fromBuf(poly, j * 2);
|
||||
c.fromBuf(poly, k * 2);
|
||||
|
||||
va.fromLerp(a, b, 1.0 - cornerScale); // Get the two points to start and end curved corner
|
||||
vb.fromLerp(b, c, cornerScale);
|
||||
norma.fromSub(b, a).perpCCW().norm(); // Compute Inward normal of the two edges
|
||||
normb.fromSub(c, b).perpCCW().norm();
|
||||
|
||||
raysIntersection(va, norma, vb, normb, pivot); // Point where the 2 normals converge.
|
||||
|
||||
radius = Vec2.len(va, pivot); // Get the Radius for the curved corner
|
||||
va.pushTo(polyOut);
|
||||
|
||||
for (ii = 1; ii < cornerDiv; ii++) {
|
||||
// Fill in the remaining points
|
||||
v.fromLerp(va, vb, ii / cornerDiv) // Lerp between Start + end Points
|
||||
.sub(pivot) // Localize it
|
||||
.norm() // Normalize it
|
||||
.scale(radius) // Scale it to the radius
|
||||
.add(pivot) // Move it back to world space
|
||||
.pushTo(polyOut);
|
||||
}
|
||||
vb.pushTo(polyOut);
|
||||
}
|
||||
return polyOut;
|
||||
}
|
||||
|
||||
function mod(a: number, b: number): number {
|
||||
const v = a % b;
|
||||
return v < 0 ? b + v : v;
|
||||
}
|
||||
// Turn 2D Polygon Points into 3D Vertices
|
||||
function toVec3(
|
||||
geo: { normals: number[]; vertices: number[] },
|
||||
poly: number[],
|
||||
offset?: Vec3 | number[]
|
||||
) {
|
||||
const v = new Vec3();
|
||||
// eslint-disable-next-line
|
||||
let i: any;
|
||||
offset = offset || [0, 0, 0];
|
||||
for (i of Vec2.bufIter(poly)) {
|
||||
v.fromVec2(i, true)
|
||||
.add(offset)
|
||||
.pushTo(geo.vertices)
|
||||
.sub(offset)
|
||||
.norm()
|
||||
.pushTo(geo.normals);
|
||||
}
|
||||
}
|
||||
// Create a Beveled cap for the extruded walls
|
||||
function polyCapBevel(
|
||||
geo: { normals: number[]; vertices: number[] },
|
||||
poly: number[],
|
||||
cornerDiv: number,
|
||||
capSize: number,
|
||||
offset?: Vec3 | number[]
|
||||
) {
|
||||
// eslint-disable-next-line
|
||||
const v: any = new Vec2();
|
||||
const lerp: any[] = [];
|
||||
let pivot, top, pnt, i, vlen, tlen;
|
||||
|
||||
offset = offset || [0, 0, 0];
|
||||
for (i = 0; i < poly.length; i += 2) {
|
||||
v.fromBuf(poly, i);
|
||||
|
||||
vlen = v.len();
|
||||
tlen = vlen - capSize;
|
||||
pnt = new Vec3().fromVec2(v, true);
|
||||
pivot = Vec3.scale(pnt, tlen / vlen);
|
||||
top = Vec3.add(pivot, [0, capSize, 0]);
|
||||
|
||||
lerp.push({ pivot, top, pnt });
|
||||
}
|
||||
let t, itm;
|
||||
pnt = new Vec3();
|
||||
for (i = 1; i <= cornerDiv; i++) {
|
||||
t = i / cornerDiv;
|
||||
for (itm of lerp) {
|
||||
pnt
|
||||
.fromLerp(itm.pnt, itm.top, t)
|
||||
.sub(itm.pivot)
|
||||
.norm()
|
||||
.pushTo(geo.normals)
|
||||
.scale(capSize)
|
||||
.add(itm.pivot)
|
||||
.add(offset)
|
||||
.pushTo(geo.vertices);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//https://stackoverflow.com/questions/2931573/determining-if-two-rays-intersect
|
||||
function raysIntersection(as: Vec2, ad: Vec2, bs: Vec2, bd: Vec2, out: Vec2) {
|
||||
const dx = bs[0] - as[0];
|
||||
const dy = bs[1] - as[1];
|
||||
const det = bd[0] * ad[1] - bd[1] * ad[0];
|
||||
|
||||
if (det != 0) {
|
||||
// near parallel line will yield noisy results
|
||||
const u = (dy * bd[0] - dx * bd[1]) / det;
|
||||
const v = (dy * ad[0] - dx * ad[1]) / det;
|
||||
|
||||
if (u >= 0 && v >= 0) {
|
||||
out[0] = as[0] + ad[0] * u;
|
||||
out[1] = as[1] + ad[1] * u;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
/** Generate Indices of both a Looped or Unlooped Grid, Backslash Pattern, Loops on Columns */
|
||||
function gridIndicesCol(
|
||||
out: number[],
|
||||
row_size: number,
|
||||
row_cnt: number,
|
||||
start_idx = 0,
|
||||
do_loop = false,
|
||||
rev_quad = false
|
||||
) {
|
||||
const row_stop = row_cnt - 1,
|
||||
col_stop = do_loop ? row_size : row_size - 1;
|
||||
let row_a, row_b, r, rr, rrr, a, b, c, d;
|
||||
for (r = 0; r < row_stop; r++) {
|
||||
// Figure out the starting Index for the Two Rows
|
||||
// 2nd row might loop back to starting row when Looping.
|
||||
row_a = start_idx + row_size * r;
|
||||
row_b = start_idx + row_size * (r + 1);
|
||||
for (rr = 0; rr < col_stop; rr++) {
|
||||
// Defined the Vertex Index of a Quad
|
||||
rrr = (rr + 1) % row_size;
|
||||
a = row_a + rr;
|
||||
b = row_a + rrr;
|
||||
d = row_b + rr;
|
||||
c = row_b + rrr;
|
||||
if (!rev_quad) out.push(a, b, c, c, d, a);
|
||||
// Counter ClockWise
|
||||
else out.push(a, d, c, c, b, a);
|
||||
}
|
||||
}
|
||||
}
|
||||
function fanIndices(
|
||||
out: number[],
|
||||
midIdx: number,
|
||||
edgeStart: number,
|
||||
edgeEnd: number,
|
||||
rev_quad = false
|
||||
) {
|
||||
const len = edgeEnd - edgeStart + 1;
|
||||
let i, ii;
|
||||
for (i = 0; i < len; i++) {
|
||||
ii = (i + 1) % len; // Next Point on the edge
|
||||
if (!rev_quad) out.push(midIdx, edgeStart + i, edgeStart + ii);
|
||||
// Counter ClockWise
|
||||
else out.push(midIdx, edgeStart + ii, edgeStart + i);
|
||||
}
|
||||
}
|
||||
export default HexagonPillar;
|
||||
Loading…
Reference in New Issue
Block a user