Sunil gauswami Sunil gauswami - 3 months ago 25
HTML Question

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

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-asset-item id="box" src="box.dae"></a-asset-item>
<a-entity id="collada" collada-model="#box"></a-entity>
<a-entity id="cmr" position="0 1 5" rotation="0 0 0">
<a-cursor color="#2E3A87" >

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


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.


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

Documentation for THREE.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. :)