From 04e1d0d3132b5a8ab26bab16739ef6cfd92c0fab Mon Sep 17 00:00:00 2001
From: Cdm2883 <Cdm2883@hotmail.com>
Date: Sat, 10 Aug 2024 00:43:53 +0800
Subject: [PATCH] feat: pseudo 3d layer examples

---
 src/index.js | 37 ++++++++++++++++++++++++-------------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/index.js b/src/index.js
index 716507c..c919e84 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,19 +13,30 @@ if (WebGL.isWebGL2Available()) {
     layer.bind(world);
     console.log(layer);
 
-    const test1 = document.createElement('div');
-    test1.style.width = '10%';
-    test1.style.height = '10%';
-    test1.style.background = 'red';
-    test1.style.pointerEvents = 'fill';
-    layer.add(test1, { x: 0, y: 0, z: 0 });
-
-    const test2 = document.createElement('div');
-    test2.style.width = '5%';
-    test2.style.height = '5%';
-    test2.style.background = 'green';
-    test2.style.pointerEvents = 'fill';
-    layer.add(test2, { x: 0, y: 0, z: 1 });
+    {
+        const test = document.createElement('div');
+        test.style.width = '10%';
+        test.style.height = '10%';
+        test.style.background = 'red';
+        test.style.pointerEvents = 'fill';
+        layer.add(test, { x: 0, y: 0, z: 0 });
+    }
+    {
+        const test = document.createElement('div');
+        test.style.width = '5%';
+        test.style.height = '5%';
+        test.style.background = 'green';
+        test.style.pointerEvents = 'fill';
+        layer.add(test, { x: 0, y: 0, z: 1 });
+    }
+    {
+        const test = document.createElement('div');
+        test.style.width = '1%';
+        test.style.height = '1%';
+        test.style.background = 'blue';
+        test.style.pointerEvents = 'fill';
+        layer.add(test, { x: 4 * Pseudo3DLayer.PixelToBlockMultiple, y: 2 * Pseudo3DLayer.PixelToBlockMultiple, z: 2 });
+    }
 } else {
     document.body.appendChild(WebGL.getWebGL2ErrorMessage());
 }