Skip to content

Commit d3746fc

Browse files
matas-bitbybit-devmatas-bitbybit-dev
committed
update hex shell babylonjs project
1 parent 1809d01 commit d3746fc

File tree

17 files changed

+1589
-568
lines changed

17 files changed

+1589
-568
lines changed

‎examples/vite/babylonjs/hex-shell/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Bitbybit & ThreeJS CAD Example</title>
7+
<title>Bitbybit & ThreeJS All Kernels Example</title>
88
</head>
99
<body>
1010
<a
@@ -21,7 +21,7 @@
2121
<br />
2222
<div>support the mission - subscribe</div>
2323
</a>
24-
<div id="app"></div>
24+
<canvas id="babylon-canvas"> </canvas>
2525
<script type="module" src="/src/main.ts"></script>
2626
</body>
2727
</html>

‎examples/vite/babylonjs/hex-shell/package-lock.json‎

Lines changed: 1082 additions & 215 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/vite/babylonjs/hex-shell/src/helpers/create-gui.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import GUI from "lil-gui";
2+
import type { Current, Model } from "../models";
3+
import { Color3, PBRMetallicRoughnessMaterial } from "@babylonjs/core";
4+
5+
export const createGui = (
6+
current: Current,
7+
model: Model,
8+
updateShape: (lod: boolean) => void
9+
) => {
10+
model.update = () => updateShape(true);
11+
const gui = new GUI();
12+
current.gui = gui;
13+
gui.$title.innerHTML = "Pattern";
14+
15+
gui
16+
.add(model, "uHex", 1, 14, 1)
17+
.name("Hexagons U")
18+
.onFinishChange((value: number) => {
19+
model.uHex = value;
20+
updateShape(false);
21+
});
22+
23+
gui
24+
.add(model, "vHex", 8, 36, 2)
25+
.name("Hexagons V")
26+
.onFinishChange((value: number) => {
27+
model.vHex = value;
28+
updateShape(false);
29+
});
30+
31+
gui
32+
.add(model, "height", 15, 25, 1)
33+
.name("Height")
34+
.onFinishChange((value: number) => {
35+
model.height = value;
36+
updateShape(false);
37+
});
38+
39+
gui
40+
.add(model, "ellipse2RotX", 0, 15, 0.1)
41+
.name("Angle Guide")
42+
.onFinishChange((value: number) => {
43+
model.ellipse2RotX = value;
44+
updateShape(false);
45+
});
46+
47+
gui
48+
.add(model, "finalPrecision", 0.01, 1, 0.01)
49+
.name("Final Precision")
50+
.onFinishChange((value: number) => {
51+
model.finalPrecision = value;
52+
});
53+
54+
gui
55+
.add(model, "rotationEnabled")
56+
.name("Rotation Enabled")
57+
.onFinishChange((value: boolean) => {
58+
model.rotationEnabled = value;
59+
});
60+
61+
gui
62+
.add(model, "drawEdges")
63+
.name("Draw Edges")
64+
.onFinishChange((value: boolean) => {
65+
model.drawEdges = value;
66+
});
67+
68+
gui
69+
.addColor(model, "color1")
70+
.name("Color 1")
71+
.onChange((value: string) => {
72+
current.group1?.getChildren().forEach((c1) => {
73+
const children = c1.getChildMeshes();
74+
const mat = children[0].material as PBRMetallicRoughnessMaterial;
75+
mat.baseColor = Color3.FromHexString(value);
76+
});
77+
});
78+
79+
gui
80+
.addColor(model, "color2")
81+
.name("Color 2")
82+
.onChange((value: string) => {
83+
current.group2?.getChildren().forEach((c1) => {
84+
const children = c1.getChildMeshes();
85+
const mat = children[0].material as PBRMetallicRoughnessMaterial;
86+
mat.baseColor = Color3.FromHexString(value);
87+
});
88+
});
89+
90+
gui.add(model, "update").name("Finalize");
91+
gui.add(model, "downloadSTL").name("Download STL");
92+
gui.add(model, "downloadStep").name("Download STEP");
93+
gui.add(model, "downloadGLB").name("Download GLB");
94+
};

examples/vite/babylonjs/hex-shell/src/create-shape.ts renamed to examples/vite/babylonjs/hex-shell/src/helpers/create-shape.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import type { BitByBitBase } from '@bitbybit-dev/babylonjs';
1+
import type { BitByBitBase } from "@bitbybit-dev/babylonjs";
22
import {
33
Color3,
44
Mesh,
55
PBRMetallicRoughnessMaterial,
66
Scene,
7-
} from '@babylonjs/core';
8-
import { Inputs } from '@bitbybit-dev/babylonjs';
9-
import type { Current } from './models/current';
10-
import type { Model } from './models/model';
7+
} from "@babylonjs/core";
8+
import { Inputs } from "@bitbybit-dev/babylonjs";
9+
import type { Current } from "../models/current";
10+
import type { Model } from "../models/model";
1111

1212
export const createShapeLod2 = async (
1313
bitbybit: BitByBitBase | undefined,
@@ -296,10 +296,10 @@ export const createShapeLod2 = async (
296296
options.drawFaces = model.drawFaces;
297297
options.drawVertices = false;
298298
options.edgeWidth = 20;
299-
options.edgeColour = '#000000';
299+
options.edgeColour = "#000000";
300300

301301
const mat = new PBRMetallicRoughnessMaterial(
302-
'mat1',
302+
"mat1",
303303
bitbybit.context.scene
304304
);
305305
mat.baseColor = Color3.FromHexString(model.color1);
@@ -313,7 +313,7 @@ export const createShapeLod2 = async (
313313
);
314314

315315
const mat2 = new PBRMetallicRoughnessMaterial(
316-
'mat2',
316+
"mat2",
317317
bitbybit.context.scene
318318
);
319319
mat2.baseColor = Color3.FromHexString(model.color2);
@@ -329,10 +329,10 @@ export const createShapeLod2 = async (
329329
const groups1 = await Promise.all(groups1Promises);
330330
const groups2 = await Promise.all(groups2Promises);
331331

332-
const group1 = new Mesh('group1', bitbybit.context.scene);
332+
const group1 = new Mesh("group1", bitbybit.context.scene);
333333
groups1.forEach((g) => (g.parent = group1));
334334

335-
const group2 = new Mesh('group2', bitbybit.context.scene);
335+
const group2 = new Mesh("group2", bitbybit.context.scene);
336336
groups2.forEach((g) => (g.parent = group2));
337337

338338
current.group1 = group1;
@@ -420,9 +420,9 @@ export const createShapeLod1 = async (
420420
options.drawVertices = false;
421421
options.edgeWidth = 30;
422422

423-
options.edgeColour = '#ff00ff';
423+
options.edgeColour = "#ff00ff";
424424

425-
const mat = new PBRMetallicRoughnessMaterial('mat', bitbybit.context.scene);
425+
const mat = new PBRMetallicRoughnessMaterial("mat", bitbybit.context.scene);
426426
mat.baseColor = Color3.FromHexString(model.color1);
427427
mat.zOffset = 2;
428428
mat.backFaceCulling = false;
@@ -433,7 +433,7 @@ export const createShapeLod1 = async (
433433
});
434434

435435
const mat2 = new PBRMetallicRoughnessMaterial(
436-
'mat2',
436+
"mat2",
437437
bitbybit.context.scene
438438
);
439439
mat2.baseColor = Color3.FromHexString(model.color2);
@@ -446,7 +446,7 @@ export const createShapeLod1 = async (
446446
});
447447

448448
const dimOpt = new Inputs.Draw.DrawOcctShapeOptions();
449-
dimOpt.edgeColour = '#000000';
449+
dimOpt.edgeColour = "#000000";
450450
dimOpt.edgeWidth = 20;
451451
dimOpt.drawFaces = false;
452452
const dimensionsGroup = await bitbybit.draw.drawAnyAsync({
@@ -457,10 +457,10 @@ export const createShapeLod1 = async (
457457

458458
// just to match chunked data structure of LOD2
459459

460-
const group1 = new Mesh('group1', bitbybit.context.scene);
460+
const group1 = new Mesh("group1", bitbybit.context.scene);
461461
grp1.parent = group1;
462462

463-
const group2 = new Mesh('group2', bitbybit.context.scene);
463+
const group2 = new Mesh("group2", bitbybit.context.scene);
464464
grp2.parent = group2;
465465

466466
current.group1 = group1;
@@ -550,7 +550,7 @@ async function createDimensions(
550550
linearOptions.labelSize = 3;
551551
linearOptions.labelOffset = 3;
552552
linearOptions.crossingSize = 1;
553-
linearOptions.labelSuffix = '(m)';
553+
linearOptions.labelSuffix = "(m)";
554554
const dimLength = await dimensions.simpleLinearLengthDimension(linearOptions);
555555
shapesToClean.push(dimLength);
556556

‎examples/vite/babylonjs/hex-shell/src/helpers/downloads.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import type { BitByBitBase, Inputs } from "@bitbybit-dev/babylonjs";
2+
3+
export const downloadStep = async (
4+
bitbybit: BitByBitBase,
5+
finalShape: Inputs.OCCT.TopoDSShapePointer | undefined
6+
) => {
7+
if (bitbybit && finalShape) {
8+
await bitbybit.occt.io.saveShapeSTEP({
9+
shape: finalShape,
10+
fileName: "shape",
11+
adjustYtoZ: true,
12+
tryDownload: true,
13+
});
14+
}
15+
};
16+
17+
export const downloadSTL = (
18+
bitbybit: BitByBitBase,
19+
finalShape: Inputs.OCCT.TopoDSShapePointer | undefined
20+
) => {
21+
if (bitbybit && finalShape) {
22+
bitbybit.occt.io.saveShapeStl({
23+
fileName: "bitbybit-hex-shell.stl",
24+
shape: finalShape,
25+
adjustYtoZ: true,
26+
tryDownload: true,
27+
precision: 0.01,
28+
});
29+
}
30+
};
31+
32+
export const downloadGLB = (bitbybit: BitByBitBase) => {
33+
if (bitbybit) {
34+
bitbybit.babylon.io.exportGLB({
35+
fileName: "bitbybit-hex-shell.glb",
36+
discardSkyboxAndGrid: true,
37+
});
38+
}
39+
};

‎examples/vite/babylonjs/hex-shell/src/helpers/gui-helper.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export function disableGUI() {
2+
const lilGui = document.getElementsByClassName("lil-gui")[0] as HTMLElement;
3+
lilGui.style.pointerEvents = "none";
4+
lilGui.style.opacity = "0.5";
5+
}
6+
7+
export function enableGUI() {
8+
const lilGui = document.getElementsByClassName("lil-gui")[0] as HTMLElement;
9+
lilGui.style.pointerEvents = "all";
10+
lilGui.style.opacity = "1";
11+
}
12+
13+
export function showSpinner() {
14+
const element = document.createElement("div");
15+
element.id = "spinner";
16+
element.className = "lds-ellipsis";
17+
element.innerHTML = `
18+
<div></div>
19+
<div></div>
20+
<div></div>
21+
`;
22+
23+
document.body.appendChild(element);
24+
}
25+
26+
export function hideSpinner() {
27+
const el = document.getElementById("spinner");
28+
if (el) {
29+
el.remove();
30+
}
31+
}

‎examples/vite/babylonjs/hex-shell/src/helpers/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export * from "./create-gui";
2+
export * from "./create-shape";
3+
export * from "./init-kernels";
4+
export * from "./init-babylonjs";
5+
export * from "./downloads";
6+
export * from "./gui-helper";
7+
export * from "./downloads";

‎examples/vite/babylonjs/hex-shell/src/helpers/init-babylonjs.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import {
2+
Scene,
3+
TransformNode,
4+
ArcRotateCamera,
5+
Vector3,
6+
HemisphericLight,
7+
Color3,
8+
Engine,
9+
Color4,
10+
Light,
11+
MeshBuilder,
12+
PBRMetallicRoughnessMaterial,
13+
} from "@babylonjs/core";
14+
import type { Current } from "../models";
15+
import { Inputs, type BitByBitBase } from "@bitbybit-dev/babylonjs";
16+
17+
export function initBabylonJS() {
18+
const canvas = document.getElementById("babylon-canvas") as HTMLCanvasElement;
19+
canvas.addEventListener("wheel", (evt) => evt.preventDefault());
20+
const engine = new Engine(canvas, true);
21+
engine.setHardwareScalingLevel(0.5);
22+
const scene = new Scene(engine);
23+
scene.clearColor = Color4.FromHexString("#8888ff");
24+
new TransformNode("root", scene);
25+
const camera = new ArcRotateCamera(
26+
"Camera",
27+
0,
28+
10,
29+
10,
30+
new Vector3(0, 0, 0),
31+
scene
32+
);
33+
const camPos = new Vector3(150, 15, 60);
34+
camera.setPosition(camPos);
35+
const camTarget = new Vector3(0, 5, 0);
36+
camera.setTarget(camTarget);
37+
camera.attachControl(canvas, true);
38+
camera.lowerRadiusLimit = 0;
39+
camera.minZ = 3;
40+
const light = new HemisphericLight("HemiLight", new Vector3(0, 1, 0), scene);
41+
light.intensityMode = Light.INTENSITYMODE_ILLUMINANCE;
42+
light.intensity = 1;
43+
44+
scene.ambientColor = Color3.FromHexString("#ffffff");
45+
scene.metadata = { shadowGenerators: [] };
46+
47+
window.onresize = () => {
48+
engine.resize();
49+
};
50+
51+
return { scene, engine, camera };
52+
}
53+
54+
export function createDirLightsAndGround(
55+
bitbybit: BitByBitBase,
56+
current: Current
57+
) {
58+
const dirLightOpt = new Inputs.BabylonScene.DirectionalLightDto();
59+
dirLightOpt.intensity = 3;
60+
dirLightOpt.shadowGeneratorMapSize = 4000;
61+
dirLightOpt.shadowBias = 0.001;
62+
dirLightOpt.direction = [50, -50, -100];
63+
bitbybit.babylon.scene.drawDirectionalLight(dirLightOpt);
64+
65+
const matGround = new PBRMetallicRoughnessMaterial("ground");
66+
matGround.baseColor = Color3.FromHexString("#8888ff");
67+
matGround.zOffset = 2;
68+
const ground = MeshBuilder.CreateCylinder("ground", {
69+
diameter: 250,
70+
height: 3,
71+
tessellation: 300,
72+
});
73+
ground.position.y = -1.5;
74+
ground.material = matGround;
75+
ground.receiveShadows = true;
76+
current.ground = ground;
77+
}

0 commit comments

Comments
 (0)