From 0c14fc856f4a82e7720efbaf7e2ff07149f6e0c3 Mon Sep 17 00:00:00 2001 From: Edward Wei Date: Fri, 27 Dec 2024 00:25:21 -0800 Subject: [PATCH 1/3] add mesh color --- src/components/accent-color.js | 38 +++++++++++++++++++ .../AddLayerPanel/AddLayerPanel.component.jsx | 7 +++- src/index.js | 1 + 3 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 src/components/accent-color.js diff --git a/src/components/accent-color.js b/src/components/accent-color.js new file mode 100644 index 000000000..bb2df1d6f --- /dev/null +++ b/src/components/accent-color.js @@ -0,0 +1,38 @@ +/* global AFRAME */ + +AFRAME.registerComponent('accent-color', { + schema: { + color: { + type: 'color' + }, + index: { + type: 'int' + } + }, + init: function () { + this.meshes = []; + console.log(this.el); + // The group children aren't ready when the component is initialized, so wait a bit. + // TODO: Find a better way to time this. + setTimeout(() => { + this.el.object3D.traverse((o) => o.material && this.meshes.push(o)); + console.log(this.meshes); + this.update(); + }, 1000); + }, + update: function (oldData) { + // Remove the tint on the previous mesh + if (oldData && oldData.index !== this.data.index) { + const oldMesh = this.meshes.at(oldData.index); + oldMesh && oldMesh.material.color.set(1, 1, 1); + } + // Ignore negative index + if (this.data.index < 0) return; + // Apply tint to selected mesh + const mesh = this.meshes.at(this.data.index); + if (mesh) { + mesh.material.color.set(this.data.color); + mesh.material.color.multiplyScalar(255); + } + } +}); diff --git a/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx b/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx index bf93c785f..bef4b4027 100644 --- a/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx +++ b/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx @@ -145,7 +145,11 @@ const createEntity = (mixinId) => { } const newEntityObject = { mixin: mixinId, - components: {} + components: { + 'accent-color': { + index: -1 + } + } }; const selectedElement = AFRAME.INSPECTOR.selectedEntity; @@ -200,6 +204,7 @@ const createEntity = (mixinId) => { }); newEntityObject.components.position = position; } + console.log('heere!!'); AFRAME.INSPECTOR.execute('entitycreate', newEntityObject); }; diff --git a/src/index.js b/src/index.js index a217dd5be..59669abd4 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,7 @@ require('./lib/animation-mixer.js'); require('./lib/aframe-gaussian-splatting-component.min.js'); require('./assets.js'); require('./components/notify.js'); +require('./components/accent-color.js'); require('./components/create-from-json'); require('./components/screentock.js'); require('aframe-atlas-uvs-component'); From 8964501f92dd278d195d03a103ffb785b57cec8c Mon Sep 17 00:00:00 2001 From: Edward Wei Date: Fri, 27 Dec 2024 00:36:26 -0800 Subject: [PATCH 2/3] Cleanup unused statements --- src/components/accent-color.js | 2 -- .../components/AddLayerPanel/AddLayerPanel.component.jsx | 1 - 2 files changed, 3 deletions(-) diff --git a/src/components/accent-color.js b/src/components/accent-color.js index bb2df1d6f..44d106b25 100644 --- a/src/components/accent-color.js +++ b/src/components/accent-color.js @@ -11,12 +11,10 @@ AFRAME.registerComponent('accent-color', { }, init: function () { this.meshes = []; - console.log(this.el); // The group children aren't ready when the component is initialized, so wait a bit. // TODO: Find a better way to time this. setTimeout(() => { this.el.object3D.traverse((o) => o.material && this.meshes.push(o)); - console.log(this.meshes); this.update(); }, 1000); }, diff --git a/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx b/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx index bef4b4027..94dace58b 100644 --- a/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx +++ b/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx @@ -204,7 +204,6 @@ const createEntity = (mixinId) => { }); newEntityObject.components.position = position; } - console.log('heere!!'); AFRAME.INSPECTOR.execute('entitycreate', newEntityObject); }; From 8176239880856b2c94421450551b10fcaf1b1cb9 Mon Sep 17 00:00:00 2001 From: Edward Wei Date: Sun, 29 Dec 2024 21:23:14 -0800 Subject: [PATCH 3/3] Use model loaded hook and change mesh traverse --- src/components/accent-color.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/accent-color.js b/src/components/accent-color.js index 44d106b25..256c2fda6 100644 --- a/src/components/accent-color.js +++ b/src/components/accent-color.js @@ -10,24 +10,23 @@ AFRAME.registerComponent('accent-color', { } }, init: function () { - this.meshes = []; - // The group children aren't ready when the component is initialized, so wait a bit. - // TODO: Find a better way to time this. - setTimeout(() => { - this.el.object3D.traverse((o) => o.material && this.meshes.push(o)); - this.update(); - }, 1000); + // Want the color update to apply when the mixin is loaded, + // which may be at a different time than the component + this.el.addEventListener('model-loaded', () => this.update()); }, update: function (oldData) { + // Collect meshes + const meshes = []; + this.el.object3D.traverse((o) => o.material && meshes.push(o)); // Remove the tint on the previous mesh if (oldData && oldData.index !== this.data.index) { - const oldMesh = this.meshes.at(oldData.index); + const oldMesh = meshes.at(oldData.index); oldMesh && oldMesh.material.color.set(1, 1, 1); } // Ignore negative index if (this.data.index < 0) return; // Apply tint to selected mesh - const mesh = this.meshes.at(this.data.index); + const mesh = meshes.at(this.data.index); if (mesh) { mesh.material.color.set(this.data.color); mesh.material.color.multiplyScalar(255);