Update Collada (.dae ) file code from A-Frame or JS

Question

I load collada (.dae) file in A-Frame. Its loaded fine. But now i have to update that file from user input like color, etc.. How to update the code inside the .dae file from html, js or A-Frame

This is the Loaded A Frame code :

<a-scene>
   <a-assets>
        <a-asset-item id="box" src="box.dae"></a-asset-item>
   </a-assets>
   <a-entity id="collada" collada-model="#box"></a-entity>
       <a-entity id="cmr" position="0 1 5" rotation="0 0 0">
         <a-camera> 
           <a-cursor color="#2E3A87" >
         </a-camera>
       </a-entity> 
</a-scene>

So How can i Update the code inside the .dae file from user end, using html, js, A-Frame or any?

This is Collada File : box.dae

Answer 1

A-Frame's builtin components only support very basic overrides (you might be able to set the color of a model using e.g. material="color: red", I'm not sure). For anything more advanced, you will need to use the THREE.js APIs that A-Frame itself uses. I'd recommend looking through the THREE.js documentation — there's a lot of detail about how to customize Material and Geometry instances — but a very basic example here:

 AFRAME.registerComponent('model-overrider', {
   init: function() {
     this.el.addEventListener('model-loaded', function(e) {
       var model = e.detail.model;
       model.traverse(function(o) {
         if (o instanceof THREE.Mesh) {
           // modify o.material or o.geometry here.
         }
       });
     });
   }
 });

Usage:

<a-entity collada-model="..." model-overrider> </a-entity>

Documentation for THREE.Material: Material

For a more complicated example, deforming individual vertices, see <a-ocean/>.

---

And of course, if you want to do any serious manual editing, you will want to be using Blender, Maya, or another 3D modeling program instead. :)