ESM Grid Mesh Script

eslint.config.mjs

@@ -44,6 +44,12 @@ export default [
             'no-var': 'off'
         }
     },
+    {
+        files: ['scripts/**/*.mjs'],
+        rules: {
+            'jsdoc/no-defaults': 'off' // Attributes use default values
+        }
+    },
     {
         files: ['test/**/*.mjs'],
         rules: {

examples/src/examples/gizmos/transform-rotate.example.mjs

@@ -1,7 +1,9 @@
 import { data } from 'examples/observer';
-import { deviceType, rootPath } from 'examples/utils';
+import { deviceType, fileImport, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 
+const { Grid } = await fileImport(`${rootPath}/static/scripts/esm/grid.mjs`);
+
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
 
@@ -108,6 +110,13 @@ data.set('gizmo', {
     faceRingRadius: gizmo.faceRingRadius
 });
 
+// create grid
+const gridEntity = new pc.Entity('grid');
+gridEntity.setLocalScale(4, 1, 4);
+app.root.addChild(gridEntity);
+gridEntity.addComponent('script');
+gridEntity.script.create(Grid);
+
 // controls hook
 const tmpC = new pc.Color();
 data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
@@ -146,24 +155,6 @@ const resize = () => {
 window.addEventListener('resize', resize);
 resize();
 
-// grid lines
-const createGridLines = (size = 1) => {
-    const lines = [];
-    for (let i = -size; i < size + 1; i++) {
-        lines.push(
-            new pc.Vec3(-size, 0, i),
-            new pc.Vec3(size, 0, i),
-            new pc.Vec3(i, 0, -size),
-            new pc.Vec3(i, 0, size)
-        );
-    }
-    return lines;
-};
-
-const lines = createGridLines(2);
-const gridCol = new pc.Color(1, 1, 1, 0.5);
-app.on('update', () => app.drawLines(lines, gridCol));
-
 app.on('destroy', () => {
     window.removeEventListener('resize', resize);
 });

examples/src/examples/gizmos/transform-scale.example.mjs

@@ -1,7 +1,9 @@
 import { data } from 'examples/observer';
-import { deviceType, rootPath } from 'examples/utils';
+import { deviceType, fileImport, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 
+const { Grid } = await fileImport(`${rootPath}/static/scripts/esm/grid.mjs`);
+
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
 
@@ -112,6 +114,13 @@ data.set('gizmo', {
     axisCenterSize: gizmo.axisCenterSize
 });
 
+// create grid
+const gridEntity = new pc.Entity('grid');
+gridEntity.setLocalScale(4, 1, 4);
+app.root.addChild(gridEntity);
+gridEntity.addComponent('script');
+gridEntity.script.create(Grid);
+
 // controls hook
 const tmpC = new pc.Color();
 data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
@@ -150,24 +159,6 @@ const resize = () => {
 window.addEventListener('resize', resize);
 resize();
 
-// grid lines
-const createGridLines = (size = 1) => {
-    const lines = [];
-    for (let i = -size; i < size + 1; i++) {
-        lines.push(
-            new pc.Vec3(-size, 0, i),
-            new pc.Vec3(size, 0, i),
-            new pc.Vec3(i, 0, -size),
-            new pc.Vec3(i, 0, size)
-        );
-    }
-    return lines;
-};
-
-const lines = createGridLines(2);
-const gridCol = new pc.Color(1, 1, 1, 0.5);
-app.on('update', () => app.drawLines(lines, gridCol));
-
 app.on('destroy', () => {
     window.removeEventListener('resize', resize);
 });

examples/src/examples/gizmos/transform-translate.example.mjs

@@ -1,7 +1,9 @@
 import { data } from 'examples/observer';
-import { deviceType, rootPath } from 'examples/utils';
+import { deviceType, fileImport, rootPath } from 'examples/utils';
 import * as pc from 'playcanvas';
 
+const { Grid } = await fileImport(`${rootPath}/static/scripts/esm/grid.mjs`);
+
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
 
@@ -113,6 +115,13 @@ data.set('gizmo', {
     axisCenterSize: gizmo.axisCenterSize
 });
 
+// create grid
+const gridEntity = new pc.Entity('grid');
+gridEntity.setLocalScale(4, 1, 4);
+app.root.addChild(gridEntity);
+gridEntity.addComponent('script');
+gridEntity.script.create(Grid);
+
 // controls hook
 const tmpC = new pc.Color();
 data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
@@ -151,24 +160,6 @@ const resize = () => {
 window.addEventListener('resize', resize);
 resize();
 
-// grid lines
-const createGridLines = (size = 1) => {
-    const lines = [];
-    for (let i = -size; i < size + 1; i++) {
-        lines.push(
-            new pc.Vec3(-size, 0, i),
-            new pc.Vec3(size, 0, i),
-            new pc.Vec3(i, 0, -size),
-            new pc.Vec3(i, 0, size)
-        );
-    }
-    return lines;
-};
-
-const lines = createGridLines(2);
-const gridCol = new pc.Color(1, 1, 1, 0.5);
-app.on('update', () => app.drawLines(lines, gridCol));
-
 app.on('destroy', () => {
     window.removeEventListener('resize', resize);
 });

examples/src/examples/misc/editor.controls.mjs

@@ -5,7 +5,7 @@ import * as pc from 'playcanvas';
  * @returns {JSX.Element} The returned JSX Element.
  */
 export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput } = ReactPCUI;
+    const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput, ColorPicker } = ReactPCUI;
     const { useState } = React;
 
     const [type, setType] = useState('translate');
@@ -114,6 +114,39 @@ export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
                         max: 100
                     })
                 )
+        ),
+        jsx(
+            Panel,
+            { headerText: 'Grid' },
+            jsx(
+                LabelGroup,
+                { text: 'Resolution' },
+                jsx(SelectInput, {
+                    options: [
+                        { v: 3, t: 'High' },
+                        { v: 2, t: 'Medium' },
+                        { v: 1, t: 'Low' }
+                    ],
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'grid.resolution' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Color X' },
+                jsx(ColorPicker, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'grid.colorX' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Color Z' },
+                jsx(ColorPicker, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'grid.colorZ' }
+                })
+            )
         )
     );
 };

examples/src/examples/misc/editor.example.mjs

@@ -1,14 +1,15 @@
 // @config DESCRIPTION <div style='text-align:center'><div>Translate (1), Rotate (2), Scale (3)</div><div>World/Local (X)</div><div>Perspective (P), Orthographic (O)</div></div>
 import { data } from 'examples/observer';
-import { deviceType, rootPath, localImport } from 'examples/utils';
+import { deviceType, rootPath, localImport, fileImport } from 'examples/utils';
 import * as pc from 'playcanvas';
 
+const { Grid } = await fileImport(`${rootPath}/static/scripts/esm/grid.mjs`);
+
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
 
 // class for handling gizmo
 const { GizmoHandler } = await localImport('gizmo-handler.mjs');
-const { Grid } = await localImport('grid.mjs');
 const { Selector } = await localImport('selector.mjs');
 
 const gfxOptions = {
@@ -127,6 +128,18 @@ camera.setPosition(1, 1, 1);
 app.root.addChild(camera);
 orbitCamera.distance = 5 * camera.camera?.aspectRatio;
 
+// grid
+const gridEntity = new pc.Entity('grid');
+gridEntity.setLocalScale(8, 1, 8);
+app.root.addChild(gridEntity);
+gridEntity.addComponent('script');
+const grid = /** @type {Grid} */ (gridEntity.script.create(Grid));
+data.set('grid', {
+    colorX: Object.values(grid.colorX),
+    colorZ: Object.values(grid.colorZ),
+    resolution: grid.resolution + 1
+});
+
 // create light entity
 const light = new pc.Entity('light');
 light.addComponent('light', {
@@ -204,6 +217,7 @@ window.addEventListener('keyup', keyup);
 window.addEventListener('keypress', keypress);
 
 // gizmo and camera set handler
+const tmpC1 = new pc.Color();
 data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
     const [category, key] = path.split('.');
     switch (category) {
@@ -230,6 +244,21 @@ data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
             gizmoHandler.gizmo[key] = value;
             break;
         }
+        case 'grid': {
+            switch (key) {
+                case 'colorX':
+                    grid.colorX = tmpC1.set(value[0], value[1], value[2]);
+                    break;
+                case 'colorZ':
+                    grid.colorZ = tmpC1.set(value[0], value[1], value[2]);
+                    break;
+                case 'resolution':
+                    grid.resolution = value - 1;
+                    break;
+            }
+            break;
+        }
+
     }
 });
 
@@ -246,13 +275,6 @@ selector.on('deselect', () => {
     gizmoHandler.clear();
 });
 
-// grid
-const grid = new Grid();
-
-app.on('update', (/** @type {number} */ dt) => {
-    grid.draw(app);
-});
-
 app.on('destroy', () => {
     gizmoHandler.destroy();
     selector.destroy();