Skip to content

Commit afdbdeb

Browse files
matas-bitbybit-devmatas-bitbybit-dev
committed
introduced homepage example
1 parent 328653b commit afdbdeb

File tree

2 files changed

+114
-91
lines changed

2 files changed

+114
-91
lines changed

‎webpack/threejs/src/code/homepage.ts

+63-90
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { BitByBitBase } from "@bitbybit-dev/threejs";
33
import { OccStateEnum } from '@bitbybit-dev/occt-worker';
44
import { Inputs } from '@bitbybit-dev/threejs';
55
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
6-
import { Color, DirectionalLight, Fog, Group, HemisphereLight, Mesh, MeshPhongMaterial, PerspectiveCamera, PlaneGeometry, Scene, Vector3, VSMShadowMap, WebGLRenderer } from 'three';
6+
import { Color, DirectionalLight, Fog, Group, HemisphereLight, Mesh, MeshPhongMaterial, MeshPhysicalMaterial, PerspectiveCamera, PlaneGeometry, Scene, Vector3, VSMShadowMap, WebGLRenderer } from 'three';
77
import { GUI } from 'lil-gui';
88

99
function component() {
@@ -23,6 +23,9 @@ function component() {
2323
);
2424
}
2525

26+
let mouseX = 0;
27+
let mouseY = 0;
28+
2629
const hideSpinner = () => {
2730
const el = document.getElementById('spinner');
2831
if (el) {
@@ -37,14 +40,18 @@ function component() {
3740

3841
type Model = {
3942
numberOfRays: number,
40-
nrSubdivisions: number,
43+
widening: number,
4144
color: string,
45+
sourceCode: () => void
4246
}
4347

4448
const model = {
4549
numberOfRays: 200,
46-
nrSubdivisions: 1,
47-
color: '#0f0f0f'
50+
widening: 3,
51+
color: '#be8250',
52+
sourceCode: () => {
53+
window.open("https://github.com/bitbybit-dev/app-examples/blob/main/webpack/threejs/src/code/homepage.ts", "_blank");
54+
}
4855
} as Model;
4956

5057
let shapesToClean: Inputs.OCCT.TopoDSShapePointer[] = [];
@@ -54,7 +61,8 @@ function component() {
5461

5562
const rotateGroup = () => {
5663
if (current.group) {
57-
current.group.rotation.y += 0.005;
64+
current.group.rotation.y -= ((window.innerWidth / 2) - mouseX) / 300000;
65+
current.group.rotation.z -= ((window.innerHeight / 2) - mouseY) / 300000;
5866
}
5967
}
6068

@@ -68,8 +76,8 @@ function component() {
6876
const spiralOptions = new Inputs.Point.SpiralDto();
6977
spiralOptions.phi = 0.9;
7078
spiralOptions.numberPoints = model.numberOfRays;
71-
spiralOptions.widening = 3;
72-
spiralOptions.radius = 6;
79+
spiralOptions.widening = model.widening;
80+
spiralOptions.radius = 10;
7381
spiralOptions.factor = 1;
7482
const spiralPoints = bitbybit.point.spiral(spiralOptions)
7583

@@ -84,7 +92,7 @@ function component() {
8492

8593
const pointsAtParam = bitbybit.verb.curve.pointsAtParam({
8694
curves: rays,
87-
parameter: 0.4
95+
parameter: 0.3
8896
});
8997

9098
const spiralingLineCurves = bitbybit.line.convertLinesToNurbsCurves({
@@ -101,16 +109,16 @@ function component() {
101109
keepRemainder: false
102110
});
103111

104-
const curveScalingFactor = 1;
112+
let curveScalingFactor = 1;
105113
const curveScalingFactorCenter = 1;
106114

107115
const wiresSegmented: Promise<Inputs.OCCT.TopoDSWirePointer[]>[] = [];
108-
segmentedLineCurves.forEach((segmentedLineCurve) => {
116+
segmentedLineCurves.reverse().forEach((segmentedLineCurve, i: number) => {
109117
const wires: Promise<Inputs.OCCT.TopoDSWirePointer>[] = [];
110118
segmentedLineCurve.forEach((lineCurve: any) => {
111-
// lineCurve = bitbybit.verb.curve.reverse({
112-
// curve: lineCurve
113-
// });
119+
120+
curveScalingFactor += (10 / model.numberOfRays);
121+
114122
const pt1 = bitbybit.verb.curve.startPoint({
115123
curve: lineCurve
116124
});
@@ -132,25 +140,25 @@ function component() {
132140
parameter: 0.5,
133141
})
134142
],
135-
translation: [0, 0, 0.2 * curveScalingFactor]
143+
translation: [0, 0, i % 3 ? 0.3 : 0.4]
136144
})[0];
137145
const pt4 = bitbybit.point.translatePoints({
138146
points: [
139147
bitbybit.verb.curve.pointAtParam({
140148
curve: lineCurve,
141-
parameter: 0.99,
149+
parameter: i % 3 ? 0.99 : 1.1
142150
})
143151
],
144-
translation: [0, 0, 0.2 * curveScalingFactor]
152+
translation: [0, 0, i % 3 ? 0.15 : 0.05]
145153
})[0];
146154
const pt5 = bitbybit.point.translatePoints({
147155
points: [
148156
bitbybit.verb.curve.pointAtParam({
149157
curve: lineCurve,
150-
parameter: 0.99,
158+
parameter: i % 3 ? 0.99 : 1.1
151159
})
152160
],
153-
translation: [0, 0, -0.2 * curveScalingFactor]
161+
translation: [0, 0, i % 3 ? -0.15 : -0.05]
154162
})[0];
155163
const pt6 = bitbybit.point.translatePoints({
156164
points: [
@@ -159,7 +167,7 @@ function component() {
159167
parameter: 0.5,
160168
})
161169
],
162-
translation: [0, 0, -0.2 * curveScalingFactor]
170+
translation: [0, 0, i % 3 ? -0.3 : -0.4]
163171
})[0];
164172
const pt7 = bitbybit.point.translatePoints({
165173
points: [
@@ -183,7 +191,7 @@ function component() {
183191

184192
const segmentedWires = await Promise.all(wiresSegmented);
185193
const lofts: Promise<Inputs.OCCT.TopoDSWirePointer>[] = [];
186-
segmentedWires.forEach((wires, i) => {
194+
segmentedWires.reverse().forEach((wires, i) => {
187195
if (i > 10) {
188196
const loft = bitbybit.occt.operations.loft({
189197
shapes: wires,
@@ -194,86 +202,51 @@ function component() {
194202
});
195203

196204
const res = await Promise.all(lofts);
197-
// const thicks: Promise<Inputs.OCCT.TopoDSShapePointer>[] = [];
198-
199-
// res.forEach((r, i) => {
200-
// if (i > 10) {
201-
// const thick = bitbybit.occt.fillets.filletEdges({
202-
// shape: r,
203-
// radius: 0.005,
204-
// });
205-
// thicks.push(thick);
206-
// }
207-
// });
208-
// const thicksRes = await Promise.all(thicks);
205+
206+
window.addEventListener("mousemove", (event) => {
207+
mouseX = event.clientX;
208+
mouseY = event.clientY;
209+
});
210+
209211
finalShape = await bitbybit.occt.shapes.compound.makeCompound({
210212
shapes: res,
211213
});
212214

213215
const drawOptions = new Inputs.Draw.DrawOcctShapeOptions();
214-
const mat = new MeshPhongMaterial({ color: new Color(model.color) });
216+
const mat = new MeshPhysicalMaterial({ color: new Color(model.color) });
215217
mat.polygonOffset = true;
216218
mat.polygonOffsetFactor = 1;
217219
mat.polygonOffsetUnits = 2;
218220
mat.side = 2;
221+
mat.metalness = 0.5;
222+
mat.roughness = 0.9;
223+
mat.specularIntensity = 1;
219224
drawOptions.faceMaterial = mat;
220225
drawOptions.edgeColour = "#000000";
221-
226+
222227
const group = await bitbybit.draw.drawAnyAsync({
223228
entity: finalShape,
224229
options: drawOptions
225230
})
226231

227-
// const sphereManifold = await bitbybit.manifold.manifold.shapes.sphere({
228-
// radius: model.numberOfRays,
229-
// circularSegments: 32,
230-
// });
231-
232-
// // max has small tolerance so that strict steps would fit the interval till last item
233-
// const span = bitbybit.vector.span({
234-
// step: model.numberOfRays * 2 / (model.nrSubdivisions + 1),
235-
// min: -model.numberOfRays,
236-
// max: model.numberOfRays + 0.000001,
237-
// });
238-
239-
// const slicedManifolds = await manifold.booleans.splitByPlaneOnOffsets({
240-
// manifold: sphereManifold,
241-
// normal: [1, 1, 0.3],
242-
// originOffsets: span
243-
// });
244-
245-
// const spanTranslations = bitbybit.vector.span({
246-
// step: model.numberOfRays * 4 / slicedManifolds.length,
247-
// min: 0,
248-
// max: model.numberOfRays * 4 + 1,
249-
// });
250-
251-
// const translatedManifoldPromises: Promise<Inputs.Manifold.ManifoldPointer>[] = [];
252-
// slicedManifolds.forEach((s, i) => {
253-
// const translated = manifold.transforms.translate({
254-
// manifold: s,
255-
// vector: [0, spanTranslations[i], 0]
256-
// });
257-
// translatedManifoldPromises.push(translated);
258-
// });
259-
260-
// const translatedManifolds = await Promise.all(translatedManifoldPromises);
261-
// finalManifold = await manifold.operations.compose({
262-
// manifolds: translatedManifolds
263-
// });
264-
265232
shapesToClean = [];
266-
267-
// const options = new Inputs.Draw.DrawManifoldOrCrossSectionOptions();
268-
// drawOptions.faceColour = "#6600ff";
269-
// const group = await bitbybit.draw.drawAnyAsync({ entity: finalShape, options: drawOptions });
270-
271233
if (group) {
272234
group.children[0].children.forEach((child) => {
273235
child.castShadow = true;
274236
child.receiveShadow = true;
275237
});
276238
}
239+
240+
if (current.group) {
241+
group.rotation.x = current.group.rotation.x;
242+
group.rotation.y = current.group.rotation.y;
243+
group.rotation.z = current.group.rotation.z;
244+
245+
current.group.traverse((obj) => {
246+
scene?.remove(obj);
247+
});
248+
}
249+
277250
current.group = group;
278251

279252
}
@@ -282,9 +255,7 @@ function component() {
282255
const updateShape = async () => {
283256
showSpinner();
284257
disableGUI();
285-
current.group?.traverse((obj) => {
286-
scene?.remove(obj);
287-
});
258+
288259
await createShape(bitbybit, scene);
289260
enableGUI();
290261
hideSpinner();
@@ -315,10 +286,10 @@ function component() {
315286
}
316287

317288
const controls = new OrbitControls(camera, renderer.domElement);
318-
camera.position.set(6, 1, 6);
289+
camera.position.set(10, 1, 10);
319290

320291
controls.update();
321-
controls.target = new Vector3(0, 1, 0);
292+
controls.target = new Vector3(-55, 1, 0);
322293
controls.enableDamping = true;
323294
controls.dampingFactor = 0.1
324295
controls.zoomSpeed = 0.1;
@@ -335,8 +306,8 @@ function component() {
335306

336307
// renderer.setClearColor(new Color(0x1a1c1f), 1);
337308

338-
const dirLight = new DirectionalLight(0xffffff, 30);
339-
dirLight.position.set(-30, -50, -30);
309+
const dirLight = new DirectionalLight(0x3333ff, 30);
310+
dirLight.position.set(30, -50, 30);
340311
dirLight.castShadow = true;
341312
dirLight.shadow.camera.near = 0;
342313
dirLight.shadow.camera.far = 200;
@@ -345,16 +316,16 @@ function component() {
345316
dirLight.shadow.camera.left = - dist;
346317
dirLight.shadow.camera.top = dist;
347318
dirLight.shadow.camera.bottom = - dist;
348-
dirLight.shadow.mapSize.width = 3000;
349-
dirLight.shadow.mapSize.height = 3000;
319+
dirLight.shadow.mapSize.width = 2000;
320+
dirLight.shadow.mapSize.height = 2000;
350321
dirLight.shadow.blurSamples = 8;
351322
dirLight.shadow.radius = 2;
352323
dirLight.shadow.bias = -0.0005;
353324

354325
scene.add(dirLight);
355326

356327
const material = new MeshPhongMaterial({ color: 0x3300ff })
357-
material.shininess = 0;
328+
material.shininess = 0.3;
358329
material.specular = new Color(0x222222);
359330

360331
bitbybit.occtWorkerManager.occWorkerState$.subscribe(async s => {
@@ -397,10 +368,10 @@ function component() {
397368
});
398369

399370
gui
400-
.add(model, "nrSubdivisions", 1, 32, 1)
401-
.name("Nr Subdivisions")
371+
.add(model, "widening", 2, 5, 0.1)
372+
.name("Widening")
402373
.onFinishChange((value: number) => {
403-
model.nrSubdivisions = value;
374+
model.widening = value;
404375
updateShape();
405376
});
406377

@@ -416,6 +387,8 @@ function component() {
416387
});
417388
}
418389
})
390+
391+
const loadButton = gui.add( model, "sourceCode" );
419392
}
420393

421394
init();

0 commit comments

Comments
 (0)