Editor example updates (#7319)

* WIP: outline renderer * Added outline to editor example * Added destroy handler to viewcube * Removed mouse and keyboard
playcanvas · Jan 30, 2025 · 535f906 · 535f906
1 parent 292802d
commit 535f906
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/examples/src/examples/misc/editor.example.mjs b/examples/src/examples/misc/editor.example.mjs
@@ -24,8 +24,6 @@ device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 
 const createOptions = new pc.AppOptions();
 createOptions.graphicsDevice = device;
-createOptions.mouse = new pc.Mouse(document.body);
-createOptions.keyboard = new pc.Keyboard(window);
 
 createOptions.componentSystems = [
     pc.RenderComponentSystem,
@@ -44,7 +42,6 @@ app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
 // load assets
 const assets = {
-    script: new pc.Asset('script', 'script', { url: `${rootPath}/static/scripts/camera/orbit-camera.js` }),
     font: new pc.Asset('font', 'font', { url: `${rootPath}/static/assets/fonts/courier.json` })
 };
 /**
@@ -126,6 +123,8 @@ camera.addComponent('camera', {
 const cameraOffset = 4 * camera.camera?.aspectRatio;
 camera.setPosition(cameraOffset, cameraOffset, cameraOffset);
 app.root.addChild(camera);
+
+// camera controls
 const cameraControls = /** @type {CameraControls} */ (camera.script.create(CameraControls, {
     properties: {
         focusPoint: pc.Vec3.ZERO,
@@ -142,6 +141,15 @@ app.on('gizmo:pointer', (/** @type {boolean} */ hasPointer) => {
     }
 });
 
+// outline renderer
+const outlineLayer = new pc.Layer({ name: 'OutlineLayer' });
+app.scene.layers.push(outlineLayer);
+const immediateLayer = /** @type {pc.Layer} */ (app.scene.layers.getLayerByName('Immediate'));
+const outlineRenderer = new pc.OutlineRenderer(app, outlineLayer);
+app.on('update', () => {
+    outlineRenderer.frameUpdate(camera, immediateLayer, false);
+});
+
 // grid
 const gridEntity = new pc.Entity('grid');
 gridEntity.setLocalScale(8, 1, 8);
@@ -181,8 +189,6 @@ const setGizmoControls = () => {
 };
 gizmoHandler.switch('translate');
 setGizmoControls();
-gizmoHandler.add(box);
-window.focus();
 
 // view cube
 const viewCube = new pc.ViewCube(new pc.Vec4(0, 1, 1, 0));
@@ -211,11 +217,16 @@ app.on('prerender', () => {
 // selector
 const layers = app.scene.layers;
 const selector = new Selector(app, camera.camera, [layers.getLayerByName('World')]);
-selector.on('select', (/** @type {pc.GraphNode} */ node, /** @type {boolean} */ clear) => {
+selector.on('select', (/** @type {pc.Entity} */ node, /** @type {boolean} */ clear) => {
     gizmoHandler.add(node, clear);
+    if (clear) {
+        outlineRenderer.removeAllEntities();
+    }
+    outlineRenderer.addEntity(node, pc.Color.WHITE);
 });
 selector.on('deselect', () => {
     gizmoHandler.clear();
+    outlineRenderer.removeAllEntities();
 });
 
 // ensure canvas is resized when window changes size + keep gizmo size consistent to canvas size
@@ -344,14 +355,22 @@ data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
     }
 });
 
+// destroy handlers
 app.on('destroy', () => {
     gizmoHandler.destroy();
     selector.destroy();
+    viewCube.destroy();
 
     window.removeEventListener('resize', resize);
     window.removeEventListener('keydown', keydown);
     window.removeEventListener('keyup', keyup);
     window.removeEventListener('keypress', keypress);
 });
 
+// initial selection
+selector.fire('select', box, true);
+
+// focus canvas
+window.focus();
+
 export { app };
diff --git a/src/extras/gizmo/view-cube.js b/src/extras/gizmo/view-cube.js
@@ -452,6 +452,11 @@ class ViewCube extends EventHandler {
 
         this._group.appendChild(fragment);
     }
+
+    destroy() {
+        this.dom.remove();
+        this.off();
+    }
 }
 
 export { ViewCube };