merge webviewer

CAIMEOX · Jul 24, 2023 · f2fda5e · f2fda5e
1 parent 4979836
commit f2fda5e
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 7 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
-node_modules
+webviewer
+node_modules
diff --git a/.npmignore b/.npmignore
@@ -1,9 +1,8 @@
 index.ts
 tsconfig.json
-src
 build
-src/*.ts
-!src/*.d.ts
+webviewer
+*.ts
 .prettierrc
 .eslintrc
 .eslintignore
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@pureeval/voxel-geometry",
-	"version": "1.2.5",
+	"version": "1.2.6",
 	"type": "module",
 	"description": "voxel-geometry",
 	"devDependencies": {
@@ -13,10 +13,14 @@
 		"gulp-sourcemaps": "^3.0.0",
 		"gulp-typescript": "^6.0.0-alpha.1",
 		"source-map": "^0.7.4",
-		"typescript": "^4.9.4"
+		"typescript": "^4.9.4",
+		"express": "^4.18.2",
+		"three": "^0.126.1",
+		"ws": "^8.12.0"
 	},
 	"scripts": {
-		"lint": "eslint . --ext .ts"
+		"lint": "eslint . --ext .ts",
+		"webviewer": "tsc && node ./webviewer/server.js"
 	},
 	"main": "index.js",
 	"repository": {

diff --git a/webviewer/public/index.html b/webviewer/public/index.html
@@ -0,0 +1,106 @@
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>VoxelGeometry Viewer</title>
+    <style>
+        body {
+            margin: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+    <script type="importmap">
+            {
+                "imports": {
+                    "three": "/node_modules/three/build/three.module.js",
+                    "three/addons/": "/node_modules/three/examples/jsm/"
+                }
+            }
+        </script>
+    <script type="module">
+        import * as THREE from "three";
+        import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+
+        const createScene = () => {
+            let scene = new THREE.Scene();
+            scene.background = new THREE.Color(0xbfd1e5);
+            return scene;
+        };
+
+        let scene = createScene();
+
+        const createCamera = () => {
+            return new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        };
+
+        const camera = createCamera();
+
+        const createRenderer = () => {
+            const renderer = new THREE.WebGLRenderer({
+                antialias: true,
+            });
+            renderer.setPixelRatio(window.devicePixelRatio);
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.body.appendChild(renderer.domElement);
+            return renderer;
+        };
+
+        const renderer = createRenderer();
+
+        const createMaterial = () => {
+            const texture = new THREE.TextureLoader().load("./texture.png");
+            const material = new THREE.MeshBasicMaterial({
+                map: texture,
+                side: THREE.DoubleSide,
+            });
+            material.transparent = true;
+            texture.magFilter = THREE.NearestFilter;
+            return material;
+        };
+
+        const material = createMaterial();
+
+        const geometry = new THREE.BoxGeometry(1, 1, 1);
+
+        const createBlock = (x, y, z) => {
+            const cube = new THREE.Mesh(geometry, material);
+            scene.add(cube);
+            cube.position.x = x;
+            cube.position.y = y;
+            cube.position.z = z;
+        };
+
+        const clear = () => {
+            scene = createScene();
+        };
+
+        camera.position.z = 5;
+
+        const controls = new OrbitControls(camera, renderer.domElement);
+        controls.target.set(1, 1, 1);
+        controls.update();
+
+        (function animate() {
+            requestAnimationFrame(animate);
+            renderer.render(scene, camera);
+        })();
+
+        const ws = new WebSocket("ws://127.0.0.1:2333");
+
+        ws.onmessage = function (msg) {
+            const op = JSON.parse(msg.data);
+            if (op["op"] == "clear") {
+                clear();
+            } else {
+                for (let x of op["raw"]) {
+                    createBlock(x[0], x[1], x[2]);
+                }
+            }
+        };
+    </script>
+</body>
+
+</html>
diff --git a/webviewer/public/texture.png b/webviewer/public/texture.png