feat: init three.js & @quick-three/reactive

### Description

- install `three.js` & `@quick-three/reactive`
- Use demo code for web

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"
 	}
 }

apps/web/src/assets/styles/main.css

@@ -0,0 +1,8 @@
+html,
+body {
+	margin: 0;
+	padding: 0;
+	top: 0;
+	left: 0;
+	overflow: hidden;
+}

apps/web/src/main.ts

@@ -1,5 +1,20 @@
-import "./style.css";
+import { register } from "@quick-threejs/reactive";
 
-document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
-  <h1>Chess-D</h1>
-`;
+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 });
+			});
+	}
+});

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);
+		});
+	}
+});

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"
+	}
 }