Skip to content

Commit ee58975

Browse files
NeosoulinkNeosoulink
committed
refactor: use proper reactive example
1 parent 52f307a commit ee58975

File tree

7 files changed

+60
-126
lines changed

7 files changed

+60
-126
lines changed

‎samples/with-reactive/index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<title>Vite + TS</title>
88
</head>
99
<body>
10-
<div id="app"></div>
1110
<script type="module" src="/src/main.ts"></script>
1211
</body>
1312
</html>

‎samples/with-reactive/package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,13 @@
99
"preview": "vite preview"
1010
},
1111
"devDependencies": {
12+
"@types/three": "^0.166.0",
1213
"typescript": "^5.2.2",
1314
"vite": "^5.3.1"
15+
},
16+
"dependencies": {
17+
"@quick-threejs/reactive": "workspace:*",
18+
"lil-gui": "^0.19.1",
19+
"three": "^0.166.1"
1420
}
1521
}

‎samples/with-reactive/src/counter.ts

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎samples/with-reactive/src/main.ts

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
1-
import "./style.css";
2-
import typescriptLogo from "./typescript.svg";
3-
import viteLogo from "/vite.svg";
4-
import { setupCounter } from "./counter.ts";
1+
import { register } from "@quick-threejs/reactive";
52

6-
document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
7-
<div>
8-
<a href="https://vitejs.dev" target="_blank">
9-
<img src="${viteLogo}" class="logo" alt="Vite logo" />
10-
</a>
11-
<a href="https://www.typescriptlang.org/" target="_blank">
12-
<img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
13-
</a>
14-
<h1>Vite + TypeScript</h1>
15-
<div class="card">
16-
<button id="counter" type="button"></button>
17-
</div>
18-
<p class="read-the-docs">
19-
Click on the Vite and TypeScript logos to learn more
20-
</p>
21-
</div>
22-
`;
3+
import "./style.css";
234

24-
setupCounter(document.querySelector<HTMLButtonElement>("#counter")!);
5+
register({
6+
location: new URL("./main.worker.ts", import.meta.url) as unknown as string,
7+
enableDebug: true,
8+
axesSizes: 5,
9+
gridSizes: 10,
10+
withMiniCamera: true,
11+
onReady: (app) => {
12+
app
13+
.gui()
14+
?.add({ torusX: 0 }, "torusX")
15+
.step(0.01)
16+
.onChange((value: any) => {
17+
app.worker()?.postMessage({ type: "torus-x-gui-event", value });
18+
});
19+
}
20+
});

‎samples/with-reactive/src/main.worker.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { launchApp } from "@quick-threejs/reactive/worker";
2+
import { Color, Mesh, MeshNormalMaterial, TorusKnotGeometry } from "three";
3+
4+
launchApp({
5+
onReady: (app) => {
6+
const torus = new Mesh(new TorusKnotGeometry(), new MeshNormalMaterial());
7+
8+
self.onmessage = (event: MessageEvent) => {
9+
if (event.data?.type === "torus-x-gui-event") {
10+
torus.position.x = event.data.value;
11+
}
12+
};
13+
14+
app.world.scene().background = new Color("#211d20");
15+
16+
app.world.scene().add(torus);
17+
18+
app.resize$?.().subscribe((event) => {
19+
console.log(event.type);
20+
});
21+
22+
app.wheel$?.().subscribe((event) => {
23+
console.log(event.type);
24+
});
25+
26+
app.timer.step$().subscribe(() => {
27+
torus.rotateY(0.05);
28+
torus.rotateX(0.001);
29+
});
30+
}
31+
});

‎samples/with-reactive/src/style.css

Lines changed: 5 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,8 @@
1-
:root {
2-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
5-
6-
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
9-
10-
font-synthesis: none;
11-
text-rendering: optimizeLegibility;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
14-
}
15-
16-
a {
17-
font-weight: 500;
18-
color: #646cff;
19-
text-decoration: inherit;
20-
}
21-
a:hover {
22-
color: #535bf2;
23-
}
24-
1+
tml,
252
body {
263
margin: 0;
27-
display: flex;
28-
place-items: center;
29-
min-width: 320px;
30-
min-height: 100vh;
31-
}
32-
33-
h1 {
34-
font-size: 3.2em;
35-
line-height: 1.1;
36-
}
37-
38-
#app {
39-
max-width: 1280px;
40-
margin: 0 auto;
41-
padding: 2rem;
42-
text-align: center;
43-
}
44-
45-
.logo {
46-
height: 6em;
47-
padding: 1.5em;
48-
will-change: filter;
49-
transition: filter 300ms;
50-
}
51-
.logo:hover {
52-
filter: drop-shadow(0 0 2em #646cffaa);
53-
}
54-
.logo.vanilla:hover {
55-
filter: drop-shadow(0 0 2em #3178c6aa);
56-
}
57-
58-
.card {
59-
padding: 2em;
60-
}
61-
62-
.read-the-docs {
63-
color: #888;
64-
}
65-
66-
button {
67-
border-radius: 8px;
68-
border: 1px solid transparent;
69-
padding: 0.6em 1.2em;
70-
font-size: 1em;
71-
font-weight: 500;
72-
font-family: inherit;
73-
background-color: #1a1a1a;
74-
cursor: pointer;
75-
transition: border-color 0.25s;
76-
}
77-
button:hover {
78-
border-color: #646cff;
79-
}
80-
button:focus,
81-
button:focus-visible {
82-
outline: 4px auto -webkit-focus-ring-color;
83-
}
84-
85-
@media (prefers-color-scheme: light) {
86-
:root {
87-
color: #213547;
88-
background-color: #ffffff;
89-
}
90-
a:hover {
91-
color: #747bff;
92-
}
93-
button {
94-
background-color: #f9f9f9;
95-
}
4+
padding: 0;
5+
top: 0;
6+
left: 0;
7+
overflow: hidden;
968
}

‎samples/with-reactive/src/typescript.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)