setup base code for 3D version

Viet281101 · Jun 6, 2024 · 52ffce2 · 52ffce2
1 parent f851fce
commit 52ffce2
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 4,522 deletions.
diff --git a/3D/index.html b/3D/index.html
@@ -10,7 +10,7 @@
 </head>
 <body>
 	<canvas id="myCanvas"></canvas>
-	<script type="importmap">{"imports": {"three": "./libs/three/three.module.min.js", "three/addons/": "./libs/three/jsm/"}}</script>
+	<script type="importmap">{"imports": {"three": "./js/libs/three/three.module.min.js", "three/addons/": "./js/libs/three/jsm/"}}</script>
 	<script type="module" src="./js/main.js"></script>
 </body>
 </html>
diff --git a/3D/js/board.js b/3D/js/board.js
@@ -0,0 +1,24 @@
+import * as THREE from 'three';
+
+class Board {
+	constructor(scene, size = 10) {
+		this.scene = scene;
+		this.size = size;
+		this.grid = new THREE.Group();
+
+		const gridHelper = new THREE.GridHelper(size, size);
+		this.grid.add(gridHelper);
+
+		this.scene.add(this.grid);
+	};
+
+	addPolycube(polycube) {
+		this.grid.add(polycube.mesh);
+	};
+
+	removePolycube(polycube) {
+		this.grid.remove(polycube.mesh);
+	};
+};
+
+export { Board };
diff --git a/3D/js/gui.js b/3D/js/gui.js
@@ -0,0 +1,55 @@
+import { GUI } from './libs/dat.gui.module.js';
+import { Polycube } from './polycube.js';
+
+export class GUIController {
+	constructor(mainApp) {
+		this.mainApp = mainApp;
+		this.settings = {
+			gridSize: 10,
+			backgroundColor: '#c3c3c3',
+			selectedColor: '#0000ff',
+			addPolycube: () => {
+				const polycube = new Polycube(
+					{ x: Math.random() * 10 - 5, y: Math.random() * 10 - 5, z: Math.random() * 10 - 5 },
+					this.settings.selectedColor
+				);
+				this.mainApp.board.addPolycube(polycube);
+			},
+			removePolycube: () => {
+				if (this.mainApp.board.grid.children.length > 1) {
+					this.mainApp.board.grid.remove(this.mainApp.board.grid.children[this.mainApp.board.grid.children.length - 1]);
+				}
+			}
+		};
+		this.init();
+		this.checkWindowSize();
+	};
+
+	init() {
+		this.gui = new GUI();
+		const guiContainer = document.querySelector('.dg');
+		if (guiContainer) {
+			guiContainer.classList.add('scaled-gui');
+			guiContainer.style.zIndex = '1000 !important';
+			guiContainer.style.right = '-22px';
+			guiContainer.style.transformOrigin = 'top right';
+			guiContainer.style.transform = 'scale(1.5)';
+		}
+
+		this.gui.add(this.settings, 'gridSize', 10, 100).step(1).onChange((value) => {
+			this.mainApp.updateGridSize(value);
+		});
+		this.gui.addColor(this.settings, 'backgroundColor').onChange((value) => {
+			this.mainApp.renderer.setClearColor(value);
+		});
+		this.gui.addColor(this.settings, 'selectedColor').onChange((value) => {
+			this.settings.selectedColor = value;
+		});
+		this.gui.add(this.settings, 'addPolycube');
+		this.gui.add(this.settings, 'removePolycube');
+	};
+
+	checkWindowSize() {
+		this.gui.domElement.style.display = window.innerWidth <= 800 ? 'none' : 'block';
+	};
+};