diff --git a/apps/web/package.json b/apps/web/package.json
index 8506422..58fc9c7 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,6 +11,13 @@
"test": "jest --passWithNoTests"
},
"devDependencies": {
- "@chess-d/configs": "workspace:*"
+ "@chess-d/configs": "workspace:*",
+ "@types/three": "^0.166.0",
+ "stats.js": "^0.17.0"
+ },
+ "dependencies": {
+ "@quick-threejs/reactive": "^0.1.9",
+ "three": "^0.166.1",
+ "tsyringe": "^4.8.0"
}
}
diff --git a/apps/web/public/typescript.svg b/apps/web/public/typescript.svg
deleted file mode 100644
index d91c910..0000000
--- a/apps/web/public/typescript.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/web/src/assets/styles/main.css b/apps/web/src/assets/styles/main.css
new file mode 100644
index 0000000..9a01f29
--- /dev/null
+++ b/apps/web/src/assets/styles/main.css
@@ -0,0 +1,8 @@
+html,
+body {
+ margin: 0;
+ padding: 0;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+}
diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
index aaf1891..c8563d2 100644
--- a/apps/web/src/main.ts
+++ b/apps/web/src/main.ts
@@ -1,5 +1,20 @@
-import "./style.css";
+import { register } from "@quick-threejs/reactive";
-document.querySelector("#app")!.innerHTML = `
- Chess-D
-`;
+import "./assets/styles/main.css";
+
+register({
+ location: new URL("./main.worker.ts", import.meta.url) as unknown as string,
+ enableDebug: true,
+ axesSizes: 5,
+ gridSizes: 10,
+ withMiniCamera: true,
+ onReady: (app) => {
+ app
+ .gui()
+ ?.add({ torusX: 0 }, "torusX")
+ .step(0.01)
+ .onChange((value: any) => {
+ app.worker()?.postMessage({ type: "torus-x-gui-event", value });
+ });
+ }
+});
diff --git a/apps/web/src/main.worker.ts b/apps/web/src/main.worker.ts
new file mode 100644
index 0000000..e224f2f
--- /dev/null
+++ b/apps/web/src/main.worker.ts
@@ -0,0 +1,46 @@
+import { launchApp } from "@quick-threejs/reactive/worker";
+import {
+ AmbientLight,
+ Color,
+ DirectionalLight,
+ Mesh,
+ MeshToonMaterial,
+ TorusKnotGeometry
+} from "three";
+
+launchApp({
+ onReady: (app) => {
+ const ambientLight = new AmbientLight(0xffffff, 0.1);
+ const directionalLight = new DirectionalLight(0xffffff, 0.8);
+ directionalLight.position.set(0, 0, 1);
+
+ const torus = new Mesh(
+ new TorusKnotGeometry(0.8, 0.35, 100, 16),
+ new MeshToonMaterial({
+ color: 0x454545
+ })
+ );
+
+ self.onmessage = (event: MessageEvent) => {
+ if (event.data?.type === "torus-x-gui-event") {
+ torus.position.x = event.data.value;
+ }
+ };
+
+ app.world.scene().background = new Color("#211d20");
+ app.world.scene().add(ambientLight, directionalLight, torus);
+
+ app.resize$?.().subscribe((event) => {
+ console.log(event.type);
+ });
+
+ app.wheel$?.().subscribe((event) => {
+ console.log(event.type);
+ });
+
+ app.timer.step$().subscribe(() => {
+ torus.rotateY(0.05);
+ torus.rotateX(0.001);
+ });
+ }
+});
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
deleted file mode 100644
index 1232080..0000000
--- a/apps/web/src/style.css
+++ /dev/null
@@ -1,97 +0,0 @@
-:root {
- font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
- font-size: 16px;
- line-height: 24px;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- -webkit-text-size-adjust: 100%;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-#app {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
-
-.logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
-}
-.logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
- filter: drop-shadow(0 0 2em #f7df1eaa);
-}
-
-.card {
- padding: 2em;
-}
-
-.read-the-docs {
- color: #888;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
diff --git a/packages/configs/typescript/base.json b/packages/configs/typescript/base.json
index 4cb2e44..d675d18 100644
--- a/packages/configs/typescript/base.json
+++ b/packages/configs/typescript/base.json
@@ -2,4 +2,7 @@
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Default",
"extends": "@quick-threejs/config/typescript.json",
+ "compilerOptions": {
+ "moduleResolution": "bundler"
+ }
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 264dcb2..87785bd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -142,10 +142,22 @@ importers:
'@quick-threejs/reactive':
specifier: ^0.1.9
version: 0.1.9
+ three:
+ specifier: ^0.166.1
+ version: 0.166.1
+ tsyringe:
+ specifier: ^4.8.0
+ version: 4.8.0
devDependencies:
'@chess-d/configs':
specifier: workspace:*
version: link:../../packages/configs
+ '@types/three':
+ specifier: ^0.166.0
+ version: 0.166.0
+ stats.js:
+ specifier: ^0.17.0
+ version: 0.17.0
packages/api:
dependencies:
@@ -1049,6 +1061,9 @@ packages:
'@tsconfig/node16@1.0.4':
resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+ '@tweenjs/tween.js@23.1.2':
+ resolution: {integrity: sha512-kMCNaZCJugWI86xiEHaY338CU5JpD0B97p1j1IKNn/Zto8PgACjQx0UxbHjmOcLl/dDOBnItwD07KmCs75pxtQ==}
+
'@types/babel__core@7.20.5':
resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
@@ -1148,15 +1163,24 @@ packages:
'@types/stack-utils@2.0.3':
resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
+ '@types/stats.js@0.17.3':
+ resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
+
'@types/superagent@8.1.7':
resolution: {integrity: sha512-NmIsd0Yj4DDhftfWvvAku482PZum4DBW7U51OvS8gvOkDDY0WT1jsVyDV3hK+vplrsYw8oDwi9QxOM7U68iwww==}
'@types/supertest@6.0.2':
resolution: {integrity: sha512-137ypx2lk/wTQbW6An6safu9hXmajAifU/s7szAHLN/FeIm5w7yR0Wkl9fdJMRSHwOn4HLAI0DaB2TOORuhPDg==}
+ '@types/three@0.166.0':
+ resolution: {integrity: sha512-FHMnpcdhdbdOOIYbfkTkUVpYMW53odxbTRwd0/xJpYnTzEsjnVnondGAvHZb4z06UW0vo6WPVuvH0/9qrxKx7g==}
+
'@types/tough-cookie@4.0.5':
resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
+ '@types/webxr@0.5.19':
+ resolution: {integrity: sha512-4hxA+NwohSgImdTSlPXEqDqqFktNgmTXQ05ff1uWam05tNGroCMp4G+4XVl6qWm1p7GQ/9oD41kAYsSssF6Mzw==}
+
'@types/yargs-parser@21.0.3':
resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
@@ -2321,6 +2345,9 @@ packages:
fb-watchman@2.0.2:
resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
+ fflate@0.8.2:
+ resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
figures@3.2.0:
resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
engines: {node: '>=8'}
@@ -3265,6 +3292,9 @@ packages:
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
engines: {node: '>= 8'}
+ meshoptimizer@0.18.1:
+ resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
+
methods@1.1.2:
resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
engines: {node: '>= 0.6'}
@@ -3984,6 +4014,9 @@ packages:
resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
engines: {node: '>=10'}
+ stats.js@0.17.0:
+ resolution: {integrity: sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==}
+
statuses@2.0.1:
resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
engines: {node: '>= 0.8'}
@@ -4256,6 +4289,10 @@ packages:
peerDependencies:
typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
+ tsyringe@4.8.0:
+ resolution: {integrity: sha512-YB1FG+axdxADa3ncEtRnQCFq/M0lALGLxSZeVNbTU8NqhOVc51nnv2CISTcvc1kyv6EGPtXVr0v6lWeDxiijOA==}
+ engines: {node: '>= 6.0.0'}
+
turbo-darwin-64@2.0.6:
resolution: {integrity: sha512-XpgBwWj3Ggmz/gQVqXdMKXHC1iFPMDiuwugLwSzE7Ih0O13JuNtYZKhQnopvbDQnFQCeRq2Vsm5OTWabg/oB/g==}
cpu: [x64]
@@ -5710,6 +5747,8 @@ snapshots:
'@tsconfig/node16@1.0.4': {}
+ '@tweenjs/tween.js@23.1.2': {}
+
'@types/babel__core@7.20.5':
dependencies:
'@babel/parser': 7.24.5
@@ -5834,6 +5873,8 @@ snapshots:
'@types/stack-utils@2.0.3': {}
+ '@types/stats.js@0.17.3': {}
+
'@types/superagent@8.1.7':
dependencies:
'@types/cookiejar': 2.1.5
@@ -5845,8 +5886,18 @@ snapshots:
'@types/methods': 1.1.4
'@types/superagent': 8.1.7
+ '@types/three@0.166.0':
+ dependencies:
+ '@tweenjs/tween.js': 23.1.2
+ '@types/stats.js': 0.17.3
+ '@types/webxr': 0.5.19
+ fflate: 0.8.2
+ meshoptimizer: 0.18.1
+
'@types/tough-cookie@4.0.5': {}
+ '@types/webxr@0.5.19': {}
+
'@types/yargs-parser@21.0.3': {}
'@types/yargs@17.0.32':
@@ -7311,6 +7362,8 @@ snapshots:
dependencies:
bser: 2.1.1
+ fflate@0.8.2: {}
+
figures@3.2.0:
dependencies:
escape-string-regexp: 1.0.5
@@ -8467,6 +8520,8 @@ snapshots:
merge2@1.4.1: {}
+ meshoptimizer@0.18.1: {}
+
methods@1.1.2: {}
micromatch@4.0.5:
@@ -9180,6 +9235,8 @@ snapshots:
dependencies:
escape-string-regexp: 2.0.0
+ stats.js@0.17.0: {}
+
statuses@2.0.1: {}
streamsearch@1.1.0: {}
@@ -9473,6 +9530,10 @@ snapshots:
tslib: 1.14.1
typescript: 5.3.3
+ tsyringe@4.8.0:
+ dependencies:
+ tslib: 1.14.1
+
turbo-darwin-64@2.0.6:
optional: true